js组织html代码块心得

引言

  在js开发中，经常会通过拼接html字符串，来为前端页面动态增加元素。然而，这种方式非常不直观且不便于后期维护。尤其当添加的元素量较大时，与之相关的js代码会显得十分杂乱。针对此种情况，本文以通过js生成一个静态html页面代码块为例，结合Ecmascript6动态字符串标准和网友自定义的format函数，来分享一下js组织html代码块心得。

1 Ecmascript6动态字符串标准

  Ecmascript6规定动态字符串用反引号“，动态字符串中需要引用变量的地方，只需参照${var}形式即可，样例如下：

var id="div1"

var divHtmlBlock=`<div id="${id}"></div>`;

2 js自定义扩展format函数

  此函数同样用于组织动态代码块，但同时适用于引号和反引号两张形式的字符串。
format函数定义如下：

//判断是否为空对象
function isEmptyObject(e) {
   
    var t;
    for (t in e)
        return !1;
    return !0
}