html生成列表模板的方法

93 阅读 0 评论 62 点赞

我是靠谱客的博主超帅火龙果，最近开发中收集的这篇文章主要介绍html生成列表模板的方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

列表是最常用的数据结构了，不管是对于前端还是后端来说都是这样，对于我个人来说最常用的渲染方法是这样的

1.从服务器请求数据

2.遍历请求的数据，使用字符串模板拼接

3.注入到dom

这几步对于我来说都已经写吐了，那么还是那个问题，有没有优化的方法呢

//从服务器拿数据
const array = [
{
    title: '苏炳添创造历史', 
    content: '在东京奥运会百米飞人比赛中，中国选手苏炳添跑出了9秒83的成绩，创造了亚洲百米的最好 成绩'
},
{
    title: '这街4开播',
    content: '这就是街舞第四季在优酷播出，这一期邀请了不少国际舞者加入，给中外街舞交流创造了平台'
}];

let html = '';

//拼接字符串模板，箭头函数写法
array.forEach(obj=>{
    html += `<li>
                <div>${obj.title}</div>
                <div>${obj.content}</div>
            <li>`
})

$('ul').html(html)

一般的情况下，数据结构都是比较复杂的，而且有比较多的样式要设置，所以把模板独立成函数

const array = [
{
    title: '苏炳添创造历史', 
    content: '在东京奥运会百米飞人比赛中，中国选手苏炳添跑出了9秒83的成绩，创造了亚洲百米的最好成绩'
},
{
    title: '这街4开播',
    content: '这就是街舞第四季在优酷播出，这一期邀请了不少国际舞者加入，给中外街舞交流创造了平台'
}];

//模板函数
function template(obj){
    return  `<li>
                <div>${obj.title}</div>
                <div>${obj.content}</div>
            <li>`
}

let html = '';

array.forEach(obj=>{
    html += template(obj);
})

$('ul').html(html)

还能不能继续优化呢，在一个暗无天日的晚上，我无意中看到我前面写的一些东西，有一段迭代用了map而不是for或者forEach，于是有

const array = [
{
    title: '苏炳添创造历史', 
    content: '在东京奥运会百米飞人比赛中，中国选手苏炳添跑出了9秒83的成绩，创造了亚洲百米的最好成绩'
},
{
    title: '这街4开播',
    content: '这就是街舞第四季在优酷播出，这一期邀请了不少国际舞者加入，给中外街舞交流创造了平台'
}];

function template(obj){
    return  `<li>
                <div>${obj.title}</div>
                <div>${obj.content}</div>
            <li>`
}

let html = array.map(obj=> template(obj))
$('ul').html(html)

当然一般我都这么写，是不是比原来清爽了许多

const array = [
{
    title: '苏炳添创造历史', 
    content: '在东京奥运会百米飞人比赛中，中国选手苏炳添跑出了9秒83的成绩，创造了亚洲百米的最好        成绩'
},
{
    title: '这街4开播',
    content: '这就是街舞第四季在优酷播出，这一期邀请了不少国际舞者加入，给中外街舞交流创造了平台'
}];

function template(obj){
    return  `<li>
                <div>${obj.title}</div>
                <div>${obj.content}</div>
            <li>`
}

$('ul').html(array.map(obj=> template(obj)))

啥，有人看不懂吗，我注释都写得这么全了，再说为啥要看懂，知道怎么用不就完了么