zoukankan      html  css  js  c++  java
  • [自制模板引擎]添加指令

    模板引擎最大的一个特点就是其指令系统,通过执行一些简单的表达式,可以让这个模板引擎拥有计算功能,但是拥有指令,能让模板引擎拥有更强大的功能,下面来试着实现一些简单的指令,如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地址:git@github.com:taixw2/temptale.git

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

  • 相关阅读:
    window.parent 、window.top及window.self 详解
    js中的变量提升和函数提升
    IE不支持ES6语法的解决方案——Babel
    JavaScript 文件拖拽上传插件 dropzone.js 介绍
    C# DataTable 增加行与列
    group by 与 order by 一起使用的时候
    window.open传递多个参数
    Jquery EasyUI tree 的异步加载(遍历指定文件夹,根据文件夹内的文件生成tree)
    ASP.NET中调用百度地图API
    C# 读取Excel中的数据到DataTable中
  • 原文地址:https://www.cnblogs.com/Amy-so/p/5636424.html
Copyright © 2011-2022 走看看