찾다
웹 프론트엔드JS 튜토리얼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返回出去,而不是返回转化的结果,这样外部可以缓存生成的函数,以提高性能
성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!