JavaScript模板引擎的應用場景及實現原理

jopen 10年前發布 | 86K 次閱讀模板引擎

一、應用場景

以下應用場景可以使用模板引擎：
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模板引擎及測試對比

以上就是本文對模板引擎的描述，感謝您的閱讀，文中不妥之處還望批評指正。

來源：Benjamin

本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。

轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。

本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！

本文地址：http://www.baiduhome.net/lib/view/open1416041011711.html

模板引擎