zoukankan html css js c++ java

javascript 模板系统 ejs v6

此版本有如下改进：

吸取众人的意见，防止与ASP等后台模板的界定符冲突，默认左右界定符为<&，&>

加入新的操作符<&~，至此整个操作符体系为:

<& JS逻辑 &>	<& for(var i=0,tl = @trs.length,tr;i < tl;i++){ &>
<&= JS输出内容 &>	<&= tr.name &>
<&# 这是注释 &>	<&# 导入子模板 &>
<&: CSS选择符 &>	<&: tds_tmpl &>
<&~ URL地址 &>	<&~ /aaa/bbb.html &>

为了迎合大规模开发的需要，后台数据统统增加@标识，一来便于修改，二来内部实现抛弃了with语句，强行让它们依附于data对象，让我们可以使用||设置默认值。

//dom.ejs v6 by 司徒正美
//http://www.cnblogs.com/rubylouvre/archive/2010/10/04/1841933.html
;(function(){
    this.dom = {
        quote : String.quote || function (str) {
            str = str.replace(/[\x00-\x1f\\]/g, function (chr) {
                var special = metaObject[chr];
                return special ? special : '\\u' + ('0000'+chr.charCodeAt(0).toString(16)).slice(-4);
            });
            return '"' + str.replace(/"/g, '\\"') + '"';
        }
    }

    if(!String.prototype.trim){
        String.prototype.trim = function(){
            return this.replace(/^[\s\xa0]+|[\s\xa0]+$/g, '');
        }
    }
    ;(function(w,s){
        //http://blogs.msdn.com/xmlteam/archive/2006/10/23/using-the-right-version-of-msxml-in-internet-explorer.aspx
        s = ["XMLHttpRequest",
        "ActiveXObject('Msxml2.XMLHTTP.6.0')",
        "ActiveXObject('Msxml2.XMLHTTP.3.0')",
        "ActiveXObject('Msxml2.XMLHTTP')",
        "ActiveXObject('Microsoft.XMLHTTP')"];
        //IE专有的JScript方法：ScriptEngine，ScriptEngineBuildVersion，ScriptEngineMajorVersion，ScriptEngineMinorVersion，CollectGarbage，RuntimeObject和GetObject。
        if( !-[1,] && w.ScriptEngineMinorVersion() === 7 && location.protocol === "file:"){
            s.shift();
        }
        for(var i = 0 ,el;el=s[i++];){
            try{
                if(eval("new "+el)){
                    dom.xhr = new Function( "return new "+el);
                    break;
                }
            }catch(e){}
        }
    })(window);

    var 
    metaObject = {
        '\b': '\\b',
        '\t': '\\t',
        '\n': '\\n',
        '\f': '\\f',
        '\r': '\\r',
        '\\': '\\\\'
    },
    _startOfHTML = "\t__views.push(",
    _endOfHTML = ");\n",
    _rAt = /(^|[^\w\u00c0-\uFFFF_])(@)(?=\w)/g,
    _partial = function(url){
        var xhr = dom.xhr();
        xhr.open("GET",url,false);
        xhr.setRequestHeader("If-Modified-Since","0");
        xhr.send(null);
        return xhr.responseText|| ""
    }
    dom.ejs = function(obj,usePart){
        if(!usePart){//如果普通模板，则要整理配置文件
            obj.left = obj.left || "<&";
            obj.right = obj.right || "&>";
            obj.rLeft =  obj.rLeft  || new RegExp("\\s*"+ obj.left+"\\s*");
            obj.rRight = obj.rRight  || new RegExp("\\s*"+ obj.right+"\\s*");
        }
        var key = obj.selector || obj.url,
        rAt = _rAt,
        startOfHTML = _startOfHTML,
        endOfHTML = _endOfHTML,
        partial = _partial,
        self = arguments.callee,
        buff = ["var __views = [];\n"],str,logic;
        if(obj.selector){
            var el = document.getElementById(key);
            if (!el) throw "can not find the target element";
            str = el.text;
        }else {
            str = partial(obj.url);
            if (!str) throw "the target file does not exist";
        }
        if(!self[key]){
            var arr = str.trim().split(obj.rLeft),temp = [],url,selector,i=0,n=arr.length,els,segment;
            while(i<n){
                segment = arr[i++];
                els = segment.split(obj.rRight);
                if(segment.indexOf(obj.right) !== -1){//这里不使用el.length === 2是为了避开IE的split bug
                    switch (els[0].charAt(0)) {
                        case "~"://include局部模板  以URL方式引入
                            delete obj.selector;
                            obj.url = els[0].substring(1).trim();
                            self[url] = self[url] || self(obj,true);
                            temp = temp.concat(self[url] );
                            break;
                        case ":"://include局部模板  以元素选择符方式引入
                            delete obj.url;
                            selector = obj.selector = els[0].substring(1).trim();
                            self[selector] = self[selector] || self(obj,true);
                            temp = temp.concat(self[selector] );
                            break;
                        case "="://处理后台返回的变量（输出到页面的);
                            logic = els[0].substring(1);
                            if(logic.indexOf("@")!==-1){
                                temp.push(startOfHTML, logic.replace(rAt,"$1data."), endOfHTML);
                            }else{
                                temp.push(startOfHTML, logic, endOfHTML);
                            }
                            break;
                        case "#"://处理注释
                            break;
                        default://处理逻辑
                            logic = els[0];           
                            if(logic.indexOf("@")!==-1){
                                temp.push(logic.replace(rAt,"$1data."), "\n");
                            }else{
                                temp.push(logic, "\n");
                            }
                    }
                    //处理静态HTML片断
                    els[1] &&  temp.push(startOfHTML, dom.quote.call(null,els[1]), endOfHTML)
                }else{
                    //处理静态HTML片断
                    temp.push(startOfHTML, dom.quote.call(null,els[0]), endOfHTML)
                }
            }
            if(usePart){//局部模板
                return  (self[key] = temp);
            }else{          
                self[key] = new Function("data",buff.concat(temp).join("")+';return __views.join("");');
            }
        }
        return  self[key](obj.data || {});
    }
})();

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta content="IE=8" http-equiv="X-UA-Compatible"/>
    <title>javascript 模板系统 ejs v6 by 司徒正美</title>
    <style type="text/css">
      table {
        border:1px solid #a9ea00;
        border-collapse:collapse;
        80%;
      }
      td{
        border:1px solid #a9ea00;
        padding:0;
        text-align:center;
      }
    </style>
    <script>
      ;(function(){
        this.dom = {
          quote : String.quote || function (str) {
            str = str.replace(/[\x00-\x1f\\]/g, function (chr) {
              var special = metaObject[chr];
              return special ? special : '\\u' + ('0000'+chr.charCodeAt(0).toString(16)).slice(-4);
            });
            return '"' + str.replace(/"/g, '\\"') + '"';
          }
        }

if(!String.prototype.trim){
          String.prototype.trim = function(){
            return this.replace(/^[\s\xa0]+|[\s\xa0]+$/g, '');
          }
        }
        ;(function(w,s){
          //http://blogs.msdn.com/xmlteam/archive/2006/10/23/using-the-right-version-of-msxml-in-internet-explorer.aspx
          s = ["XMLHttpRequest",
            "ActiveXObject('Msxml2.XMLHTTP.6.0')",
            "ActiveXObject('Msxml2.XMLHTTP.3.0')",
            "ActiveXObject('Msxml2.XMLHTTP')",
            "ActiveXObject('Microsoft.XMLHTTP')"];
          //IE专有的JScript方法：ScriptEngine，ScriptEngineBuildVersion，ScriptEngineMajorVersion，ScriptEngineMinorVersion，CollectGarbage，RuntimeObject和GetObject。
          if( !-[1,] && w.ScriptEngineMinorVersion() === 7 && location.protocol === "file:"){
            s.shift();
          }
          for(var i = 0 ,el;el=s[i++];){
            try{
              if(eval("new "+el)){
                dom.xhr = new Function( "return new "+el);
                break;
              }
            }catch(e){}
          }
        })(window);

//var a=[1,2];for(var i in a)alert(delete a[i+1]);
    </script>
    <script>
      window.onload = function(){
        var trs = [
          {name:"隐形杀手",age:29,sex:"男"},
          {name:"索拉",age:22,sex:"男"},
          {name:"fesyo",age:23,sex:"女"},
          {name:"恋妖壶",age:18,sex:"男"},
          {name:"竜崎",age:25,sex:"男"},
          {name:"你不懂的",age:30,sex:"女"}
        ]

var tmpl = dom.ejs({
          selector:"table_tmpl",//指定主模板
          data:{trs:trs,href:"http://images.cnblogs.com/cnblogs_com/rubylouvre/202906/o_type4.jpg"}//数据源
        });
        document.getElementById("table_tc").innerHTML = tmpl;
      };

</script>
  </head>
  <body>
    <h2>dom.ejs v6 by 司徒正美</h2>
    <script type="tmpl" id="table_tmpl">
        <table>
        <& for(var i=0,tl = @trs.length,tr;i<tl;i++){ &>
          <& tr = @trs[i]; &>
          <tr>
          <td><&= tr.name &></td> <td><&= tr.age &></td> <td><&= tr.sex || "男" &></td>
          <&# 导入子模板 &>
          <&: tds_tmpl &>
          </tr>
          <& } &>
        </table>
    <&# 怎么可能不支持图片 &>
    <img src="<&= @href &>">
    </script>
    <script type="tmpl" id="tds_tmpl">
        <td>静态的表格</d> <td>静态的表格</d> <td>静态的表格</d>
    </script>
    <div id="table_tc">

</div>
  </body>
</html>

重申一次，并不是前台模板系统无能，只是你我做的项目不同，访问量大小决定着代码需要用另一种截然不同的方式实现。我想到一个例子，就是腾讯的QQ群，里面80%的内容都是JS模板。

查看全文

相关阅读:
js中let和var定义变量的区别
 windows下开发PHP扩展dll（无需Cygwin）
用VS开发PHP扩展
 破解电信光猫华为HG8120C关闭路由功能方法
 从程序员到项目经理（二十九）：怎样写文档
 从程序员到项目经理（二十八）：该死的结果导向（只看结果，不问过程到底行不行？）
从程序员到项目经理（二十七）：怎样给领导汇报工作
 从程序员到项目经理（二十六）：项目管理不能浑水摸鱼
 从程序员到项目经理（二十五）：对绩效考核的吐槽
 从程序员到项目经理（二十四）：慎于问敏于行

原文地址：https://www.cnblogs.com/rubylouvre/p/1841933.html