JavaScript 템플릿 엔진의 기본 구현 방법에 대한 간략한 분석

템플릿은 데이터와 프리젠테이션을 분리하여 프리젠테이션 논리와 효과를 더 쉽게 유지 관리할 수 있도록 해줍니다. JavaScript의 Function 객체를 사용하여 매우 간단한 템플릿 변환 엔진을 단계별로 구축

템플릿 소개
템플릿은 일반적으로 일종의 동적 프로그래밍 언어 코드가 포함된 텍스트를 의미합니다. 데이터와 템플릿을 어떤 형태로든 결합하여 다양한 결과를 생성할 수 있습니다. 템플릿은 일반적으로 표시 형식을 정의하는 데 사용되며, 이를 통해 데이터 표현을 더욱 풍부하게 만들고 유지 관리를 더 쉽게 만들 수 있습니다. 예를 들어 템플릿의 예는 다음과 같습니다.

<ul>
 <% for(var i in items){ %>
 <li class='<%= items[i].status %>'><%= items[i].text %></li>
 <% } %>
</ul>

로그인 후 복사

다음 항목 데이터가 있는 경우:

items:[
 { text: 'text1' ,status:'done' },
 { text: 'text2' ,status:'pending' },
 { text: 'text3' ,status:'pending' },
 { text: 'text4' ,status:'processing' }
]

로그인 후 복사

어떤 방식으로든 결합하면 다음 HTML 코드가 생성될 수 있습니다.

<ul>
 <li class='done'>text1<li>
 <li class='pending'>text2<li>
 <li class='pending'>text3<li>
 <li class='processing'>text4<li>
</ul>

로그인 후 복사

템플릿을 사용하지 않고 동일한 효과를 얻으려면, 즉 위의 데이터를 결과로 표시하려면 다음을 수행해야 합니다.

var temp = '<ul>';
for(var i in items){
 temp += "<li class='" + items[i].status + "'>" + items[i].text + "</li>";
}
temp += '</ul>';

로그인 후 복사

템플릿을 사용하면 다음과 같은 이점이 있음을 알 수 있습니다.

간단한 HTML 작성
프로그래밍 요소(예: 루프 및 조건부 분기)를 통해 데이터 표시를 더 효과적으로 제어할 수 있습니다.
데이터와 디스플레이를 분리하여 디스플레이 논리와 효과를 더 쉽게 유지 관리할 수 있습니다.
템플릿 엔진
데이터와 템플릿을 결합하여 템플릿을 분석하여 최종 결과를 출력하는 프로그램을 템플릿 엔진이라고 하며, 이에 대응하는 템플릿 엔진도 많습니다. ASP.NET, Rails 등 많은 웹 프레임워크에서 사용되는 오래된 템플릿을 ERB라고 합니다. 위의 예는 ERB의 예입니다. ERB에는 평가와 보간이라는 두 가지 핵심 개념이 있습니다. 표면적으로, 평가는 <% %>에 포함된 부분을 의미하고, 보간은 <%= %>에 포함된 부분을 의미합니다. 템플릿 엔진의 관점에서 평가 부분은 결과에 직접 출력되지 않으며 일반적으로 프로세스 제어에 사용되는 반면 보간 부분은 결과에 직접 출력됩니다.

템플릿 엔진 구현의 관점에서 구현을 단순화하고 성능을 향상시키기 위해서는 프로그래밍 언어의 동적 컴파일 또는 동적 해석 기능에 의존해야 합니다. 예: ASP.NET은 .NET의 동적 컴파일을 사용하여 템플릿을 동적 클래스로 컴파일하고 리플렉션을 사용하여 클래스의 코드를 동적으로 실행합니다. C#은 정적 프로그래밍 언어이기 때문에 이 구현은 실제로 더 복잡하지만 JavaScript를 사용하면 Function을 사용하여 매우 적은 코드로 간단한 템플릿 엔진을 구현할 수 있습니다. 이 기사에서는 JavaScript의 강력한 기능을 보여주기 위해 간단한 ERB 템플릿 엔진을 구현합니다.

템플릿 텍스트 변환
위의 예에서 템플릿 사용과 사용하지 않음의 차이점을 검토하세요.

템플릿 작성:

<ul>
 <% for(var i in items){ %>
 <li class='<%= items[i].status %>'><%= items[i].text %></li>
 <% } %>
</ul>

로그인 후 복사

템플릿이 아닌 글쓰기:

var temp = '<ul>';
for(var i in items){
 temp += "<li class='" + items[i].status + "'>" + items[i].text + "</li>";
}
temp += '</ul>';

로그인 후 복사

