집 >웹 프론트엔드 >JS 튜토리얼 >javascript_javascript 기술을 사용하여 페이지 템플릿 엔진을 간단하게 작성하는 방법을 배웁니다.

javascript_javascript 기술을 사용하여 페이지 템플릿 엔진을 간단하게 작성하는 방법을 배웁니다.

WBOY원래의: 2016-05-16 16:00:581073검색

그래서 이 템플릿 엔진을 개선하고 기존의 다른 로직과 함께 작동하기 위해 간단한 코드를 작성할 수 있을지 고민했습니다. AbsurdJS 자체는 주로 NodeJS용 모듈로 출시되지만, 클라이언트 버전도 출시합니다. 이를 염두에 두고 기존 엔진은 대부분 NodeJS에서 실행되고 브라우저에서는 실행될 수 없기 때문에 직접 사용할 수 없습니다. 나에게 필요한 것은 순전히 Javascript로 작성되어 브라우저에서 직접 실행할 수 있는 작은 것입니다. 어느 날 John Resig의 이 블로그를 우연히 발견했을 때, 이것이 바로 제가 찾던 블로그라는 사실에 기분 좋게 놀랐습니다! 약간의 수정을 가했는데, 코드 줄수가 20줄 정도 됩니다. 논리는 매우 흥미롭습니다. 이 기사에서는 이 엔진을 작성하는 과정을 단계별로 재현해 보겠습니다. 따라 읽어보시면 John의 아이디어가 얼마나 날카로운지 이해하실 수 있을 것입니다.

저의 초기 생각은 다음과 같았습니다.

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
}));

간단한 함수인 입력은 템플릿이자 데이터 개체이며, 출력은 다음과 같이 생각하기 쉬울 것입니다.

e388a4556c0f65e1904146cc1a846bee안녕하세요, 제 이름은 크라시미르입니다.94b3e26ee717c64999d7867364b1b4a3
첫 번째 단계는 내부의 템플릿 매개변수를 찾아 엔진에 전달된 특정 데이터로 바꾸는 것입니다. 이 단계를 수행하기 위해 정규식을 사용하기로 결정했습니다. 하지만 저는 이 분야에 최고가 아니므로, 당신의 글이 좋지 않다면 자유롭게 댓글을 달아주세요.

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

이 정규 표현식은 cd8bb8a6860b5f389862e9a6c44b6bd9로 끝나는 모든 조각을 캡처합니다. 끝에 있는 매개변수 g(전역)는 하나만 일치하는 것이 아니라 일치하는 모든 조각이 일치한다는 의미입니다. Javascript에서 정규식을 사용하는 방법은 여러 가지가 있습니다. 우리에게 필요한 것은 정규식을 기반으로 모든 문자열을 포함하는 배열을 출력하는 것입니다. 이것이 바로 exec가 수행하는 작업입니다.

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

console.log를 사용하여 변수 일치를 인쇄하면 다음이 표시됩니다.

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

그러나 반환된 배열에는 첫 번째 일치 항목만 포함되어 있음을 알 수 있습니다. 모든 일치 항목을 얻을 수 있도록 위의 논리를 while 루프로 래핑해야 합니다.

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

위 코드를 실행하면 db185f51abe1d02301f57d0c9e8c9eb5와 5775174bcf4feadc65f033b84eb1e107가 모두 출력되는 것을 볼 수 있습니다.

이제 흥미로운 부분이 나옵니다. 템플릿에서 일치 항목을 식별한 후 이를 함수에 전달된 실제 데이터로 바꿔야 합니다. 가장 간단한 방법은 교체 기능을 사용하는 것입니다. 다음과 같이 작성할 수 있습니다.

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

그렇군요. 달릴 수는 있지만 부족해요. 여기서는 간단한 개체를 사용하여 data["property"] 형식으로 데이터를 전달하지만 실제 상황에서는 더 복잡한 중첩 개체가 필요할 수 있습니다. 그래서 우리는 데이터 객체를 약간 수정했습니다:

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

그런데 이렇게 직접 작성하면 템플릿에서 913f7752eb512a3f068e4113f2294efd를 사용하면 코드가 data['profile.age']로 바뀌기 때문에 실행되지 않습니다. 결과는 정의되지 않습니다. 이런 식으로 단순히 바꾸기 기능을 사용할 수는 없고 다른 방법을 사용해야 합니다. 1ddc2f61650fc26f2f77c7e18b72d8ce 사이에 Javascript 코드를 직접 사용하여 다음과 같이 들어오는 데이터를 직접 평가할 수 있다면 가장 좋습니다.

코드 복사 코드는 다음과 같습니다.

var template = 'e388a4556c0f65e1904146cc1a846bee안녕하세요. 제 이름은 9951915acf0f83f8d48a7a5aa3e0943c입니다.c3c740eb268a72a41cd4ae63499ebd7794b3e26ee717c64999d7867364b1b4a3';

이것이 어떻게 달성되는지 궁금하실 것입니다. 여기서 John은 새로운 Function 구문을 사용하여 문자열을 기반으로 하는 함수를 만듭니다. 예를 살펴보겠습니다.

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

　fn은 정품 기능입니다. 하나의 매개변수를 허용하며 함수 본문은 console.log(arg 1);입니다. 위 코드는 다음 코드와 동일합니다.

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

이 방법을 사용하면 매개변수와 함수 본문을 포함하여 문자열에서 함수를 구성할 수 있습니다. 이것이 바로 우리가 원하는 것이 아니겠습니까! 하지만 걱정하지 마세요. 함수를 구성하기 전에 함수 본문이 어떻게 생겼는지 살펴보겠습니다. 이전 아이디어에 따르면 이 템플릿 엔진의 최종 반환은 컴파일된 템플릿이어야 합니다. 이전 템플릿 문자열을 예로 사용하면 반환된 콘텐츠는 다음과 유사해야 합니다.

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

물론, 실제 템플릿 엔진에서는 템플릿을 작은 텍스트 조각과 의미 있는 Javascript 코드로 나눌 것입니다. 앞서 원하는 효과를 얻기 위해 간단한 문자열 연결을 사용하는 것을 보셨을 수도 있지만 이는 우리의 요구 사항과 100% 일치하지 않습니다. 사용자는 더 복잡한 Javascript 코드를 전달할 가능성이 높으므로 여기에는 다음과 같은 또 다른 루프가 필요합니다.

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

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

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

　　当然，这个代码不能直接跑，跑了会出错。于是我用了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('');

　　下一步就是收集模板里面不同的代码行，用于生成函数。通过前面介绍的方法，我们可以知道模板中有哪些占位符（译者注：或者说正则表达式的匹配项）以及它们的位置。所以，依靠一个辅助变量（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 }
}));

　　上述代码中的变量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("");

　　等等，貌似不太对啊，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;
}

　　占位符的内容和一个布尔值一起作为参数传给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("");

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

复制代码代码如下:

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"]
}));

　　这里会产生一个异常，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 = /<%([^%>]+)&#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';
}

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

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

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
}));

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

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);
}

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

성명：

이전 기사：jQuery 메시지 프롬프트 상자 플러그인 Tipso_jquery다음 기사：jQuery 메시지 프롬프트 상자 플러그인 Tipso_jquery

javascript_javascript 기술을 사용하여 페이지 템플릿 엔진을 간단하게 작성하는 방법을 배웁니다.

관련 기사