前端模板是什麼？前端模板的原理介紹以及實例-js教程-PHP中文網

首頁

web前端

js教程

前端模板是什麼？前端模板的原理介紹以及實例

不言

Sep 04, 2018 am 10:35 AM

html5javascript範本

前端模板是什麼？前端模板該如何實作？很多朋友可能對這個不太了解，那麼，下面這篇文章將給大家介紹一下關於前端模板的原理以及簡單的實作程式碼。

前端範本的發展

範本可以說是前端開發最常接觸的工具之一。將頁面固定不變的內容抽出成模板，服務端傳回的動態資料填入模板中預留的坑位，最後組裝成完整的頁面html字串交給瀏覽器去解析。

範本可以大幅提升開發效率，如果沒有範本開發人員怕是要手動拼出字串。

var tpl = &#39;<p>&#39; + user.name + &#39;</p>&#39;;
$(&#39;body&#39;).append(tpl);

在近年來前端發展過程中，模板也跟著變化：

1. php模板JSP模板

早期還沒有前後端分離時代，前端只是後端專案中的資料夾，這時期的php和java都提供了各自的模板引擎。以JSP為例：java web應用的頁面通常是一個.jsp的文件，這個文件內容是大部分的html以及一些模板自帶語法，本質上是純文本，但是既不是html也不是java。

JSP語法：index.jsp

<html>
<head><title>Hello World</title></head>
<body>
Hello World!<br/>
<%
out.println("Your IP address is " + request.getRemoteAddr());
%>
</body>
</html>

這個時期的模板引擎，往往是服務端來編譯模板字串，產生html字串給客戶端。

2. handlebar mustache通用模板

09年node發布，JavaScript也可以來實現服務端的功能，這也大大的方便了開發人員。 mustache和handlebar模板的誕生方便了前端開發人員，這兩個模板均使用JavaScript來實現，從此前端模板既可以在服務端運行，也可以在客戶端運行，但是大多數使用場景都是js根據服務端非同步取得的資料套入模板，產生新的dom插入頁碼。對前端後端開發都非常有利。

mustache語法：index.mustache

<p>Username: {{user.name}}</p>
{{#if (user.gender === 2)}}
    <p>女</p>
{{/if}}

3. vue中的模板React中的JSX

接下來到了新生代， vue中的模板寫法跟之前的模板有所不同，而且功能更加強大。既可以在客戶端使用也可以在服務端使用，但是使用場景上差距非常大：頁面往往根據資料變化，模板產生的dom發生變化，這對於模板的效能要求很高。

vue語法：index.vue

<p>Username: {{user.name}}</p>
<template v-if="user.gender === 2">
    <p>女</p>
</div>

模板實現的功能

#無論是從JSP到vue的模板，模板在語法上越來越簡便，功能越來越豐富，但是基本功能是不能少的：

變數輸出（轉義/不轉義）:出於安全考慮，模板基本預設都會將變數的字串轉義輸出，當然也實現了不轉義輸出的功能，慎重使用。
條件判斷（if else）：開發中常需要的功能。
循環變數：循環數組，產生許多重複的程式碼片段。
模板嵌套：有了模板嵌套，可以減少很多重複程式碼，並且嵌套模板整合作用域。

以上功能基本上涵蓋了大多數模板的基礎功能，而針對這些基礎功能就可以探究模板如何實現的。

模板實作原理

如標題所說的，模板本質上都是純文字的字串，字串是如何操作js程式的呢？

模板用法上：

var domString = template(templateString, data);

模板引擎取得到模板字串和模板的作用域，經過編譯後產生完整的DOM字串。

大多數模板實作原理基本上一致：

模板字串首先透過各種手段剝離出普通字串和模板語法字串產生抽象語法樹AST；然後針對模板語法片段進行編譯，期間模板變數皆去引擎輸入的變數尋找；模板語法片段產生出普通html片段，與原始普通字串進行拼接輸出。

其實模板編譯邏輯並沒有特別複雜，至於vue這種動態綁定資料的模板有時間可以參考文末連結。

快速實作簡單的範本

現在以mustache模板為例，手動實作一個實作基本功能的範本。

範本字串範本：index.txt

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  <script src="main.js"></script>
</head>
<body>
  <h1 id="Panda模板编译">Panda模板编译</h1>
  <h2 id="普通变量输出">普通变量输出</h2>
  <p>username： {{common.username}}</p>
  <p>escape：{{common.escape}}</p>
  <h2 id="不转义输出">不转义输出</h2>
  <p>unescape：{{&common.escape}}</p>
  <h2 id="列表输出">列表输出：</h2>
  <ul>
  {{#each list}}
    <li class="{{value}}">{{key}}</li>
  {{/each}}
  </ul>
  <h2 id="条件输出">条件输出：</h2>
  {{#if shouldEscape}}
    <p>escape{{common.escape}}</p>
  {{else}}
    <p>unescape：{{&common.escape}}</p>
  {{/if}}
</body>
</html>

範本對應資料：

module.exports = {
  common: {
    username: &#39;Aus&#39;,
    escape: &#39;<p>Aus</p>&#39;
  },
  shouldEscape: false,
  list: [
    {key: &#39;a&#39;, value: 1},
    {key: &#39;b&#39;, value: 2},
    {key: &#39;c&#39;, value: 3},
    {key: &#39;d&#39;, value: 4}
  ]
};

範本的使用方法：

var fs = require("fs");
var tpl = fs.readFileSync(&#39;./index.txt&#39;, &#39;utf8&#39;);
var state = require(&#39;./test&#39;);
var Panda = require(&#39;./panda&#39;);

Panda.render(tpl, state)

然後來實作範本：

1. 正規切割字串

模板引擎取得到模板字串之後，通常要使用正規切割字串，區分出那些是靜態的字串，那些是需要編譯的程式碼區塊，生成抽象語法樹（AST）。

// 将未处理过的字符串进行分词，形成字符组tokens
Panda.prototype.parse = function (tpl) {
  var tokens = [];
  var tplStart = 0;
  var tagStart = 0;
  var tagEnd = 0;

  while (tagStart >= 0) {
    tagStart = tpl.indexOf(openTag, tplStart);
    if (tagStart < 0) break;
    // 纯文本
    tokens.push(new Token(&#39;text&#39;, tpl.slice(tplStart, tagStart)));

    tagEnd = tpl.indexOf(closeTag, tagStart) + 2;
    if (tagEnd < 0) throw new Error(&#39;{{}}标签未闭合&#39;);
    // 细分js

    var tplValue = tpl.slice(tagStart + 2, tagEnd - 2);
    var token = this.classifyJs(tplValue);
    tokens.push(token);

    tplStart = tagEnd;
  }

  // 最后一段
  tokens.push(new Token(&#39;text&#39;, tpl.slice(tagEnd, tpl.length)));

  return this.parseJs(tokens);
};

這一步驟分割字串通常使用正規則來完成的，後面檢索字串會大量用到正規方法。

在這一步驟通常可以檢查出模板標籤閉合異常，並報錯。

2. 模板語法的分類

生成AST之後，普通字串不需要再管了，最後會直接輸出，專注於模板語法的分類。

// 专门处理模板中的js
Panda.prototype.parseJs = function (tokens) {
  var sections = [];
  var nestedTokens = [];
  var conditionsArray = [];
  var collector = nestedTokens;
  var section;
  var currentCondition;

  for (var i = 0; i < tokens.length; i++) {
    var token = tokens[i];
    var value = token.value;
    var symbol = token.type;

    switch (symbol) {
      case &#39;#&#39;: {
        collector.push(token);
        sections.push(token);

        if(token.action === &#39;each&#39;){
          collector = token.children = [];
        } else if (token.action === &#39;if&#39;) {
          currentCondition = value;
          var conditionArray;
          collector = conditionArray = [];
          token.conditions = token.conditions || conditionsArray;

          conditionsArray.push({
            condition: currentCondition,
            collector: collector
          });
        }
        break;
      }
      case &#39;else&#39;: {
        if(sections.length === 0 || sections[sections.length - 1].action !== &#39;if&#39;) {
          throw new Error(&#39;else 使用错误&#39;);
        }

        currentCondition = value;
        collector = [];

        conditionsArray.push({
          condition: currentCondition,
          collector: collector
        });

        break;
      }
      case &#39;/&#39;: {
        section = sections.pop();

        if (section && section.action !== token.value) {
          throw new Error(&#39;指令标签未闭合&#39;);
        }

        if(sections.length > 0){
          var lastSection = sections[sections.length - 1];
          if(lastSection.action === &#39;each&#39;){
            collector = lastSection.chidlren;
          } else if (lastSection.action = &#39;if&#39;) {
            conditionsArray = [];
            collector = nestedTokens;
          }
        } else {
          collector = nestedTokens;
        }

        break;
      }
      default: {
        collector.push(token);
        break;
      }
    }
  }

  return nestedTokens;
}

上一步我們生成了AST，這個AST在這裡就是一個分詞token數組：

[
    Token {},
    Token {},
    Token {},
]

這個token就是每一段字串，分別記錄了token的類型，動作，子token ，條件token等資訊。

/**
 * token类表示每个分词的标准数据结构
 */
function Token (type, value, action, children, conditions) {
  this.type = type;
  this.value = value;

  this.action = action;
  this.children = children;
  this.conditions = conditions;
}

在这一步要将循环方法中的子token嵌套到对应的token中，以及条件渲染子token嵌套到对应token中。

这步完成之后，一个标准的带有嵌套关系的AST完成了。

3. 变量查找与赋值

现在开始根据token中的变量查找到对应的值，根据相应功能生成值得字符串。

/**
 * 解析数据结构的类
 */
function Context (data, parentContext) {
  this.data = data;
  this.cache = { '.': this.data };
  this.parent = parentContext;
}

Context.prototype.push = function (data) {
  return new Context(data, this);
}

// 根据字符串name找到真实的变量值
Context.prototype.lookup = function lookup (name) {
  name = trim(name);

  var cache = this.cache;

  var value;
  // 查询过缓存
  if (cache.hasOwnProperty(name)) {
    value = cache[name];
  } else {
    var context = this, names, index, lookupHit = false;

    while (context) {
      // user.username
      if (name.indexOf('.') > 0) {
        value = context.data;
        names = name.split('.');
        index = 0;

        while (value != null && index <p>为了提高查找效率，采用缓存代理，每次查找到的变量存储路径方便下次快速查找。</p><p>不同于JavaScript编译器，模板引擎在查找变量的时候找不到对应变量即终止查找，返回空并不会报错。</p><h3 id="节点的条件渲染与嵌套">4. 节点的条件渲染与嵌套</h3><p>这里开始讲模板语法token和普通字符串token开始统一编译生成字符串，并拼接成完整的字符串。</p><pre class="brush:php;toolbar:false">// 根据tokens和context混合拼接字符串输出结果
Panda.prototype.renderTokens = function (tokens, context) {
  var result = '';
  var token, symbol, value;

  for (var i = 0, numTokens = tokens.length; i <h3 id="绘制页面">5. 绘制页面</h3><p>页面字符串已经解析完成，可以直接输出：</p><pre class="brush:php;toolbar:false">Panda.prototype.render = function (tpl, state) {
  if (typeof tpl !== 'string') {
    return new Error('请输入字符串！');
  }

  // 解析字符串
  var tokens = this.cache[tpl] ? tokens : this.parse(tpl);
  // 解析数据结构
  var context = state instanceof Context ? state : new Context(state);
  // 渲染模板
  return this.renderTokens(tokens, context);
};

输出页面字符串被浏览器解析，就出现了页面。

以上只是简单的模板实现，并没有经过系统测试，仅供学习使用，源码传送门。成熟的模板引擎是有完整的异常处理，变量查找解析，作用域替换，优化渲染，断点调试等功能的。

总结

前端模板这块能做的东西还很多，很多框架都是集成模板的功能，配合css，js等混合编译生成解析好样式和绑定成功事件的dom。

另外实现模板的方式也有很多，本文的实现方式参考了mustache源码，模板标签内的代码被解析，但是是通过代码片段分类，变量查找的方式来执行的，将纯字符串的代码变成了被解释器执行的代码。

另外向vue这种可以实现双向绑定的模板可以抽空多看一看。

学习前端模板引擎 jade (一)_html/css_WEB-ITnose

以上是前端模板是什麼？前端模板的原理介紹以及實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。

JavaScript是用C編寫的嗎？檢查證據Apr 25, 2025 am 12:15 AM

是的，JavaScript的引擎核心是用C語言編寫的。 1）C語言提供了高效性能和底層控制，適合JavaScript引擎的開發。 2）以V8引擎為例，其核心用C 編寫，結合了C的效率和麵向對象特性。 3）JavaScript引擎的工作原理包括解析、編譯和執行，C語言在這些過程中發揮關鍵作用。

JavaScript的角色：使網絡交互和動態Apr 24, 2025 am 12:12 AM

JavaScript是現代網站的核心，因為它增強了網頁的交互性和動態性。 1)它允許在不刷新頁面的情況下改變內容，2)通過DOMAPI操作網頁，3)支持複雜的交互效果如動畫和拖放，4)優化性能和最佳實踐提高用戶體驗。

C和JavaScript：連接解釋Apr 23, 2025 am 12:07 AM

C 和JavaScript通過WebAssembly實現互操作性。 1）C 代碼編譯成WebAssembly模塊，引入到JavaScript環境中，增強計算能力。 2）在遊戲開發中，C 處理物理引擎和圖形渲染，JavaScript負責遊戲邏輯和用戶界面。

從網站到應用程序：JavaScript的不同應用Apr 22, 2025 am 12:02 AM

JavaScript在網站、移動應用、桌面應用和服務器端編程中均有廣泛應用。 1)在網站開發中，JavaScript與HTML、CSS一起操作DOM，實現動態效果，並支持如jQuery、React等框架。 2)通過ReactNative和Ionic，JavaScript用於開發跨平台移動應用。 3)Electron框架使JavaScript能構建桌面應用。 4)Node.js讓JavaScript在服務器端運行，支持高並發請求。

Python vs. JavaScript：比較用例和應用程序Apr 21, 2025 am 12:01 AM

Python更適合數據科學和自動化，JavaScript更適合前端和全棧開發。 1.Python在數據科學和機器學習中表現出色，使用NumPy、Pandas等庫進行數據處理和建模。 2.Python在自動化和腳本編寫方面簡潔高效。 3.JavaScript在前端開發中不可或缺，用於構建動態網頁和單頁面應用。 4.JavaScript通過Node.js在後端開發中發揮作用，支持全棧開發。