자바스크립트 템플릿 엔진이란 무엇인가요?

JavaScript 템플릿 엔진은 HTML 구조를 포함된 콘텐츠에서 분리하는 방법으로, 비즈니스 데이터에서 사용자 인터페이스를 분리하기 위해 생성됩니다. 템플릿 엔진은 동적 페이지를 렌더링하는 데 사용됩니다. , 문자열 연결 작업을 단순화하는 데 사용할 수 있는 것입니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

자바스크립트 템플릿 엔진이란 무엇인가요?

템플릿 엔진(여기서는 구체적으로 웹 개발에 사용되는 템플릿 엔진을 말합니다)은 비즈니스 데이터(콘텐츠)와 사용자 인터페이스를 분리하기 위해 만들어집니다. 웹사이트에서 사용 템플릿 엔진은 표준 HTML 문서를 생성합니다.

템플릿 엔진은 동적 페이지를 렌더링할 때 문자열 접합 작업을 단순화하도록 설계되었습니다.

JavaScript 템플릿은 HTML 구조와 그 안에 포함된 콘텐츠를 분리하는 방법입니다. 템플릿 시스템은 종종 몇 가지 새로운 구문을 도입하지만 일반적으로 사용이 매우 간단합니다. 특히 이전에 다른 곳에서 템플릿 시스템(예: PHP의 Twig)을 사용한 경우에는 더욱 그렇습니다. 주목해야 할 흥미로운 점은 토큰 대체가 일반적으로 이중 중괄호({{ ... }})로 표시되며, 여기에서 Mustache 및 Handlebars가 파생된다는 것입니다(팁: 유사성을 확인하려면 옆으로 돌리십시오).

예를 들어 페이지에 목록을 렌더링해야 합니다.

<li>111</li>
<li>222</li>
<li>333</li>

목록의 데이터는 동적으로 얻은 배열입니다. data=['111','222','333']. 그런 다음 코드로 직접 작성하고 데이터를 반복한 다음 각 li의 데이터를 연결해야 합니다. 페이지 작성에 익숙한 학생들은 코드 로직을 html로 직접 작성하고 싶어하는데, 데이터 소스만 변경하면 다른 페이지 코드가 출력될 수 있습니다. 예를 들어 다음과 같이 작성할 수 있습니다.

for(var i = 0; i < this.list.length; i++){
  <li>this.list[i]</li>
}

this.list의 데이터가 변경되면 다른 결과를 얻을 수 있습니다. 그러나 이러한 코드를 사용하면 논리 코드가 어디에 있는지, HTML 코드 자체가 어디에 있는지 구별하는 것이 불가능합니다. 그래서 몇 가지 태그를 추가했습니다. 여기서는 <% %>를 사용하여 논리 코드를 래핑합니다.

<%for(var i = 0; i < this.list.length; i++){%>
  <li><%=this.list[i]%></li>
<%}%>

이 코드를 스크립트 태그에 추가하고 유형을 text/html 또는 다른 형식으로 변경하고 필요할 때 DOM을 통해 텍스트 콘텐츠를 가져올 수 있습니다. js가 이 코드를 이해할 수 있으면 데이터 소스를 변경하여 템플릿 콘텐츠를 업데이트할 수 있습니다. 정기적인 매칭을 통해 모든 논리적 코드를 파악하고 분석할 수 있습니다. 여기서는 트릭을 사용하여 js를 사용하여 new Function을 사용하여 코드를 실행했습니다. 실행 후 최종 문자열 결과가 출력되었습니다. var etj = function (str, data) {

var reg = /^<%.*?%>/,
    reg2 = /^(.*?)<%/,
    str2 = &#39;var str = "";&#39;,
    str = str.replace(/[\r\t\n]/g, " ");
while (str.length) {
    if (match = reg.exec(str)) {
        if (/^<%=/.exec(str)) {
            str = str.replace(match[0], &#39;&#39;);
            str2 += (&#39;str +&#39; + match[0].replace(/<%|%>/g, &#39;&#39;));
            str2 += &#39;;&#39;;
        } else {
            str = str.replace(match[0], &#39;&#39;);
            str2 += match[0].replace(/<%|%>/g, &#39;&#39;);
            str2 += &#39;;&#39;;
        }
    } else {
        match = reg2.exec(str)[1];
        str = str.replace(match[0], &#39;&#39;);
        str2 += &#39;str +="&#39;;
        str2 += match[0];
        str2 += &#39;";&#39;;
    }
}
str2 += &#39;return str;&#39;
var f = new Function(str2);
return f.call(data);

} 이것은 제가 직접 작성한 장난감 엔진인데 아직 버그가 있습니다. 먼저 데모를 해보겠습니다(결국 논리는 간단합니다). 여기서는 간단한 일반 규칙을 사용하여 템플릿을 순수한 js 코드 조각으로 변환합니다. 데이터 소스를 가져온 후 실행 결과는 우리가 원하는 html 코드입니다.

etj(str, {'list': [1, 2, 3]});

만 실행하면 됩니다. 이런 방식으로 HTML 로직을 JS 코드에 포함할 필요는 없습니다.

【관련 추천: javascript 비디오 튜토리얼, web front-end】

위 내용은 자바스크립트 템플릿 엔진이란 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!