javascript - 写组件的时候是写好html结构还是在js里拼接好？

问题描述

问 题

最近在写一些组件，比如说轮播组件，看其他人实现的组件，
有两种编写方式，

1. 在html里写好组件结构，向js里传入id

   <ul id='container'>
    <li><a href="#"><img src="1.png" alt=""></a></li>
    <li><a href="#"><img src="2.png" alt=""></a></li>
    <li><a href="#"><img src="3.png" alt=""></a></li>
   </ul>

2. 还有一种是只在html里编写容器的id，然后在js里文件里创建元素或者拼接template

    html: 
     <div id='container'></div>
    js:
     var container=document.getElementById('container');
     for(var i=0;i<3;i++){
      /* 创建元素，添加到容器里*/
     }

请问这两种实现方式的使用场景分别是什么，他们的优缺点在哪

解决方案

从应用场景看:第一种优于第二种(用template动态插入并不利与SEO抓取,不能使页面更加语义化,如title,alt的描述)

从加载速度上看:第一种是dom从上往下加载图片的顺序(此时可以并行发出多个img请求)能让图片最先显示在视野中,第二种如果你将外链js文件置于底部,要等dom执行到这个js后再去渲染模板插入的内容,可能比第一种情况更先完成dom就绪,如果网站内容较多,你可能需要做对图片做占位符或者lazy处理了(不然在用户视野显示会体验不好)

从代码规范上看:表相分离更好维护,第二种替换模式更适合协作和修改(带新人好上手,会替换字符就行0-0)

这篇关于javascript - 写组件的时候是写好html结构还是在js里拼接好？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！