How to use javascript to write template engine code ideas and detailed examples

AbsurdJS itself is mainly released as a module for NodeJS, but it also releases a client version. With this in mind, I can't directly use existing engines because most of them run on NodeJS and cannot run on the browser.

The initial idea is like this:

var TemplateEngine = function(tpl, data) {
  // magic here ...
}
var template = &#39;<p>Hello, my name is <%name%>. I\&#39;m <%age%> years old.</p>&#39;;
console.log(TemplateEngine(template, {
  name: "Krasimir",
  age: 29
}));

A simple function, the input is our template and data object, You can probably easily think of the output, like this:

<p>Hello, my name is Krasimir. I&#39;m 29 years old.</p>

The first step is to find the template parameters inside, and then replace them with the specific data passed to the engine. I decided to use regular expressions to accomplish this step. But I'm not the best at this, so feel free to comment if your writing isn't good.

var re = /<%([^%>]+)?%>/g;

This regular expression will capture all fragments starting with 0b02ea0d1a94320a990e3fd52024b671. The parameter g (global) at the end means that not only one is matched, but all matching fragments are matched. There are many ways to use regular expressions in Javascript. What we need is to output an array containing all strings based on the regular expression. This is exactly what exec does.

var re = /<%([^%>]+)?%>/g;
var match = re.exec(tpl);

If we use console.log to print out the variable match, we will see:

[
  "<%name%>",
  " name ", 
  index: 21,
  input: 
  "<p>Hello, my name is <%name%>. I\&#39;m <%age%> years old.</p>"
]

But we As you can see, the returned array only contains the first match. We need to wrap the above logic with a while loop so that we can get all matches.

##

var re = /<%([^%>]+)?%>/g;
while(match = re.exec(tpl)) {
  console.log(match);
}

If you run the above code, you will see that db185f51abe1d02301f57d0c9e8c9eb5 and 5775174bcf4feadc65f033b84eb1e107 are both printed.

Now comes the interesting part. After identifying the matches in the template, we need to replace them with the actual data passed to the function. The simplest way is to use the replace function. We could write it like this:

var TemplateEngine = function(tpl, data) {
  var re = /<%([^%>]+)?%>/g;
  while(match = re.exec(tpl)) {
    tpl = tpl.replace(match[0], data[match[1]])
  }
  return tpl;
}

Okay, so it runs, but it's not good enough. Here we use a simple object to pass data in the form of data["property"], but in actual situations we are likely to need more complex nested objects. So we slightly modified the data object:

{
  name: "Krasimir Tsonev",
  profile: { age: 29 }
}

However, if we write it directly like this, it still won’t run, because if 913f7752eb512a3f068e4113f2294efd is used in the template , the code will be replaced by data['profile.age'], and the result is undefined. In this way we cannot simply use the replace function, but must use other methods. It would be best if you could use Javascript code directly between 1c57a0bf76ccc0c84c2b546a40c0f101, so that the incoming data can be evaluated directly, like the following:

var template = &#39;<p>Hello, my name is <%this.name%>. I\&#39;m <%this.profile.age%> years old.</p>&#39;;

You may be curious, this How is it achieved? Here John uses the new Function syntax to create a function based on a string. Let's take a look at an example:

var fn = new Function("arg", "console.log(arg + 1);");
fn(2); // outputs 3

fn is a genuine function. It accepts one parameter, and the function body is console.log(arg + 1);. The above code is equivalent to the following code:

var fn = function(arg) {
  console.log(arg + 1);
}
fn(2); // outputs 3

With this method, we can construct a function from a string, including its parameters and function body. Isn’t this exactly what we want! But don't worry, before constructing the function, let's take a look at what the function body looks like. According to the previous idea, the final return of this template engine should be a compiled template. Still using the previous template string as an example, the returned content should be similar to:

return
"<p>Hello, my name is " + 
this.name + 
". I\&#39;m " + 
this.profile.age + 
" years old.</p>";

