js模版引擎—nodetpl

这个是公司内部使用的一个模版引擎，主要应用在pc。

根据模版，返回一个js文件。大概是这个样子的js。

(function(N, undefined){
  var PATH = 'http://core.pc.lietou-static.com/tpls/common/plugins/localdata/city.js';
  if(!N || !N._tpls) return false;
N._tpls[PATH] = N._tpls[PATH] ||{......};
})(window.NodeTpl);

其实也就是传入了全局的NodeTpl变量。而且给path赋值了。path赋值是模版引擎作的事情。

若是NodeTpl中的模版缓存中已经有了这个路径了，那就直接取得，否则就须要再定义个对象出来。这个对象要包含整个模版文件中的不一样模版对象。每一个都是个方法。

一般是经过main主模版方法，在里面可能会用到子模版的方法。。。

传给这些方法的有$data数据， 和guid（模版的id)。这里目前有个疑惑。。。

这个对象中有个template方法，在pc端根据不一样浏览器肯定是数组拼接仍是字符串拼接，m端和之后就不须要这个了，直接字符串拼接就好。由于浏览器js引擎对字符串拼接作了优化，字符串更快。

这里除了guid，还用了dguid，是数据的id。

而后开始了css代码的处理，其实就是每一个前面都加上了模版对应都guid，对js也进行了封装炒做，（怎么感受作了不少不是模版引擎应该干的事情呢）

js添加的代码以下：

'(function(window, document, undefined){\n');
    template.push('  var $ROOT = $("#'+ guid +'");\n');
    template.push('  var $TPLS = NodeTpl._tpls["'+ PATH +'"];\n');
    template.push('  var $DATA = NodeTpl._data["'+ dguid +'"];\n');

进行了封装，而且定义了三个变量，这三个变量用来做区分。

这个还有个require方法，能够用来得到子模版的内容。解析require以后的代码以下：

container.html($TPLS[\'view-hwgat\']($DATA, "'+ guid +'"));\n');

目前为止，这个模版引擎实现的功能以下：

1 解析出模版自己

2 对css进行加id处理

3 对js封装处理

4 要能够经过require方法引入子模版，m端跟其余插件方法冲突，应该会修改为其余名字。好比include

至此，模版要作的事情就明确了。

 

下面再看看模版引擎是怎么实现的。

从入口开始看起：

window[moduleName].render = function (html, data, callback) {

    var path = this.rguid(),
    that = this,
　　 cache = that._tpls;

if (typeof data === 'function') {
      callback = data, data = {};
    }
    (new Function(renderTools.templete(path, renderTools.precompile(html))))();
    typeof callback === 'function' && typeof cache[path] === 'object' && typeof cache[path].main === 'function' && callback.call(that, cache[path].main(data));
    return that;
  };

先看底下，若是有callback，以及模版缓存会给你一个对象，而且这个对象的main方法是个函数，其实咱们解析出来正确的结果就是这个样子的。就调用来callback方法，传递给nodetpl对象，以及模版main方法渲染后的片断

再看如何生成对应的模版缓存对象。经过new Function方法。具体再看里面的renderTools.templete方法。

这个方法干什么用的，代码以下：

templete: function (path, tpl) {
        var html = "",
          tpls = [];
        
    ..........
        html += "(function(N, undefined){\n";
        html += "  var PATH = '" + path + "';\n";
        html += "  if(!N || !N._tpls) return false;\n";
        html += "  N._tpls[PATH] = N._tpls[PATH] ||\n{\n";
        html += tpls.join(',\n');
        html += '\n};';
        html += "\n})(window.NodeTpl);";
        return html;
      }

传给它的是咱们的模版引擎renderid，以及对应的模版内容，里面可能有多个子模版。 而后分别进行解析，这里解析主要是生成方法，文件中的css，js，html处理都在precompile中完成了。最终返回的就是咱们的js文件。

这个path最终怎么成路径，目前还没看出来。

这个tpl传进去的就已是预编译以后的来，调用来precompile方法，里面又用到compile方法。主要就是对css，js， html都作来处理，算是主要内容。这个主要内容大致就是正则替换

艾马，这么一边写边分析，果真比直接看代码容易理解多了