通过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;
return this.replace(reg, function (match, name) {
return obj[name];
});
}
/**
* 广告数据
*/
function initAds() {
$.ajax({
type : "GET",
url : "/prizeguagua/ads",
dataType: "json",
success : function (result) {
if(result.code == 0) {
var adsList = result.result.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: opts.type,
jsonp: 'callBackParam',
success: function(r) {
var code;
code = r.code;
if (_.indexOf(cfg.apiCode.SUCCESS, code) !== -1) {
return def.resolve(r);
} else {
return def.reject(r, url, data);
}
},
error: function(r) {
return def.reject(r);
}
});
return def.promise();
},

上面代码中的api()函数只是把ajax封装了一下，但是优势很明显，多个模板可以复用同一个api()函数中的ajax模块。对于api()函数里面的Deferred()，这是jQuey在1.5.0版本后引入的一个新功能，有兴趣的可以阅读这篇文字：http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html。如果只是使用的话，记住下面这段话就可以了，done()相当于success方法，fail()相当于error方法。采用链式写法以后，代码的可读性大大提高。

四.优缺点

综上所述，方法一简单易懂，缺点是代码封装得不好，是个生成模板的初级写法。方法二要复杂一些，但是复用性好。大家可以根据自己项目的情况选择。