잘 살펴보면 두 가지 방법은 실제로 매우 '유사'하고 일대일 대응이라는 어떤 의미에서 찾을 수 있습니다. 템플릿의 텍스트를 실행용 코드로 변환할 수 있으면 템플릿 변환이 가능합니다. 변환 과정에는 두 가지 원칙이 있습니다:

일반 텍스트를 만나면 바로 문자열로 연결됩니다
보간(예: <%= %>)이 발생하면 콘텐츠가 변수로 처리되어 문자열
에 연결됩니다. 평가(예: <% %>)가 발생하면 바로 코드로 처리됩니다.
위의 원칙에 따라 위의 예를 변형하고 일반 기능을 추가합니다.

var template = function(items){
 var temp = '';
 //开始变换
 temp += '<ul>';
 for(var i in items){
 temp += "<li class='" + items[i].status + "'>" + items[i].text + "</li>";
 }
 temp += '</ul>';
}

로그인 후 복사

마지막으로 이 함수를 실행하고 데이터 매개변수를 전달합니다.

var result = template(items);

로그인 후 복사

자바스크립트 동적 함수
위의 변환 로직은 실제로는 매우 간단하다고 볼 수 있지만, 핵심 문제는 템플릿이 변경된다는 점이며, 이는 생성된 프로그램 코드도 런타임에 생성되어 실행되어야 한다는 것을 의미합니다. 다행스럽게도 JavaScript에는 많은 동적 기능이 있으며 그 중 하나가 함수입니다. 우리는 js에서 함수를 선언할 때 주로 function 키워드를 사용하는데, Function은 거의 사용되지 않습니다. js에서 function은 리터럴 구문입니다. js의 런타임은 리터럴 함수를 Function 객체로 변환하므로 Function은 실제로 더 낮은 수준의 유연한 메커니즘을 제공합니다.

Function 클래스를 이용하여 함수를 직접 생성하는 구문은 다음과 같습니다.

var function_name = new Function(arg1, arg2, ..., argN, function_body)

로그인 후 복사

예:

//创建动态函数 
var sayHi = new Function("sName", "sMessage", "alert(\"Hello \" + sName + sMessage);");
//执行 
sayHi('Hello','World');

로그인 후 복사

함수 본체와 매개변수 모두 문자열을 통해 생성 가능합니다! 정말 멋지다! 이 기능을 사용하면 템플릿 텍스트를 함수 본문의 문자열로 변환하여 동적 함수를 동적으로 생성하고 호출할 수 있습니다.

구현 아이디어
먼저 정규식을 사용하여 보간 및 평가를 설명하고 괄호를 사용하여 그룹 캡처를 수행합니다.

