JS012. 变量存储含class、id等其他属性的标签元素（动态渲染DOM结点）

项目中有一处源码需要用变量存储html标签，包含类名和其他一些属性，再动态地将其渲染到页面上。

看下普通的存储方式：

initHtml: function () {
    var me = this;
    // var _html = ['<div class="mykb-box" id="mykeyboard' + me.count + '">', '<ul class="num-key clearfix">', '<li class="num">1</li>', '<li class="num">2</li>', '<li class="num">3</li>', '<li class="func exit">退出</li>', '<li class="num">4</li>', '<li class="num">5</li>', '<li class="num">6</li>', '<li class="func del">退格</li>', '<li class="num">7</li>', '<li class="num">8</li>', '<li class="num">9</li>', '<li class="func clearall">清除</li>', '<li class="num">0</li>', '<li class="num">.</li>', '<li class="func sure">确定</li>', '</ul>', '</div>', ].join("");
    // $("body").append(_html);
    // me.setPosition();
}

也许是用了某个插件对代码进行了压缩，最终的.min.js文件时用这样的方式存储的。

initHtml: function() {
    var a = ['\x3cdiv class\x3d"mykb-box" id\x3d"mykeyboard' + this.count + '"\x3e', '\x3cul class\x3d"num-key clearfix"\x3e\x3cli class\x3d"num"\x3e1\x3c/li\x3e\x3cli class\x3d"num"\x3e2\x3c/li\x3e\x3cli class\x3d"num"\x3e3\x3c/li\x3e\x3cli class\x3d"func exit"\x3e\u9000\u51fa\x3c/li\x3e\x3cli class\x3d"num"\x3e4\x3c/li\x3e\x3cli class\x3d"num"\x3e5\x3c/li\x3e\x3cli class\x3d"num"\x3e6\x3c/li\x3e\x3cli class\x3d"func del"\x3e\u9000\u683c\x3c/li\x3e\x3cli class\x3d"num"\x3e7\x3c/li\x3e\x3cli class\x3d"num"\x3e8\x3c/li\x3e\x3cli class\x3d"num"\x3e9\x3c/li\x3e\x3cli class\x3d"func clearall"\x3e\u6e05\u9664\x3c/li\x3e\x3cli class\x3d"num"\x3e0\x3c/li\x3e\x3cli class\x3d"num"\x3eX\x3c/li\x3e\x3cli class\x3d"func sure"\x3e\u786e\u5b9a\x3c/li\x3e\x3c/ul\x3e\x3c/div\x3e'].join("");
    b("body").append(a);
    this.setPosition()
}

' \x ' 是16进制的转义字符，十六进制中，数字是按'0 1 2 … 9 a b c d e f 11 12 … 19 1a 1b …'排列的，f表示十进制的16，11表示十进制的17。

由此可知 ' 3c ' 中的 3 代表 十位数，值是 3*16， c 是12 ，总60，在ASCII 编码表中，60代表' < ' ，61代表' = ' ，62代表' > ' ，在编码套在a变量

var a = ['<div class="mykb-box" id="mykeyboard"' + this.count + '">'………………

这才想起JS本就不只是能做到数据处理和交互的语言，就离谱

分享一个jquery动态渲染的数字小键盘插件：模拟数字键盘插件 mynumkb.js

- END -