管理js模板

[holyzfy]

简单模板能直接写在页面里，放到script标签里

<script id="demo_tmpl" type="text/html">
<div>模板内容...</div>
</script>

复杂的模板请写到单独的文件

demo_tmpl.html放到inc目录下：

<script id="demo_tmpl" type="text/html">
#parse("inc/path/to/demo_tmpl.html")
</script>

demo_tmpl.html放到templates目录下：

var demoTmpl = require('text!templates/path/to/demo_tmpl.html');

// ...

将来构建工具会把模板内容内联进js文件里，如下：

var demoTmpl = 'demo_tmp.html的内容...';

// ...

⚠️ 因为构建工具会把templates里的文件内容内联到js里，所以构建时会排除templates目录，所以如果想在html页面里#parse引入js模板文件，请将js模板放到inc目录下

👎 不好的写法

var demoTmpl = '<div>'+
                    '<p>' +
                        '<span>' + item +'</span>' +
                    '</p>' +
                '</div>';

• 难维护
• 存在XSS安全隐患

优化DOM操作，提高渲染效率

DOM操作很慢，改变DOM结构和布局都会产生重排（reflow），重排又一定会导致重绘（repaint），所以尽量减少重排和重绘。

哪些操作会导致重排或者重绘：https://csstriggers.com/

• 避免快速连续的DOM操作（不好的案例：在循环语句里修改DOM）
• 尽量使用离线DOM
  • 先隐藏元素，再做修改操作
  • 在字符串里拼接DOM，操作完成后再一次性的插入到页面
  • 通过操作class属性来修改样式，而不是逐个修改style属性

👉 推荐阅读：https://developers.google.com/web/fundamentals/performance/rendering/avoid-large-complex-layouts-and-layout-thrashing?hl=zh-cn