1. 程式人生 > 其它 >JS:變數儲存HTML標籤的離譜方式

JS:變數儲存HTML標籤的離譜方式

專案中有一處原始碼需要用變數儲存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 3 4 5 6 7 8 9 a b c d e f 11 12'排列的,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 + '">'………………

不得不服,就離譜