Bringen Sie Ihnen bei, wie Sie mithilfe von Javascript_Javascript-Kenntnissen einfach eine Seitenvorlagen-Engine schreiben-js-Tutorial-php.cn

Also habe ich darüber nachgedacht, ob ich einfachen Code schreiben könnte, um diese Template-Engine zu verbessern und mit anderer bestehender Logik zusammenzuarbeiten. AbsurdJS selbst wird hauptsächlich als Modul für NodeJS veröffentlicht, es gibt jedoch auch eine Client-Version. Vor diesem Hintergrund kann ich bestehende Engines nicht direkt verwenden, da die meisten davon auf NodeJS laufen und nicht im Browser laufen können. Was ich brauche, ist etwas Kleines, rein in Javascript geschrieben, das direkt im Browser ausgeführt werden kann. Als ich eines Tages zufällig auf diesen Blog von John Resig stieß, war ich angenehm überrascht, dass dies genau das war, wonach ich gesucht hatte! Ich habe einige geringfügige Änderungen vorgenommen und die Anzahl der Codezeilen beträgt etwa 20. Die Logik ist sehr interessant. In diesem Artikel werde ich den Prozess des Schreibens dieser Engine Schritt für Schritt reproduzieren. Wenn Sie mitlesen können, werden Sie verstehen, wie scharfsinnig Johns Idee ist!

Meine ersten Gedanken waren wie folgt:

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

Nach dem Login kopieren

Eine einfache Funktion, die Eingabe ist unsere Vorlage und unser Datenobjekt, die Ausgabe ist für Sie wahrscheinlich leicht vorstellbar, wie die folgende:

Hallo, mein Name ist Krasimir, ich bin 29 Jahre alt.

Der erste Schritt besteht darin, die darin enthaltenen Vorlagenparameter zu finden und sie durch die spezifischen Daten zu ersetzen, die an die Engine übergeben werden. Ich habe beschlossen, reguläre Ausdrücke zu verwenden, um diesen Schritt auszuführen. Aber darin bin ich nicht der Beste, also kommentieren Sie gerne, wenn Ihr Text nicht gut ist.

var re = /<%([^%>]+)&#63;%>/g;

Nach dem Login kopieren

Dieser reguläre Ausdruck erfasst alle Fragmente, die mit <% beginnen und mit %> enden. Der Parameter g (global) am Ende bedeutet, dass nicht nur eines übereinstimmt, sondern alle übereinstimmenden Fragmente übereinstimmen. Es gibt viele Möglichkeiten, reguläre Ausdrücke in Javascript zu verwenden. Wir müssen ein Array ausgeben, das alle auf dem regulären Ausdruck basierenden Zeichenfolgen enthält.

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

Nach dem Login kopieren

Wenn wir console.log verwenden, um die Variablenübereinstimmung auszudrucken, sehen wir:

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

Nach dem Login kopieren

Aber wir können sehen, dass das zurückgegebene Array nur die erste Übereinstimmung enthält. Wir müssen die obige Logik mit einer While-Schleife umschließen, damit wir alle Übereinstimmungen erhalten.

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

Nach dem Login kopieren

Wenn Sie den obigen Code ausführen, werden Sie sehen, dass sowohl <%name%>

Jetzt kommt der interessante Teil. Nachdem wir die Übereinstimmungen in der Vorlage identifiziert haben, müssen wir sie durch die tatsächlichen Daten ersetzen, die an die Funktion übergeben wurden. Der einfachste Weg ist die Verwendung der Ersetzungsfunktion. Wir können es so schreiben:

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

Nach dem Login kopieren

Okay, ich kann also laufen, aber es ist nicht gut genug. Hier verwenden wir ein einfaches Objekt, um Daten in Form von Daten[„Eigenschaft“] zu übergeben, aber in tatsächlichen Situationen benötigen wir wahrscheinlich komplexere verschachtelte Objekte. Deshalb haben wir das Datenobjekt leicht geändert:

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

Nach dem Login kopieren

