很多人可能用過Vie.js，網頁動態載入資料。一般來說，HTML在後面呼叫new Vue()載入資料的。
Vue很有創意，在HTML中插入{{}}標記，使用HTML模板化，方便開發。但其也有一定不便。

我受Vue啟發，想與Jquery結合（我很喜歡JQuery）。

我嘗試使用$Ajax()載入資料，並把資料顯示到網頁中。

我參考Vue編輯網頁檔案（HTML）{。

<tr>
    <td class="bj-label">
        報價貨號
    </td>
    <td>
        <span>{{ProdNo}}</
 
span>
    </td>
    <td class="bj-label">
        產品名稱
    </td>
    <td colspan="3">
        <span>{{ProdName}}</span>
    </td>
</tr>

{{ProdNo}}、{{ProdName}}就是引數名，與後臺引數旬一致（大小寫敏感）。在Visual Studio 2016中粉色顯示。

我又寫了一段JS函式，用於解析HTML程式碼中的引數，並替代資料。

String.prototype.View = function
 
 (data) {
    //用資料賦值替換HTML中Vue格式標記的引數
    //Vue模板格式：{{Param}}   - 引數名：Param，即data.Param
    // 支援預設值： {{Param:Hello World}}    ":"後面為預設值（字串，也可為數值）
    if (data == undefined)
        return this;
    else {
        var pattern = /(\{\{)[^\s]*(\}\})/g,    //  /(\{\{)[^\s]*(\}\})/g
            matchArr;
        var
 
 str = this;
        var json = JSON.stringify(data); //JSON轉字串        
        while ((matchArr = pattern.exec(str))) {
            matchArr.forEach(function (o, i) {
                var p = o.Trim().replaceAll('{{', '').replaceAll('}}', '');
                if (p.length > 0) {
                    var i = p.indexOf(':');
                    var v = '';
                    if (i > 0) {
                        v = p.substr(i + 1, p.length - i);
                        p = p.substr(0, i);
                    }
                    try {
                        var r = (new Function('return JSON.parse(\'' + json + '\').' + p + ';'))();
                        r = (r == undefined || r == null || r == 'undefined' || r == 'null' ? v : r);
                        str = str.replaceAll(o, r);
                    }
                    catch (e) {
                        str = str.replaceAll(o, v);
                        console.log('解析錯誤:' + o);
                        console.log('[Error]:' + e);
                    }
                }
            });
        }
        return str;
    }
}

以上程式碼使用正則表示式解析HTML中{{}}標記的引數，因能力有限，表示式可能有點弱，高手可優化之。

呼叫方法很簡單，就是通過JQuery或原生方法，讀取一段HTML程式碼段，將其中引數標記替換成資料值。
例如，從後臺獲取資料為data，在前臺頁面獲取程式碼片段為html，則呼叫：html.View(data) 即可。

//前面省略$Ajax()程式碼
dataType: "json",
success: function (data) {
    $('#price').html(htm.View(data));
    //以下省略

其中html在之前獲取的HTML指令碼片段。

Vue.js支援v-if和v-for，是不錯的功能，但不太好用（本人水平有限）。

我就想了個辦法，通過jQuery與上述View()，動態載入實現，當然我引入了Html5的<template>標記。

這是一個不錯的模板程式碼段。以下是合計行模板：

<template id="zzj_sum">
    <tr class="grid-footer">
        <td>{{Desc}}小計</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>{{Weight}}</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>{{ModCost}}</td>
        <td>{{RawCost}}</td>
        <td>&nbsp;</td>
        <td>{{ZZGF}}</td>
        <td>{{SHCB}}</td>
    </tr>
</template>

然後呼叫（填充表格及合計行）：

var t = $('#grid_cmp');
//填充表格行
fillGridRow(t, $('#zzj_row').html(), data.Comps.SJ.Rows);
//填充合計行
$(t).append($('#zzj_sum').html().View(data.Comps.SJ.Sum));

//填充表格行的函式
function fillGridRow(grid, tr, rows) {
    if (rows) {               
        for (var i = 0; i < rows.length; i++) {
            //console.log(JSON.stringify(rows[i]));
            $(grid).append(tr.View(rows[i]));
        }
    }
}

現在我通過靜態網頁，載入後臺資料。設計與執行效率都很高。VS的WebForm和MVC，我沒有使用了。
當然，以上思路與MVC也不謀而合，前後臺開發分離實現。而且，還一樣可用於移動終端H5開發哦！