JavaScript模板引擎的應用場景及實現原理
一、應用場景
以下應用場景可以使用模板引擎:
1、如果你有動態ajax請求資料並需要封裝成檢視展現給使用者,想要提高自己的工作效率。
2、如果你是拼串族或者陣列push族,迫切的希望改變現有的書寫方式。
3、如果你在頁面佈局中,存在共性模組和佈局,你可以提取出公共模板,減少維護的數量。
二、實現原理
不同模板間實現原理大同小異,各有優缺,請按需選擇,以下示例以artTemplate模板引擎來分析。
2.1 模板存放
模板一般都是放置到textarea/input等表單控制元件,或者script[type="text/html"]等標籤中,如下:
<script id="test" type="text/html"> {{if isAdmin}} <h1>{{title}}</h1> <ul> {{each user as name i}} <li> {{i + 1}} :{{name}}</li> {{/each}} </ul> {{/if}} </script>
//textarea或input則取value,其它情況取innerHTML
2.2 模板函式
一般都是templateFun(“id”, data);其中id為存放模板字串的元素id,data為需要裝載的資料。
2.3 模板獲取
一般都是通過ID來獲取,document.getElementById(“ID”):
//textarea或input則取value,其它情況取innerHTML var html = /^(textarea|input)$/i.test(element.nodeName) ? element.value : element.innerHTML;
2.4 模板解析——處理html語句和邏輯語句及其他格式化處理
這步的主要操作其實多餘的空格,解析出html元素和邏輯語句及關鍵字。例如:artTemplate.js中的程式碼實現:
defaults.parser = function (code, options) { // var match = code.match(/([\w\$]*)(\b.*)/); // var key = match[1]; // var args = match[2]; // var split = args.split(' '); // split.shift(); //if isAdmin code = code.replace(/^\s/, ''); //["if", "isAdmin"] var split = code.split(' '); //if var key = split.shift(); //isAdmin var args = split.join(' '); switch (key) { case 'if': //if(isAdmin){ code = 'if(' + args + '){'; break; case 'else': if (split.shift() === 'if') { split = ' if(' + split.join(' ') + ')'; } else { split = ''; } code = '}else' + split + '{'; break; case '/if': code = '}'; break; case 'each': var object = split[0] || '$data'; var as = split[1] || 'as'; var value = split[2] || '$value'; var index = split[3] || '$index'; var param = value + ',' + index; if (as !== 'as') { object = '[]'; } code = '$each(' + object + ',function(' + param + '){'; break; case '/each': code = '});'; break; case 'echo': code = 'print(' + args + ');'; break; case 'print': case 'include': code = key + '(' + split.join(',') + ');'; break;
例如上例中:”{{if isAdmin}}”最終被解析成”if(isAdmin){”,”{{/if}}“被解析成“}”。
2.5 模板編譯——字串拼接成生成函式的過程
這步的主要操作就是字串的拼接成生成函式,看看artTemplate的部分原始碼:
function compiler (source, options) { /* openTag: '<%', // 邏輯語法開始標籤 closeTag: '%>', // 邏輯語法結束標籤 escape: true, // 是否編碼輸出變數的 HTML 字元 cache: true, // 是否開啟快取(依賴 options 的 filename 欄位) compress: false, // 是否壓縮輸出 parser: null // 自定義語法格式器 @see: template-syntax.js */ var debug = options.debug; var openTag = options.openTag; var closeTag = options.closeTag; var parser = options.parser; var compress = options.compress; var escape = options.escape; var line = 1; var uniq = {$data:1,$filename:1,$utils:1,$helpers:1,$out:1,$line:1}; //isNewEngin在6-8返回undefined var isNewEngine = ''.trim;// '__proto__' in {} var replaces = isNewEngine ? ["$out='';", "$out+=", ";", "$out"] : ["$out=[];", "$out.push(", ");", "$out.join('')"]; var concat = isNewEngine ? "$out+=text;return $out;" : "$out.push(text);"; var print = "function(){" + "var text=''.concat.apply('',arguments);" + concat + "}"; var include = "function(filename,data){" + "data=data||$data;" + "var text=$utils.$include(filename,data,$filename);" + concat + "}"; var headerCode = "'use strict';" + "var $utils=this,$helpers=$utils.$helpers," + (debug ? "$line=0," : ""); var mainCode = replaces[0]; var footerCode = "return new String(" + replaces[3] + ");" // html與邏輯語法分離 forEach(source.split(openTag), function (code) { code = code.split(closeTag); var $0 = code[0]; var $1 = code[1]; // code: [html] if (code.length === 1) { mainCode += html($0); // code: [logic, html] } else { mainCode += logic($0); if ($1) { mainCode += html($1); } } }); var code = headerCode + mainCode + footerCode;
上例中模板中的模板字串程式碼會被拼接成如下字串:
'use strict'; var $utils = this, $helpers = $utils.$helpers, isAdmin = $data.isAdmin, $escape = $utils.$escape, title = $data.title, $each = $utils.$each, user = $data.user, name = $data.name, i = $data.i, $out = ''; if (isAdmin) { $out += '\n\n <h1>'; $out += $escape(title); $out += '</h1>\n <ul>\n '; $each(user, function(name, i) { $out += '\n <li>'; $out += $escape(i + 1); $out += ' :'; $out += $escape(name); $out += '</li>\n '; }); $out += '\n </ul>\n\n '; } return new String($out);
然後會被生成如下函式:
var Render = new Function("$data", "$filename", code); /*Outputs: function anonymous($data, $filename) { 'use strict'; var $utils = this, $helpers = $utils.$helpers, isAdmin = $data.isAdmin, $escape = $utils.$escape, title = $data.title, $each = $utils.$each, user = $data.user, name = $data.name, i = $data.i, $out = ''; if (isAdmin) { $out += '\n\n <h1>'; $out += $escape(title); $out += '</h1>\n <ul>\n '; $each(user, function(name, i) { $out += '\n <li>'; $out += $escape(i + 1); $out += ' :'; $out += $escape(name); $out += '</li>\n '; }); $out += '\n </ul>\n\n '; } return new String($out); } */ console.log(Render);
2.5 裝載資料,檢視呈現
/*Outputs: <h1>User lists</h1> <ul> <li>1 :zuojj</li> <li>2 :Benjamin</li> <li>3 :John</li> <li>4 :Rubby</li> <li>5 :Handy</li> <li>6 :CIMI</li> </ul> */ console.log(new Render(data, filename) + ''); //物件轉換為字串 return new Render(data, filename) + '';
三、常見JavaScript模板引擎及測試對比
- BaiduTemplate —— 最簡單好用的JS模板引擎(百度)
- artTemplate —— 高效能JavaScript模板引擎(騰訊CDC)
- Velocity.js —— 來自淘寶的JS 模板引擎
- JavaScript Templates —— 輕量、快速、強大、無依賴模板引擎
- Juicer —— 高效、輕量的Javascript模板引擎
- mustache.js —— Logic-less {{mustache}} templates with JavaScript
- 各大Javascript模板引擎測試對比
以上就是本文對模板引擎的描述,感謝您的閱讀,文中不妥之處還望批評指正。
相關文章
- ZooKeeper核心原理及應用場景
- 海外IP池的工作原理及應用場景
- zookeeper 主要應用場景及程式碼實現
- Hive簡介、應用場景及架構原理Hive架構
- Java程式中的代理作用和應用場景及實現Java
- Mybatis-Plus的應用場景及注入SQL原理分析MyBatisSQL
- Tornado原理淺析及應用場景探討
- 20行程式碼實現JavaScript模板引擎行程JavaScript
- 堆排序原理及其應用場景排序
- 【實操】小程式的應用場景分析——線下場景應用
- C#常用執行緒同步方法應用場景和實現原理C#執行緒
- Base64 的原理、實現及應用
- JavaScript中this的一些應用場景JavaScript
- HDFS應用場景、原理、基本架構及使用方法概述架構
- DATAGUARD實際的應用場景
- RabbitMQ核心元件及應用場景MQ元件
- redis應用場景及例項Redis
- 說說如何用 JavaScript 實現一個模板引擎JavaScript
- JavaScript 預解析的原理及實現JavaScript
- Redis的應用場景及優缺點Redis
- Webpack 下使用 web workers 及 基本原理 和 應用場景Web
- Redis實際應用場景Redis
- 棧的應用場景思路分析和程式碼實現
- 防抖和節流的應用場景和實現
- Zookeeper基礎原理&應用場景詳解
- 圖資料庫及應用場景資料庫
- Zookeeper 介紹及典型應用場景
- 前端資料渲染及mustache模板引擎的簡單實現前端
- Spark Streaming 的原理以及應用場景介紹Spark
- Redis的資料結構及應用場景Redis資料結構
- Pytest的斷言方式及應用場景
- JavaScript 模板引擎概述JavaScript
- 無服務計算應用場景探討及 FaaS 應用實戰
- 實現人工智慧應用場景的關鍵技術人工智慧
- 說說你對堆的理解?如何實現?應用場景?
- 前端模板引擎的實現總結前端
- 閉包實際場景應用
- FRAM的應用場景