静态网页轻松加载动态数据，让HTML开发更轻松

很多人可能用过Vie.js，网页动态加载数据。一般来说，HTML在后面调用new Vue()加载数据的。
Vue很有创意，在HTML中插入{{}}标记，使用HTML模板化，方便开发。但其也有一定不便。

我受Vue启发，想与Jquery结合（我很喜欢JQuery）。

我尝试使用$Ajax()加载数据，并把数据显示到网页中。

我参考Vue编辑网页文件（HTML）{。

[code]<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代码中的参数，并替代数据。

[code]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) 即可。

[code]//前面省略$Ajax()代码
dataType: "json",
success: function (data) {
$('#price').html(htm.View(data));
//以下省略

其中html在之前获取的HTML脚本片段。

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

我就想了个办法，通过jQuery与上述View()，动态加载实现，当然我引入了Html5的<template>标记。

这是一个不错的模板代码段。以下是合计行模板：

[code]<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>

然后调用（填充表格及合计行）：

[code]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开发哦！