[self-made template engine] add directive

One of the most important features of the template engine is its instruction system, which allows the template engine to have computational functions by executing some simple expressions, but with instructions that allow the template engine to have more powerful functions, try to implement some simple instructions, such as for,if, etc.

Extending the previous section of the code that iterates over the nodes, I need to do special processing of these built-in instructions as I traverse the nodes, assuming that the instructions are to the presence of the <Div cc-for= "Arr" ></div> :

    functionEachnode (ele,obj) {//See if a property needs to be converted to its own properties        varAttrs =ele.attributes; varChildNodes =Ele.childnodes; ForEach (Attrs,function(attr,index) {if(Perfix.exec (attr.nodename)) {//there is a property for the transformation, whether it needs to be evaluatedSetTimeout (function(){                    //Put the property handler in the execution queue                    //avoid contaminating the original DOM structure during executionAttrhandle (ATTR.NODENAME.SUBSTR (3), ele,attr.value); },0)            }        }); if(Ele.getattribute ("Cc-each")) {            return; }        returnEle; }

View Code

Regardless of the form, it is important to find them and respond to them, so create a function that handles them.

    functionAttrhandle (type,node,value) {varNEWOBJ =buildexpression (value,originobj); Switch(type) { Case"Each" :                //Create a document fragment                varFragment =document.createdocumentfragment (); vari = 0; varl; varNewNode; Node.removeattribute ("Cc-each"); //determine whether an array or an object                if(Object.prototype.toString.call (NEWOBJ) = = = "[Object Array]"){                     for(L = newobj.length;i<l;i++) {NewNode= Node.clonenode (true);                    Fragment.appendchild (Eachnode (newnode,newobj[i));                } node.parentNode.replaceChild (Fragment,node); }Else{                     for(varKinchNEWOBJ) {NewNode= Node.clonenode (true);                    Fragment.appendchild (Eachnode (newnode,newobj[k));                } node.parentNode.replaceChild (Fragment,node); }                 Break;  Case"Click": Node.addeventlistener ("Click", NEWOBJ,false);  Break;  Case"If" :                if(NEWOBJ) {Node.style.display= "Block"; }Else{Node.style.display= "None"; }                 Break; }    }    

Last to GitHub address:[email protected]: Taixw2/temptale.git

This series ended hastily, and I found it more tiring to manage a blog than to write code.

[self-made template engine] add directive