通过js和模板动态加载html页⾯
⼀.简述
html5页⾯中的静态部分代码好写，直接在.html⽂件中编写对应标签即可。但是对于动态的部分，就只能使⽤js和模板动态加载了。下⾯我介绍两种常⽤的动态加载html页⾯的实现⽅法。
⼆.实现⽅法⼀
实现⽅法如下⾯代码所⽰，在函数initAds()中，⽤变量template做⼀个html的模板，模板中可变的部分⽤“{变量}”括起来，然后从服务端读取数据，使⽤函数formatString()将服务端数据使⽤正则⽅法匹配替换template模板中
的“{变量}”，然后将替换完成后的html代码插⼊到页⾯中对应的位置，这样就实现了通过javascript和模板动态给html页⾯添加内容。
这种⽅法的优点是简单易懂，缺点是代码封装得不好。每次都得重写ajax函数。
/**
* 字符串格式化，⽤于在模板中注⼊值
* 例：var s = "id={id}".formatString(obj);
* @param obj 对象
* @returns {string} 注⼊后的字符串
*/
String.prototype.formatString = function (obj) {
var reg = /{([^{}]+)}/gm;
place(reg, function (match, name) {
return obj[name];
});
}
/**
* ⼴告数据
*/
function initAds() {
$.ajax({
html 网页 模板 引导type : "GET",
url : "/prizeguagua/ads",
dataType: "json",
success : function (result) {
de == 0) {
var adsList = sult.adsList;
var template = '<div class="adImg"><a href="{url}"><img src=' + qiniuPrefix + '{img}></a></div>';
var html = "";
$(adsList).each(function(i) {
html += template.formatString(adsList[i]);
});
$(".ads").html(html);
}
}
});
}
三.实现⽅法⼆
⽅法⼆使⽤了require.js插件，这个插件中有⼀个template()函数，可以⽤模板⽣成页⾯内容。下⾯介绍使⽤⽅法。
在html页⾯中需要写好模板。下⾯给出模板代码。
<script type="text/template" class="nav-tmpl">
<ul>
<% for(var i = 0;i < navigations.length;i++){%>
<li class="animated fadeInUp delay0d<%=2*i+3%>s">
<a href="<%= navigations[i].url %>">
<span class="nav-icon">
<img src="<%= window._l.cfg.imgPrefix + navigations[i].bgImg %>" alt="">
</span>
<div class="text">
<%= navigations[i].name %>
</div>
</a>
</li>
<% } %>
</ul>
</script>
我第⼀次看这个代码时，也是相当困惑，什么时候html5中冒出“<%=  %>”这种⿁了？后来查到这是template()函数的写法，有兴趣的可以去查requiere.js中的 template()函数。对于上⾯“<%= %>”，含义是取“=”后⾯变量的值，然后替换“<%= %>”。"<%  %>"含义是按照js代码执⾏，不⽣成页⾯元素。还有“<%- %>”，意思是如果有特殊字符，要转义处理。
注意“_.”是require.js中的对象，template()是对象“_.”的⼀个⽅法。
js代码如下所⽰：
_l.utils.api('loveProject/getLoveNavs').done(function(r) {
return $nav.html(_.template(navTmpl)({
navigations: r.result.navigations
}));
});
window._l.utils = {
api: function(url, data, options) {
var def, defaults, opts;
def = $.Deferred();
defaults = {
type: "GET",
dataType: 'jsonp'
};
opts = _.extend(defaults, options);
$.ajax({
url: "" + cfg.apiPrefix + url,
data: data || {},
dataType: opts.dataType,
type: pe,
jsonp: 'callBackParam',
success: function(r) {
var code;
code = r.code;
if (_.indexOf(cfg.apiCode.SUCCESS, code) !== -1) {
solve(r);
} else {
ject(r, url, data);
}
},
error: function(r) {
ject(r);
}
});
return def.promise();
},
四.优缺点
综上所述，⽅法⼀简单易懂，缺点是代码封装得不好，是个⽣成模板的初级写法。⽅法⼆要复杂⼀些，但是复⽤性好。⼤家可以根据⾃⼰项⽬的情况选择。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。