avalonjs-source Reading (ii)

The previous article describes several functions used by the Avalon Brush page. This article is mainly about how Avalon handles the custom properties that Avalon brushes out of the brush dom. Catalog [-]avalon page Processing (2) data Structure Analysis Avalon label Parseexprparseexprproxy function Introduction Createcache Summary Appendix Test Demoavalon page Processing (2several functions used by the Avalon Brush page that were described in the previous article. This article is mainly about how Avalon handles the custom properties that Avalon brushes out of the brush dom. Data structure See JS Code The most headache is the data flow when the data structure changes. //attr Bindings//For example <div ms-dbclick-_abc= ' func ' ></div>{type: $string,//That is, Ms-... The following information, such as Ms-duplex, is Type:duplex, notice that the event, such as Click,mousemove, is unified as Type:onParam: $string//"_ABC"Element: $node//Current NodeName: $string//MS-DBCLICK-_ABCValue: $string//funcPriority: $Num//priority level.         //"If": Ten,        //"Repeat":        //"Widgets":        //"Each": 1400,        //"with":        //"Duplex":        //"on":        //The higher the value, the greater the priority}//text bindings from the previous article.{type:"Text|html",//typeNode:node,//the element after replacementNodetype:3,//node TypeValue:token.value, filters:token.filters replacenodes: $array//[node]    //token is the return value of scanexpr}//Text Token{value: $string//Specific Valuesexpr:$Boolean//is not in {{...}} InsideFilters: $array |void0//Filter Filters}//bindinghandlers Data{handlerName: $name//the parsing was performed by which method in the Bindinghandlers. Because the href src and so on are handled by attr, the Type property of the bindings is unreliableEvaluator: $func//a function generated by parseexpr. ...//above the text bindings and attr bindingsafter parsing the Avalon tag with the data structure, it's a little easier to see the source code. The function of parsing tags mainly exists within the Bindinghandlers object. Bindinghandler is primarily about classifying Avalon tags and dealing with them as if they were JavaScript UI plugins. The two very important functions he used were parseexprproxy and parseexpr. The main role of PARSEEXPRPARSEEXPR is based on Ms-What , {what}, Vmodule, and previously defined filters are generated and stored under evaluator (see Bindinghandlers data data structure).     Here are the various post-build function finishes. //simple binding of properties such as Ms-href={{name}}functionAnonymous (Vm1399087422863_0/**/) {    ' Use strict '; varName =Vm1399087422863_0.namereturnname;}//with filter, for example {{name | uppercase}}functionAnonymous (vm1399088892713_0,filters1399088892713/**/) {//filters1399088892713 will pass in all existing filters as Key/value .' Use strict '; varName =Vm1399088892713_0.namevarret1399088892713 =nameif(filters1399088892713.uppercase) {Try{ret1399088892713=filters1399088892713.uppercase (ret1399088892713)}Catch(e) {}}returnret1399088892713}//ms-duplex= ' name 'functionAnonymous (VM1399091173121_0/**/) {    ' Use strict '; return function(VVV) {varName =Vm1399091173121_0.name; if(!arguments.length) {            returnname} vm1399091173121_0.name=VVV; }} //ms-on ms-click= "click"functionAnonymous (VM1399093434491_0/**/) {    ' Use strict '; varClick =Vm1399093434491_0.clickif(Avalon.opencomputedcollect)return ; returnClick;} Above is the three branches (the first function and the second function belong to the same branch) the most basic example, the more complex is basically derived from this basis, you can try to look at the above code to write some complex points of function out, and with Avalon generated contrast. PARSEEXPR when generating functions, it involves the uniid generation of the cache generation function and the cache function. Cached source code and test demo will be written on the back. The main function of parseexprproxyparseexprproxy is to generate functions by calling parseexpr and then make corresponding DOM subscriptions. It also helps parseexpr deal with a similar Ms-href= ' Http://{{abc}}ff{{abd}} ''s branch. As for how the DOM subscription, does not belong to this article category.     function Introduction Createcachecreatecache: Create a fixed size cache, directly to the collection. functionCreatecache (maxLength) {varKeys = []         functioncache (key, value) {if(Keys.push (key) >maxLength) {                DeleteCache[keys.shift ()]}returnCache[key] =value; }    returnCache;} varC= Createcache (256);//C ("Key", "value")//value//C ("key")//valueSummary This short, Avalon about DOM processing Ms-, {{...}} The core, in addition to the PARSEEXPR function, there are bindinghandlers objects, and see this code really like JavaScript UI plug-ins, not much passion (of course, the words are hard to write), so do not go through the story. Appendix Test Demo<! DOCTYPE html>Uppercase}} <input type= ' text ' ms-duplex= ' name '/> <button ms-click= ' click ' >button</button> <a Ms-href= ' Http://abc/{{name}} ' >test parseexprproxy</a> </div> <script>Avalon.define ("Nihao",function(VM) {Vm.name= ' Nihao 'Vm.cla=trueVm.click=function() {Console.log ("Click!"); return                }            })        </script> </body>
avalonjs-source Reading (ii)