JavaScript模板引擎应用场景及实现原理详解

<  id=\"test\" type=\"text/html\">
 {{if isAdmin}}
 <h1>{{ }}</h1>
 <ul>
   {{each user as name i}}
     <li> {{i + 1}} ：{{name}}</li>
   {{/each}}
 </ul>
 {{/if}}
</ >
//textarea或input则取value，其它情况取innerHTML

//textarea或input则取value，其它情况取innerHTML
var html = /^(textarea|input)$/i.test(element.nodeName) ? element.value : element.innerHTML;

defaults.parser = function (code, options) {
  // var match = code.match(/([\\w\\$]*)(\\b.*)/);
  // var key = match[1];
  // var args = match[2];
  // var split = args.split(\' \');
  // split.shift();
  //if isAdmin
  code = code.replace(/^\\s/, \'\');
  //[\"if\", \"isAdmin\"]
  var split = code.split(\' \');
  //if
  var key = split.shift();
  //isAdmin
  var args = split.join(\' \');
  switch (key) {
    case \'if\':
      //if(isAdmin){
      code = \'if(\' + args + \'){\';
      break;
    case \'else\':
      if (split.shift() === \'if\') {
        split = \' if(\' + split.join(\' \') + \')\';
      } else {
        split = \'\';
      }
      code = \'}else\' + split + \'{\';
      break;
    case \'/if\':
      code = \'}\';
      break;
    case \'each\':
      var   = split[0] || \'$data\';
      var as   = split[1] || \'as\';
      var value = split[2] || \'$value\';
      var index = split[3] || \'$index\';
      var param  = value + \',\' + index;
      if (as !== \'as\') {
          = \'[]\';
      }
      code = \'$each(\' +   + \',function(\' + param + \'){\';
      break;
    case \'/each\':
      code = \'});\';
      break;
    case \'echo\':
      code = \'print(\' + args + \');\';
      break;
    case \'print\':
    case \'include\':
      code = key + \'(\' + split.join(\',\') + \');\';
      break;

function compiler (source, options) {
  /*
  openTag: \'<%\',  // 逻辑语法开始标签
  closeTag: \'%>\',  // 逻辑语法结束标签
  escape: true,   // 是否编码输出变量的 HTML 字符
  cache: true,   // 是否开启缓存（依赖 options 的 filename 字段）
  compress: false, // 是否压缩输出
  parser: null   // 自定义语法格式器 @see: template-syntax.js
  */
  var debug = options.debug;
  var openTag = options.openTag;
  var closeTag = options.closeTag;
  var parser = options.parser;
  var compress = options.compress;
  var escape = options.escape;
  var line = 1;
  var uniq = {$data:1,$filename:1,$utils:1,$helpers:1,$out:1,$line:1};
  //isNewEngin在6-8返回undefined
  var isNewEngine = \'\'.trim;// \'__proto__\' in {}
  var replaces = isNewEngine
  ? [\"$out=\'\';\", \"$out+=\", \";\", \"$out\"]
  : [\"$out=[];\", \"$out.push(\", \");\", \"$out.join(\'\')\"];
  var concat = isNewEngine
    ? \"$out+=text;return $out;\"
    : \"$out.push(text);\";
  var print = \"function(){\"
  +   \"var text=\'\'.concat.apply(\'\',arguments);\"
  +    concat
  + \"}\";
  var include = \"function(filename,data){\"
  +   \"data=data||$data;\"
  +   \"var text=$utils.$include(filename,data,$filename);\"
  +    concat
  +  \"}\";
  var headerCode = \"\'use strict\';\"
  + \"var $utils=this,$helpers=$utils.$helpers,\"
  + (debug ? \"$line=0,\" : \"\");
  var mainCode = replaces[0];
  var footerCode = \"return new String(\" + replaces[3] + \");\"
  // html与逻辑语法分离
  forEach(source.split(openTag), function (code) {
    code = code.split(closeTag);
    var $0 = code[0];
    var $1 = code[1];
    // code: [html]
    if (code.length === 1) {
      mainCode += html($0);
    // code: [logic, html]
    } else {
      mainCode += logic($0);
      if ($1) {
        mainCode += html($1);
      }
    }
  });
  var code = headerCode + mainCode + footerCode;

\'use strict\';
var $utils  = this,
 $helpers = $utils.$helpers,
 isAdmin = $data.isAdmin,
 $escape = $utils.$escape,
    = $data. ,
 $each  = $utils.$each,
 user   = $data.user,
 name   = $data.name,
 i    = $data.i,
 $out   = \'\';
if (isAdmin) {
 $out += \'\\n\\n <h1>\';
 $out += $escape( );
 $out += \'</h1>\\n <ul>\\n   \';
 $each(user, function(name, i) {
 $out += \'\\n     <li>\';
 $out += $escape(i + 1);
 $out += \' ：\';
 $out += $escape(name);
 $out += \'</li>\\n   \';
 });
 $out += \'\\n </ul>\\n\\n \';
}
return new String($out);

var Render = new Function(\"$data\", \"$filename\", code);
/*Outputs:
function anonymous($data, $filename) {
 \'use strict\';
 var $utils  = this,
 $helpers = $utils.$helpers,
 isAdmin = $data.isAdmin,
 $escape = $utils.$escape,
    = $data. ,
 $each  = $utils.$each,
 user   = $data.user,
 name   = $data.name,
 i    = $data.i,
 $out   = \'\';
 if (isAdmin) {
 $out += \'\\n\\n <h1>\';
 $out += $escape( );
 $out += \'</h1>\\n <ul>\\n   \';
 $each(user, function(name, i) {
  $out += \'\\n     <li>\';
  $out += $escape(i + 1);
  $out += \' ：\';
  $out += $escape(name);
  $out += \'</li>\\n   \';
 });
 $out += \'\\n </ul>\\n\\n \';
 }
 return new String($out);
}
 */
console.log(Render);

/*Outputs:
<h1>User lists</h1>
<ul>
  <li>1 ：zuojj</li>
  <li>2 ：Benjamin</li>
  <li>3 ：John</li>
  <li>4 ：Rubby</li>
  <li>5 ：Handy</li>
  <li>6 ：CIMI</li>
</ul>
*/
console.log(new Render(data, filename) + \'\');
//对象转换为字符串
return new Render(data, filename) + \'\';