JS012. 变量存储含class、id等其他属性的标签元素(动态渲染DOM结点)
阅读原文时间:2023年07月08日阅读:2

项目中有一处源码需要用变量存储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 -

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器