[自制模板引擎]添加指令

Posted 2020-08-02

模板引擎最大的一个特点就是其指令系统，通过执行一些简单的表达式，可以让这个模板引擎拥有计算功能，但是拥有指令，能让模板引擎拥有更强大的功能,下面来试着实现一些简单的指令，如for,if等等

扩展前面的一段遍历节点的代码，我需要在遍历节点的时候把这些内置的指令做特殊的处理，假设指令是向这样存在的 <div cc-for="arr"></div> ：

    function eachNode(ele,obj) {
        //看看自身属性是否有需要转换属性
        var attrs = ele.attributes;
        var childNodes = ele.childNodes;
        forEach(attrs,function(attr,index){
            if (perFix.exec(attr.nodeName)) {
                //存在转换的属性,是否需要求值
                setTimeout(function(){
                    //把属性处理器提出执行列队
                    //避免在执行过程中污染原来的dom结构
                    attrHandle(attr.nodeName.substr(3),ele,attr.value);
                },0)
            }
        });

        if (ele.getAttribute("cc-each")) {
            return;
        }
        return ele;
    }

View Code

不管以怎样的形式存在，重要的是找到它们然后对它们作出响应的处理，所以创建一个处理它们的函数。

    function attrHandle(type,node,value){
        var newObj = buildExpression(value,originObj);
        switch (type) {
            case "each" :
                //创建一个文档碎片
                var fragment = document.createDocumentFragment();
                var i = 0;
                var l;
                var newNode;
                node.removeAttribute("cc-each");
                //判断是数组还是对象
                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 (var k in newObj) {
                        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;

        }

    }    

最后送上github地址：[email protected]:taixw2/temptale.git

本系列就草草结束，我发现比写代码更累的是管理好博客。