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

Question

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

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: 
     <p id='container'></p>
    js:
     var container=document.getElementById('container');
     for(var i=0;i<3;i++){
      /* 创建元素，添加到容器里*/
     }

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

Answer 1

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

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

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

Answer 2

var tpl = [
    '<p class="datepicker ui-d-n">',
    '    <p class="datepicker__mask"></p>',
    '    <p class="datepicker__main">',
    '        <p class="datepicker__footer">',
    '            <p class="datepicker__btn" id="_j_confirm_btn">确定</p>',
    '            <p class="datepicker__btn" id="_j_cancel_btn">取消</p>',
    '        </p>',
    '    </p>',
    '</p>'
].join("");

js数组不失为一种上佳选择。
推荐工具：http://www.css88.com/tool/html2js/

Answer 3

第1种方式:控制的时组件的行为，例如轮播组件，控制是怎样轮转的，过场动画是怎么样，可以通过一些配置项来自定义组件的具体行为方式.不关心控制的具体元素，无论是图片/一个普通的p/还是一段文本。比较轻量~~~从HTML角度来说更好读，即使JS不运行，页面的基本结构和样式都可以完整的展现
第2种方式:不管控制行为，还可以将控制的元素带入组件中，组件要做的事情要相对第1种多，好处是可以检查传入的元素是否符合要求，要展现页面的效果，必须通过JS参与，同时HTML初始加载相对快些

如果页面动态内容比较多，那就使用第2种方式，例如在用户行为没有发生的时候就一个对话框HTML代码放在页面中是不合适的，也没有必要

Answer 4

不管白猫黑猫，干得过狗的就是好猫。所以无所谓拘泥于形式，关键是看能不能达到你的目的，同时避免可能出现的问题。

第1种方式，可以让美工和程序员的工作分开（如果分工有这么明确的话）。美工只需要关注 HTML+CSS，程序员只需要关注 JavaScript 就好。但是，这种方式下，3 张图片要加载完了才会触发 document ready 事件。

第2种方式基本上就是程序员一个人的事情了，当然也可以跟美工协商好动态生成的 HTML 结构和使用的 class。不过这种方式仍然有一个问题，就是图片加载会比较慢（通常 JS 是在 ready 中开工的，所以页面加载的时候图片并未加载，要等一等才会出来。

综上，其实还可以采用其它方法，比如：用第1种方式区分开美工和程序员的工作，但是并不预先加载所有图片，只加载第1张，

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

之后使用脚本对后面的图片进行加载，第2张加载完了才允许切换到第2张，如果切换时间到了，仍然没加载出来第3张图片，可以先1-2张轮换，直到第3张图片加载完成，依此类推。当然代码会复杂得多。

除此之外，可能还会有其它更好的，更适合场景的处理办法，所以不必拘泥，灵活运用就好。

Answer 5

刚在知乎上面答完又看到这个问题，是不是同一个人？

以下是答案

看复用程度
1、优点是灵活，可随时修改结构和样式，缺点就是多处复用的话需要重复编写HTML代码
2、把1反着看

Answer 6

我更倾向于第一种

Answer 7

如果图片数组的长度不确定，就只能用第二种了

Answer 8

第二种方式是混入方式，建议尽量分离，html控制结构，js控制逻辑，css控制视觉展现，vue react可以去参考下。

Answer 9

如果代码多的话，还是建议js和html分离

Answer 10

可以结合一下 handlebars ，最好不要用 拼接的方式，而且主要分离