当前位置: 首页 > Web前端 > HTML

【JS实战技巧】优化动态创建元素的方式,让代码更优雅,更易维护

时间:2023-04-02 17:29:39 HTML

介绍在前端开发中,经常需要动态添加一些元素到页面中。那么如何通过一些技巧优化动态创建页面元素的方式,让代码更优雅,更易维护呢?接下来,我们将通过研究一些例子来逐步寻找最优解。本文尽量写得通俗易懂,为刚入门前端的新手带来一些思路和启发。退伍军人也可以一起阅读,作为评论。或者直接跳到下半部分看稍微深入一点的模板数据替换例子,互相交流。由于DOM和HTML之间存在歧义,为了区分,文中这两个术语的含义为:DOM:特指文档对象,在JS上以对象的形式存在。HTML:特指HTML文本,是一系列字符的集合。示例一:如何给页面动态添加元素话不多说,我们先来思考一个最基本的问题,如何用JS给页面动态添加元素?假设点击“AddaPassenger”按钮时,要求JS动态创建一个新的输入框填写姓名:

Passengerlist:

乘客姓名:
AddaPassengerSave从上面可以看出,要实现这个功能,我们需要处理的HTML片段是:乘客姓名:
勉强解决办法:手动复制粘贴html拼接成js字符串那么我们来看看传统的方法是这样的:首先,手动复制粘贴HTML拼接成JS字符串,然后插入到表单中。$('.create-passenger').on('click',function(){//先手动复制粘贴HTML,拼接成JS字符串varhtml=''+'Passengername:'+'
';//然后插入到表单$('.form').append(html);});点评&分析这是一种偷懒的实现方式,在一些中小网站和教材上最为常见。在开发过程中,在某些情况下使用这种方案确实可能会更快,只需将HTML复制粘贴并拼写成JS字符串即可。但要满足这样的条件,必须是:要拼接的HTML字符串很短;页面结构已经很稳定了,可以保证以后不用再改动;页面HMTL和JS代码量不多,或者JS直接写在了页面上,即使设计不合理也更容易查看和维护。问题&思考HTML和JS的分离没做好,脚本和HTML强耦合,不合适。如果后面页面上的HTML发生了变化,你也一定要记得找到相关的脚本文件,在JS代码中搜索并修改硬编码的HTML字符串。换个角度想想,如果插入的HTML很复杂,有几百行。在JS脚本中手动拼接庞大的字符串非常麻烦,而且非常容易出错。更好的解决方案:模板分离原则模板分离原则:将定义模板的部分从JS代码逻辑中分离出来,使代码更加优雅,易于维护。1.使用页面上已有的DOM元素作为模板通过分析页面,我们可以知道在表单的开头至少会有一个乘客输入项。所以我们可以将表单上第一位乘客的DOM复制为模板:$('.create-passenger').on('click',function(){//将第一位乘客的DOM复制为模板vartemplate=$('.form.form-group:first-child').clone();//将DOM模板插入到表单中,形成一个新行$('.form').append(template);});注意点&细节分析例子中使用了jquery的clone()方法,可以复制jquery包裹的整个DOM对象(不包括对象绑定的事件,如果想一起复制事件,可以加上一个参数克隆(真)哦)。有时复制的DOM对象可能不是原来的状态,所以记得初始化它。比如有input这样的输入项,记得初始化valuetemplate.find('input').val('')的值。2.在隐藏标签中定义模板如果页面没有相关的DOM,可以手动创建一个隐藏的
,然后在里面定义我们的模板:旅客姓名:
接下来用JS来将该元素的内容作为模板:vartemplate=$('#passenger-template>div').clone();注意细节&分析为什么要用标签包裹模板,一是拿模板的时候可以很方便,直接clone()或者html()即可;二是加强分类规范。比如在定义一个模板时,要求大家使用相同的标签和CSS类:当然不一定非要使用
,也可以使用其他标签,或者自定义一个