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)))

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

html生成列表模板的方法相关推荐

php 关键词生成,DEDECMS实现文章tag关键词自动生成列表页的方法
本文实例讲述了DEDECMS实现文章tag关键词自动生成列表页的方法.分享给大家供大家参考.具体实现方法如下: 一般来说在dedecms中如果要页面关键词生成列表有两种办法:一种就是使用dedecms ...
oracle新增表单,Oracle Retail（Retek）中Form生成列表方法总结
本篇文章总结下oracle retail(retek)系统中实现列表的一些方法,据说该功能实现类似ebs中lookup,不过到目前为止我还没开发过ebs,就先不管retek中的列表实现和ebs中的列表 ...
python如何创建一个列表_Python-如何创建或生成列表
如何创建列表,或生成列表.这里介绍在python的基础知识里创建或转变或生成列表的一些方法. 1.根据定义创建 1 零个,一个或一系列数据用逗号隔开,放在方括号[ ]内就是一个列表对象. 2 列表内的 ...
vscode设置默认新建html,VScode修改默认生成的HTML模板的方法
在VScode中,新建HTML页面时可以输入!+tab键,快速生成HTML代码模板,默认生成的代码模板如下: Document 由于生成的代码模板中有一些不需要,所以每次生成后都需要删除,很麻烦.其实 ...
vscode生成vue模板快捷键_VSCode写vue项目一键生成.vue模版,修改定义其他模板的方法...
1. 安装一个插件,识别vue文件 2.新建代码片段文件–>首选项–>用户代码片段–>点击新建代码片段–取名vue.json 确定 3.粘贴入自己写的.vue模板 { " ...
JavaScript实现模板生成大量数据的方法（附代码）
本篇文章给大家带来的内容是关于JavaScript实现模板生成大量数据的方法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 有时需要根据模板生成大量数据,这个代码工具简直就 ...
python创建数字列表_Python 生成一个从0到n个数字的列表4种方法小结
Python 生成一个从0到n个数字的列表4种方法小结我就废话不多说了,直接上代码吧! 第一种 def test1(): l = [] for i in range(1000): l = l + [ ...
帝国cms：评论列表模板中调用热门文章或是推荐文章的js方法
后台管理评论模板里有评论的列表模板,想在评论列表模板中调用热门文章或是推荐文章,现在考虑到标签和js. 长知识:动态模板无法使用标签,所以标签在这里就pass了,专心搞js----> 1.后台= ...
sublime生成html模板,sublime Text 3 emmet自定义HTML模板的方法
下面由sublime text 3 教程栏目给大家介绍emmet自定义HTML模板的方法,希望对需要的朋友有所帮助! 1.下载Emmet https://github.com/sergeche/emm ...

html生成列表模板的方法

html生成列表模板的方法相关推荐

最新文章

热门文章