4行代碼實現js模板引擎

時間 2019-11-07

原文原文鏈接

在平時編碼中，常常要作拼接字符串的工做，如把json數據用HTML展現出來，以往字符串拼接與邏輯混在在一塊兒會讓代碼晦澀不堪，加大了多人協做與維護的成本。而採用前端模板機制就能很好的解決這個問題。javascript

精妙的 tmplcss

前端模板類開源的很多，但最屬 jQuery 做者 John Resig 開發的「javascript micro templating」最爲精妙，寥寥幾筆便實現了模板引擎核心功能。它的介紹與使用方式請看做者博客：http://ejohn.org/blog/javascript-micro-templating/html

麻雀雖小，五臟俱全，除了基本的數據附加外，還擁有緩存機制、邏輯支持。如今，若要我評出一個javascript 最節能的自定義函數排名，第一名是 $ 函數(document.getElementById 簡版)，而第二名就是 tmpl 了。前端

固然，它並不是完美，我使用過程當中發現了一些問題：java

tmpl 美中不足git

1、沒法正確處理轉義字符，如： tmpl('<%=name%>\\<%=id%> ', {name:'糖餅', id: '1987'});它就會報錯。若正常工做，它應該輸出：糖餅\1987github

2、沒法識別數據裏的單引號web

3、設置變量默認值複雜，如正則表達式

tmpl('<%if(obj.name){%><%=name%><%}else{%>默認值<%}%> ', {name:'糖餅'}); //設置name默認爲「默認值」json

tmpl 優化版本

廢話很少說，先敬上代碼：

 1 function tmpl(str, data) {
 2     var $ = '$' + (+ new Date)
 3         , fn = function (data) {
 4         var i, variable = [$], value = [[]];
 5         for (i in data) {
 6             variable.push(i);
 7             value.push(data[i]);
 8         }
 9         return (new Function(variable, fn.$))
10             .apply(data, value).join("");
11     };
12 
13     //將模板解析成函數
14     fn.$ = fn.$ || $ + ".push('"
15         + str.replace(/\\/g, "\\\\")
16             .replace(/'/g, "\\'")  //防止單括號錯誤
17             .replace(/[\r\t\n]/g, " ")
18             .split("[:").join("\t")
19             .replace(/((^|:])[^\t]*)'/g, "$1\r")
20             .replace(/\t=([^\?]*?):]/g, "',$1,'")
21             .replace(/\t=([^\?]*?)\?(.*?):]/g, "',this.$1||'$2','")   //  [:=data?:]  [:=data?任何內容:]
22             .split("\t").join("');")
23             .split(":]").join($ + ".push('")
24             .split("\r").join("\\'")
25         + "');return " + $;
26 
27     //若是未定義data則返回編譯好的函數，使用時直接傳入數據便可，
28     //省去每次解析成函數的時間
29     return data ? fn(data) : fn;
30 
31 };

好吧，上面的代碼看起來超出了4行，原諒我標題黨。不過這段代碼通過壓縮後，確實只有四行^_^。下面咱們就來詳細解構它。

首先看一下使用示例：

 1 //循環結構
 2 
 3 var tpl = '[: for(var k in ary){ var one=ary[k]; :]'
 4         + '<p>[:=one:]</p>'
 5         + '[: } :]';
 6 var data = {ary:[123,'abc']};
 8 var div = tmpl(tpl,data);
10 console.log(div); //</p>123</p><p>abc</p>
11 
12 
13 //變量驗證
14 
15 var tpl = '[: if(this.name!==undefined){ :]' //注意必須使用 this.name，直接使用name，若是未定義就會報錯
16 + '<p>[:=name:]</p>'
17 + '[: } :]';
18 var data = {name:'abc'};
20 var div = tmpl(tpl,data);
22 

23 //你還能夠這樣方便地使用未定義的變量：
24 

25 var tpl = '<p>name:[:=name?:], name:[:=name?默認值:]</p>';
26 var data = {no:'abc'};
27 var div = tmpl(tpl,data);
28 
29 console.log(div); // <p>name:, name:默認值</p>
30 
31 
32 //緩存編譯結果
33 
34 
35 var tpl = '[: for(var k in ary){ var one=ary[k]; :]'
36 + '<p>[:=one:]</p>'
37 + '[: } :]';
38 var data = {ary:[123,'abc']};
40 var render = tmpl(tpl); //不傳入data，則生成緩存，屢次使用緩存節約大量正則運算
42 var div = render(data); //傳入data，代入變量，解析成最終結果
43 
44 console.log(div); //<p>123</p><p>abc</p>