详解nodejs模板引擎制作

string = "hello {}".format("郭璞") # hello 郭璞
string = "hello {username}".format(username="郭璞") # hello 郭璞

function create_function(){
  var func_body = "var time = new Date(); console.log('创建时间：'+time);";
  var func = new Function('', func_body);
  func();
}
create_function();

E:\Code\Nodejs\learn\my-work\string>node one.js
创建时间：Tue Jun 13 2017 15:40:15 GMT+0800 (中国标准时间)

E:\Code\Nodejs\learn\my-work\string>

function create_function_with_parameters() {
  var param1 = "郭璞";
  var param2 = "辽宁大连";
  var func_body = "console.log('Hello '+param1+', welcome to '+param2+'!' );";
  var func = new Function('param1', 'param2', func_body);
  func(param1, param2);
}
create_function_with_parameters();

E:\Code\Nodejs\learn\my-work\string>node one.js
Hello 郭璞, welcome to 辽宁大连!

E:\Code\Nodejs\learn\my-work\string>

var pattern1 = /{{([\s\S]+"htmlcode">

function test1(){
  var tpl = "Hello {{visitorname}}, Welcome to {{worldname}}!";
  var data = {
    visitorname: "游客",
    worldname: "冰雹工作室"
  };
  var pattern = /{{([\s\S]+"渲染后的数据为：\n", result);
}




实现结果：


E:\Code\Nodejs\learn\my-work\string>node one.js
渲染后的数据为：
 Hello 游客, Welcome to 冰雹工作室!

E:\Code\Nodejs\learn\my-work\string>




对象形式


function test2(){
  var tpl = "I'm {{user.name}}, and I come from {{user.address}}";
  var user = {name: "郭璞", address: "辽宁大连"};
  console.log(user.name);
  var pattern = /{{([\s\S]+"htmlcode">

E:\Code\Nodejs\learn\my-work\string>node one.js
郭璞
I'm 郭璞, and I come from 辽宁大连

E:\Code\Nodejs\learn\my-work\string>



混杂多参数实现
刚才实现了只有关键字的和有对象性质的参数的例子，但是实际中情况可能比这要复杂的多，比如混杂模式。接下来着手实现一下混杂模式下的替换策略。


function test3(){
  var tpl = "I am {} of {} years old, and I come from {user.address}.";
  var name = '郭璞';
  var index = 0;
  var paramindex = 0;
  // var parameters = [{name: '郭璞'}, {'age': 22}, {address: '辽宁大连'}];
  var parameters = ['郭璞', 22, {user: {address: '辽宁大连'}}];
  console.log(parameters[2]);
  var result = tpl.replace(/{([\s\S])*"htmlcode">

E:\Code\Nodejs\learn\my-work\string>node one.js
{ user: { address: '辽宁大连' } }
match: {}
tuple: undefined
match: {}
tuple: undefined
match: {user.address}
tuple: s
******* s
I am 郭璞 of 22 years old, and I come from 辽宁大连.

E:\Code\Nodejs\learn\my-work\string>



关于正则这块，大致的内容就是这样了。如果要想更简单的调用，只需要封装起来，用外部参数代替就好了。
当然，注意变量名的命名风格。


实战
废话连篇说了两个小节，还没到正式的模板制作。下面就整合一下刚才例子。模拟着实现一下好了。
(!完整)代码
来个不完整的代码，示意一下算了。


/**
 * 通过正则表达式和Function语法创建一个简单的模板引擎。
 */

const pattern = /{{([\s\S]+"";';
  func_body += 'parsedstr+="';
  // 设置一个定位器，每次更新偏移量，进行全文替换工作
  var index = 0;
  // 开始正则匹配，根据捕获到的元组进行剖析
  text.replace(pattern, function (matchedtext, interpolate, evaluate, offset) {
    // 匹配到正常的HTML文本，则直接添加到func_body中即可
    func_body += text.slice(index, offset);

    // 如果是evaluate类型的文本，则作为代码进行拼接
    if (evaluate) {
      func_body += '";' + evaluate + 'parsedstr+="';
    }

    // 匹配到interpolate类型的文本，则作为变量值进行替换
    if (interpolate) {
      func_body += '"+' + interpolate + '+"';
    }

    // 更新偏移量index，让程序向后移动
    index = offset + matchedtext.length;
    // 貌似返回值没什么用吧
    return matchedtext;
  });

  // 完成函数体的构建之后就可以调用Function的语法实现渲染函数的构建了
  func_body += '"; return parsedstr;';

  return new Function('obj', 'name', func_body)(params, name);
}

function test() {
  var obj = [
    { text: '张三' },
    { text: '李四' },
    { text: '王五' },
    { text: '赵六' },
    { text: '韩七' },
    { text: '王八' }
  ];
  var name = '郭璞';


  var fs = require('fs');
  // var rawtext = fs.readFileSync('index.html').toString('utf8');
  var rawtext = '<ul>{%for(var i in obj){%}<li>{{ obj[i].text }}</li><br>{%}%}</ul>';
  console.log("源文件：", rawtext);
  var result = template(rawtext, obj);
  console.log("渲染后文件：", result, name);
  fs.writeFileSync('rendered.html', result);
  console.log('渲染完毕，请查看rendered.html文件')
}

test();




同级目录下生成的文件内容为：


<ul>
  <li>张三</li><br>
  <li>李四</li><br>
  <li>王五</li><br>
  <li>赵六</li><br>
  <li>韩七</li><br>
  <li>王八</li><br></ul>


感觉效果还行，但是这里面参数太固定化了，实际封装的时候还需要酌情指定，不然这东西也就没什么卵用。
总结
要是论实用性价值的话，这个不成熟的模板实现思路毫无价值。但是对于我而言，用来格式化字符串倒是个不错的选择，估计我会把这个小思路封装成一个小小的模块，详情https://github.com/guoruibiao/have-fun-in-node
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

            
            上一篇：Vue2.0 从零开始_环境搭建操作步骤

            下一篇：jQuery.form.js的使用详解