var interpolate_reg = /<%=([\s\S]+&#63;)%>/g;
var evaluate_reg = /<%([\s\S]+&#63;)%>/g;

로그인 후 복사

전체 템플릿을 지속적으로 일치시키기 위해 이 두 정규식은 함께 병합되지만 보간과 일치할 수 있는 모든 문자열은 일치 평가와 일치할 수 있으므로 보간은 더 높은 우선순위를 가져야 합니다.

var matcher = /<%=([\s\S]+&#63;)%>|<%([\s\S]+&#63;)%>/g

로그인 후 복사

템플릿 변환 기능을 설계합니다. 입력 매개변수는 템플릿 텍스트 문자열과 데이터 개체입니다

var matcher = /<%=([\s\S]+&#63;)%>|<%([\s\S]+&#63;)%>/g
//text: 传入的模板文本字串
//data: 数据对象
var template = function(text,data){ ... }

로그인 후 복사

使用replace方法，进行正则的匹配和“替换”，实际上我们的目的不是要替换interpolate或evaluate，而是在匹配的过程中构建出“方法体”：

var matcher = /<%=([\s\S]+&#63;)%>|<%([\s\S]+&#63;)%>/g
//text: 传入的模板文本字串
//data: 数据对象
var template = function(text,data){
 var index = 0;//记录当前扫描到哪里了
 var function_body = "var temp = '';";
 function_body += "temp += '";
 text.replace(matcher,function(match,interpolate,evaluate,offset){
 //找到第一个匹配后，将前面部分作为普通字符串拼接的表达式
 function_body += text.slice(index,offset);
 
 //如果是<% ... %>直接作为代码片段，evaluate就是捕获的分组
 if(evaluate){
  function_body += "';" + evaluate + "temp += '";
 }
 //如果是<%= ... %>拼接字符串，interpolate就是捕获的分组
 if(interpolate){
  function_body += "' + " + interpolate + " + '";
 }
 //递增index，跳过evaluate或者interpolate
 index = offset + match.length;
 //这里的return没有什么意义，因为关键不是替换text，而是构建function_body
 return match;
 });
 //最后的代码应该是返回temp
 function_body += "';return temp;";
}

로그인 후 복사

至此，function_body虽然是个字符串，但里面的内容实际上是一段函数代码，可以用这个变量来动态创建一个函数对象，并通过data参数调用：

var render = new Function('obj', function_body);
return render(data);

로그인 후 복사

这样render就是一个方法，可以调用，方法内部的代码由模板的内容构造，但是大致的框架应该是这样的：

function render(obj){
 var temp = '';
 temp += ...
 ...
 return temp;
}

로그인 후 복사

注意到，方法的形参是obj，所以模板内部引用的变量应该是obj：

<script id='template' type='javascript/template'>
 <ul>
 <% for(var i in obj){ %>
  <li class="<%= obj[i].status %>"><%= obj[i].text %></li>
 <% } %>
 </ul>
</script>

로그인 후 복사

看似到这里就OK了，但是有个必须解决的问题。模板文本中可能包含\r \n \u2028 \u2029等字符，这些字符如果出现在代码中，会出错，比如下面的代码是错误的：

temp += '
 <ul>
 ' + ... ;

로그인 후 복사

我们希望看到的应该是这样的代码：

temp += '\n \t\t<ul>\n' + ...;

로그인 후 복사

这样需要把\n前面的转义成\即可，最终变成字面的\\n。

另外，还有一个问题是，上面的代码无法将最后一个evaluate或者interpolate后面的部分拼接进来，解决这个问题的办法也很简单，只需要在正则式中添加一个行尾的匹配即可：

var matcher = /<%=([\s\S]+&#63;)%>|<%([\s\S]+&#63;)%>|$/g;

로그인 후 복사

相对完整的代码

var matcher = /<%=([\s\S]+&#63;)%>|<%([\s\S]+&#63;)%>|$/g


//模板文本中的特殊字符转义处理
var escaper = /\\|'|\r|\n|\t|\u2028|\u2029/g;
var escapes = {
  "'":   "'",
  '\\':   '\\',
  '\r':   'r',
  '\n':   'n',
  '\t':   't',
  '\u2028': 'u2028',
  '\u2029': 'u2029'
 };

//text: 传入的模板文本字串
//data: 数据对象
var template = function(text,data){
 var index = 0;//记录当前扫描到哪里了
 var function_body = "var temp = '';";
 function_body += "temp += '";
 text.replace(matcher,function(match,interpolate,evaluate,offset){
 //找到第一个匹配后，将前面部分作为普通字符串拼接的表达式
 //添加了处理转义字符
 function_body += text.slice(index,offset)
  .replace(escaper, function(match) { return '\\' + escapes[match]; });

 //如果是<% ... %>直接作为代码片段，evaluate就是捕获的分组
 if(evaluate){
  function_body += "';" + evaluate + "temp += '";
 }
 //如果是<%= ... %>拼接字符串，interpolate就是捕获的分组
 if(interpolate){
  function_body += "' + " + interpolate + " + '";
 }
 //递增index，跳过evaluate或者interpolate
 index = offset + match.length;
 //这里的return没有什么意义，因为关键不是替换text，而是构建function_body
 return match;
 });
 //最后的代码应该是返回temp
 function_body += "';return temp;";
 var render = new Function('obj', function_body);
 return render(data);
}

로그인 후 복사

调用代码可以是这样：

<script id='template' type='javascript/template'>
 <ul>
 <% for(var i in obj){ %>
  <li class="<%= obj[i].status %>"><%= obj[i].text %></li>
 <% } %>
 </ul>
</script>

...

var text = document.getElementById('template').innerHTML;
var items = [
 { text: 'text1' ,status:'done' },
 { text: 'text2' ,status:'pending' },
 { text: 'text3' ,status:'pending' },
 { text: 'text4' ,status:'processing' }
];
console.log(template(text,items));

로그인 후 복사

可见，我们只用了很少的代码就实现了一个简易的模板。

遗留的问题
还有几个细节的问题需要注意：

因为<%或者%>都是模板的边界字符，如果模板需要输出<%或者%>，那么需要设计转义的办法
如果数据对象中包含有null，显然不希望最后输出'null',所以需要在function_body的代码中考虑null的情况
在模板中每次使用obj的形参引用数据，可能不太方便，可以在function_body添加with(obj||{}){...}，这样模板中可以直接使用obj的属性
可以设计将render返回出去，而不是返回转化的结果，这样外部可以缓存生成的函数，以提高性能

JavaScript 템플릿 엔진의 기본 구현 방법에 대한 간략한 분석_기본 지식