模板的使用

学会了ajax之后，可以通过发送请求来获取数据，从而更新页面信息，输出一些内容。当输出的内容比较少或者结构比较简单的时候，可以将其包裹在标签中，然后以字符串的形式拼接起来。但是当你需要输出大量的内容，这些内容大都结构相同，这个时候你或许就用得上模板了。

使用模板的好处

使用模板能使我们专注于实现 js 部分而不是捣鼓已设计好了的 html 页面结构，不需要再去拼接字符串，省去了出错率最高的一步，能有效帮助我们快速开发。

如何使用

首先导入封装好的工具类 template.js 然后在 html 中以如下形式定义模板:

     <!-- 导入js插件 模板插件--> 
    <script type="text/javascript" src="js/template-native.js"></script>    

    <!-- 定义模板template-obj -->
    <script type="text/template" id="template-obj">
        <!--html内容-->
        <h1>这是模板标题</h1>
        <!--定义模板中不同的内容-->
        <div><%=objContent%></div>
    </script>

在 script 标签中定义的 html 结构不会被浏览器直接解析，因此可以将页面中大量存在的相同的结构放在如上所示的 script 标签中, 其中不同的内容用 变量 保存起来，格式为：<%=变量名%>
如果有多个变量，可以使用 对象·属性 的方式，然后在 js 中传入的对象中具有对应的 key-value 即可。
然后在 js 中调用函数自动生成模板：

        $.ajax({url:'ajaxObj.php',type:'get',success:function(data) {

        //创建对象供template函数接收
        var hostObj = {
            objContent:data
        };

        //获取通过模板函数生成的html结构
        var hostString = template('template-obj',hostObj);

        //更新页面
        $contentText.append(hostString);

        }});

对于 template 方法，接受两个参数：

• 第一个参数是定义模板时设置的 id 名称
• 第二个参数接受一个对象类型的参数，其中对象的 key 值要与定义模板时变量的名称相同，value 值则是变量实际的值。

这个方法返回一个 html 结构的字符串，只需要将字符串添加到原有的 html 结构中就能完成页面更新了。

• template.js