Wenn Sie es jedoch direkt so schreiben, wird es nicht ausgeführt, da der Code durch data['profile.age'] ersetzt wird, wenn Sie <%profile.age%> und das Ergebnis wird undefiniert sein. Auf diese Weise können wir nicht einfach die Ersetzungsfunktion verwenden, sondern müssen andere Methoden verwenden. Am besten wäre es, wenn Sie Javascript-Code direkt zwischen <% und %> verwenden könnten, damit die eingehenden Daten direkt ausgewertet werden könnten, etwa so:

Code kopieren Der Code lautet wie folgt:

var template = '

Hallo, mein Name ist <%this.name%> ich bin <%this.profile.age%>';

Sie sind vielleicht neugierig, wie wird das erreicht? Hier verwendet John die neue Funktionssyntax, um eine Funktion basierend auf einer Zeichenfolge zu erstellen. Schauen wir uns ein Beispiel an:

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

Nach dem Login kopieren

　fn ist eine echte Funktion. Es akzeptiert einen Parameter und der Funktionskörper ist console.log(arg 1);. Der obige Code entspricht dem folgenden Code:

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

Nach dem Login kopieren

Mit dieser Methode können wir eine Funktion aus einer Zeichenfolge erstellen, einschließlich ihrer Parameter und des Funktionskörpers. Ist das nicht genau das, was wir wollen! Aber keine Sorge, bevor wir die Funktion konstruieren, werfen wir einen Blick darauf, wie der Funktionskörper aussieht. Gemäß der vorherigen Idee sollte die endgültige Rückgabe dieser Vorlagen-Engine eine kompilierte Vorlage sein. Wenn wir immer noch die vorherige Vorlagenzeichenfolge als Beispiel verwenden, sollte der zurückgegebene Inhalt etwa so aussehen:

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

Nach dem Login kopieren

Natürlich werden wir in der eigentlichen Template-Engine die Vorlage in kleine Textstücke und aussagekräftigen Javascript-Code unterteilen. Sie haben vielleicht schon gesehen, dass ich eine einfache String-Verkettung verwendet habe, um den gewünschten Effekt zu erzielen, aber das entspricht nicht zu 100 % unseren Anforderungen. Da der Benutzer wahrscheinlich komplexeren Javascript-Code übergibt, benötigen wir hier eine weitere Schleife wie folgt:

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

Nach dem Login kopieren

　　如果使用字符串拼接的话，代码就应该是下面的样子：

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

Nach dem Login kopieren

　　当然，这个代码不能直接跑，跑了会出错。于是我用了John的文章里写的逻辑，把所有的字符串放在一个数组里，在程序的最后把它们拼接起来。

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

Nach dem Login kopieren

　　下一步就是收集模板里面不同的代码行，用于生成函数。通过前面介绍的方法，我们可以知道模板中有哪些占位符（译者注：或者说正则表达式的匹配项）以及它们的位置。所以，依靠一个辅助变量（cursor，游标），我们就能得到想要的结果。

var TemplateEngine = function(tpl, data) {
  var re = /<%([^%>]+)&#63;%>/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 = '<p>Hello, my name is <%this.name%>. I\'m <%this.profile.age%> years old.</p>';
console.log(TemplateEngine(template, {
  name: "Krasimir Tsonev",
  profile: { age: 29 }
}));

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

var add = function(line, js) {
  js&#63; 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;
}

Nach dem Login kopieren

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

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

Nach dem Login kopieren

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

复制代码代码如下:

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

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

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

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

Nach dem Login kopieren

　　这里会产生一个异常，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("");

Nach dem Login kopieren

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

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

Nach dem Login kopieren

　　这里我们新增加了一个正则表达式。它会判断代码中是否包含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("");

Nach dem Login kopieren

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

复制代码代码如下:

My skills:js html css

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

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

Nach dem Login kopieren

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

var TemplateEngine = function(html, options) {
  var re = /<%([^%>]+)&#63;%>/g, reExp = /(^( )&#63;(if|for|else|switch|case|break|{|}))(.*)&#63;/g, code = 'var r=[];\n', cursor = 0;
  var add = function(line, js) {
    js&#63; (code += line.match(reExp) &#63; line + '\n' : 'r.push(' + line + ');\n') :
      (code += line != '' &#63; 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : '');
    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 += 'return r.join("");';
  return new Function(code.replace(/[\r\t\n]/g, '')).apply(options);
}

Nach dem Login kopieren

　　代码比我预想的还要少，只有区区15行！