使ajax载入动态html内容的代码易于编写及维护的方法

前言

当我们使用ajax载入一个如图1所示的列表，我相信很多人的ajax中迭代的代码是类似这样的：

for(var i in data.list){
    var head = data.list[i].head,
            name = data.list[i].name,
            height = data.list[i].height,
            weight = data.list[i].weight;

    var html = '<div class="list"><div class="headbox"><img src="' +
            head + '"></div><ul class="info"><li>' +
            name + '</li><li>' +
            height + '</li><li>' +
            weight + '</li></ul></div>';
    $('body').append(html);
}

图1

思路很简单，就是把搭建好的html内容字符串打断，在对应的地方加上ajax获取到的数据，然后append到页面中。但是这个方法有一个很大的缺陷，比如：代码已经写好，但是突然地，界面需要调整，增加一些新的内容，外观也调整过了，这时候我们需要重新修改html结构，修改css样式，将html内容代码压缩成一行，打断，用“+”连接，加入获取到的数据。是不是很累？如果修改的不是图1那样简单的例子，而是内容更多，结构更复杂呢？是不是更累？又或者自己发现迭代html内容以及支持一些功能需要在html标签增加一些属性，对html结构进行微调（这是在写html+css代码时不容易预测到的），这时候是重复一遍上述的过程还是html改一遍，js再改一遍?总之各种情况导致需要修改代码的时候就会造成很大麻烦。

那么，有没有一种办法可以轻松地将写好的html内容转化成可以动态迭代出来html内容，然后直接append出来就好了？答案是有的！看看下面这几行代码，并对比上文的代码：

for(var i in data.list){
    var head = data.list[i].head,
            name = data.list[i].name,
            height = data.list[i].height,
            weight = data.list[i].weight;
    var dataArr = [head,name,height,weight];
    var html = myhtmler.sethtml('htmler1',dataArr);
    $('body').append(html);
}

当界面发生改变时，只需专注于修改html结构及css样式，然后在js中迭代的代码中只需简单修改data.list[i]及数组dataArr中的数据即可。是不是很轻松？那这是怎么办到的呢？这样，我将实现此功能的代码封装成了插件，先介绍一下插件的用法，了解该插件对维护代码之便利程度。在文章最后可以下载插件，由于插件特别轻量级，直接将代码拷贝出来使用也是不错的选择。

插件用法

第一步：

引入jQuery及本插件

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery-htmler-1.0.js"></script>
</head>

第二步：

初始化插件

var myhtmler = new htmler('.htmler');

解释：参数为所有外围div公用的class选择器（注意，需要带“.”）。

第三步：

根据界面书写html及css

<style>
    ul{ list-style-type: none; margin:0; padding:0; }
    .htmler { display: inline; }
    .list { width: 200px; border: solid 1px #ddd; padding: 8px; margin-top: 10px; overflow: hidden;}
    .headbox { float:left; width: 100px; height: 100px; }
    .headbox img { display: block; width: 100%; }
    .info { float:left; margin-left:6px; }
</style>

<div class="htmler" id="htmler1">
    <div class="list">
        <div class="headbox"><img src="{images/head1.jpg}"></div>
        <ul class="info">
            <li>{小明}</li>
            <li>{1.75cm}</li>
            <li>{65kg}</li>
        </ul>
    </div>
</div>

解释：这里，需要ajax迭代的html（例子中的<div class="list"></div>）外围用一个不影响界面效果的div包裹（例子中的<div class="htmler" id="htmler1"></div>），为所有的外围div添加相同的class名（本例中只有一处），为每个外围div添加唯一的id名，html中需要从ajax获取的数据内容都用“{}”包含，本插件会自动在页面中去掉加入的“{}”以保证界面预览效果。

第四步：

在js代码中使用myhtmler.sethtml()方法：返回加入新数据的html内容。

for(var i in data.list){
    var head = data.list[i].head,
            name = data.list[i].name,
            height = data.list[i].height,
            weight = data.list[i].weight;
    var dataArr = [head,name,height,weight];
    var html = myhtmler.sethtml('htmler1',dataArr);
    $('body').append(html);
}

解释：myhtmler.sethtml()方法的第1个参数为需要迭代的模板html的外围div的id名（注意，不需要加“#”号），第2个参数是一个数组，数组按先后顺序加入从ajax获取到的数据。然后给原来作为模板的html外围div添加“display:none”的css属性以隐藏掉即可。如果你觉得页面中隐藏着模板html内容感觉很不舒服，就在js最后把他remove掉就好啦：$('.htmler').remove()。

点击此处下载插件