使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()。


点击此处下载插件


发布了4 篇原创文章 · 获赞 0 · 访问量 2万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览