Of course, in the actual template engine, we will split the template into Small paragraphs of text and meaningful Javascript code. Earlier you may have seen me using simple string concatenation to achieve the desired effect, but this is not 100% in line with our requirements. Since the user is likely to pass more complex Javascript code, we need another loop here, as follows:

var template = 
'My skills:' + 
&#39;<%for(var index in this.skills) {%>&#39; + 
&#39;<a href=""><%this.skills[index]%></a>&#39; +
&#39;<%}%>&#39;;

If string concatenation is used, the code It should look like the following:

return
'My skills:' + 
for(var index in this.skills) { +
&#39;<a href="">&#39; + 
this.skills[index] +
&#39;</a>&#39; +
}

Of course, this code cannot be run directly, otherwise an error will occur. So I used the logic written in John's article, put all the strings in an array, and spliced ​​them together at the end of the program.

var r = [];
r.push('My skills:'); 
for(var index in this.skills) {
r.push(&#39;<a href="">&#39;);
r.push(this.skills[index]);
r.push(&#39;</a>&#39;);
}
return r.join(&#39;&#39;);

The next step is to collect different lines of code in the template to generate functions. Through the method introduced earlier, we can know which placeholders (Translator's Note: or regular expression matches) are in the template and their positions. Therefore, relying on an auxiliary variable (cursor, cursor), we can get the desired results.

var TemplateEngine = function(tpl, data) {
  var re = /<%([^%>]+)?%>/g,
    code = 'var r=[];\n',
    cursor = 0;
  var add = function(line) {
    code += 'r.push("' + line.replace(/"/g, '\\"') + '");\n';
  }
  while(match = re.exec(tpl)) {
    add(tpl.slice(cursor, match.index));
    add(match[1]);
    cursor = match.index + match[0].length;
  }
  add(tpl.substr(cursor, tpl.length - cursor));
  code += 'return r.join("");'; // <-- return the result
  console.log(code);
  return tpl;
}
var template = &#39;<p>Hello, my name is <%this.name%>. I\&#39;m <%this.profile.age%> years old.</p>&#39;;
console.log(TemplateEngine(template, {
  name: "Krasimir Tsonev",
  profile: { age: 29 }
}));

　　上述代码中的变量code保存了函数体。开头的部分定义了一个数组。游标cursor告诉我们当前解析到了模板中的哪个位置。我们需要依靠它来遍历整个模板字符串。此外还有个函数add，它负责把解析出来的代码行添加到变量code中去。有一个地方需要特别注意，那就是需要把code包含的双引号字符进行转义（escape）。否则生成的函数代码会出错。如果我们运行上面的代码，我们会在控制台里面看见如下的内容：

var r=[];
r.push("<p>Hello, my name is ");
r.push("this.name");
r.push(". I&#39;m ");
r.push("this.profile.age");
return r.join("");

　　等等，貌似不太对啊，this.name和this.profile.age不应该有引号啊，再来改改。

var add = function(line, js) {
  js? code += 'r.push(' + line + ');\n' :
    code += 'r.push("' + line.replace(/"/g, '\\"') + '");\n';
}
while(match = re.exec(tpl)) {
  add(tpl.slice(cursor, match.index));
  add(match[1], true); // <-- say that this is actually valid js
  cursor = match.index + match[0].length;
}

　　占位符的内容和一个布尔值一起作为参数传给add函数，用作区分。这样就能生成我们想要的函数体了。

var r=[];
r.push("<p>Hello, my name is ");
r.push(this.name);
r.push(". I&#39;m ");
r.push(this.profile.age);
return r.join("");

　　剩下来要做的就是创建函数并且执行它。因此，在模板引擎的最后，把原本返回模板字符串的语句替换成如下的内容：

return new Function(code.replace(/[\r\t\n]/g, '')).apply(data);

　　我们甚至不需要显式地传参数给这个函数。我们使用apply方法来调用它。它会自动设定函数执行的上下文。这就是为什么我们能在函数里面使用this.name。这里this指向data对象。

　　模板引擎接近完成了，不过还有一点，我们需要支持更多复杂的语句，比如条件判断和循环。我们接着上面的例子继续写。

var template = 
'My skills:' + 
&#39;<%for(var index in this.skills) {%>&#39; + 
&#39;<a href="#"><%this.skills[index]%></a>&#39; +
&#39;<%}%>&#39;;
console.log(TemplateEngine(template, {
  skills: ["js", "html", "css"]
}));

　　这里会产生一个异常，Uncaught SyntaxError: Unexpected token for。如果我们调试一下，把code变量打印出来，我们就能发现问题所在。

var r=[];
r.push("My skills:");
r.push(for(var index in this.skills) {);
r.push("<a href=\"\">");
r.push(this.skills[index]);
r.push("</a>");
r.push(});
r.push("");
return r.join("");

　　带有for循环的那一行不应该被直接放到数组里面，而是应该作为脚本的一部分直接运行。所以我们在把内容添加到code变量之前还要多做一个判断。

var re = /<%([^%>]+)?%>/g,
  reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g,
  code = &#39;var r=[];\n&#39;,
  cursor = 0;
var add = function(line, js) {
  js? code += line.match(reExp) ? line + &#39;\n&#39; : &#39;r.push(&#39; + line + &#39;);\n&#39; :
    code += &#39;r.push("&#39; + line.replace(/"/g, &#39;\\"&#39;) + &#39;");\n&#39;;
}

　　这里我们新增加了一个正则表达式。它会判断代码中是否包含if、for、else等等关键字。如果有的话就直接添加到脚本代码中去，否则就添加到数组中去。运行结果如下：

var r=[];
r.push("My skills:");
for(var index in this.skills) {
r.push("<a href=\"#\">");
r.push(this.skills[index]);
r.push("</a>");
}
r.push("");
return r.join("");

　　当然，编译出来的结果也是对的。

My skills:<a href="#">js</a><a href="#">html</a><a href="#">css</a>

　　最后一个改进可以使我们的模板引擎更为强大。我们可以直接在模板中使用复杂逻辑，例如：

var template = 
'My skills:' + 
&#39;<%if(this.showSkills) {%>&#39; +
  &#39;<%for(var index in this.skills) {%>&#39; + 
  &#39;<a href="#"><%this.skills[index]%></a>&#39; +
  &#39;<%}%>&#39; +
&#39;<%} else {%>&#39; +
  &#39;<p>none</p>&#39; +
&#39;<%}%>&#39;;
console.log(TemplateEngine(template, {
  skills: ["js", "html", "css"],
  showSkills: true
}));

　　除了上面说的改进，我还对代码本身做了些优化，最终版本如下：

var TemplateEngine = function(html, options) {
  var re = /<%([^%>]+)?%>/g, reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g, code = &#39;var r=[];\n&#39;, cursor = 0;
  var add = function(line, js) {
    js? (code += line.match(reExp) ? line + &#39;\n&#39; : &#39;r.push(&#39; + line + &#39;);\n&#39;) :
      (code += line != &#39;&#39; ? &#39;r.push("&#39; + line.replace(/"/g, &#39;\\"&#39;) + &#39;");\n&#39; : &#39;&#39;);
    return add;
  }
  while(match = re.exec(html)) {
    add(html.slice(cursor, match.index))(match[1], true);
    cursor = match.index + match[0].length;
  }
  add(html.substr(cursor, html.length - cursor));
  code += &#39;return r.join("");&#39;;
  return new Function(code.replace(/[\r\t\n]/g, &#39;&#39;)).apply(options);
}

The above is the detailed content of How to use javascript to write template engine code ideas and detailed examples. For more information, please follow other related articles on the PHP Chinese website!