if ($g) {$g.$utils || ($g.$utils = {});
} else {var $g = {};$g.$utils = {};
}
/*綁定數據神器*/
$g.$utils.bind = {a(html, obj) {return this.object(html, obj);},object(h, o) {for (var a in o) var b = o[a], h = this.set(h, a, b);return h;},set(h, l, v) {if (!h) return console.log("html傳參為空", l, v);return h.replace(new RegExp("{" + l + "}", "g"), v).replace(new RegExp("\\[" + l + "\\]", "g"), v);},sets(html, keys, vals, defaults, valsIsObject) {//defaults是當vals對應值為空的時候，默認的缺省值//valsIsObject為true的時候vals為一個對象{key:value,key:value,key:value,…}，其中key就是keys里面對應的值for (var i = 0, len = keys.length; i < len; i++) {var a = keys[i], b = valsIsObject ? vals[a] : vals[i], c = defaults ? valsIsObject ? defaults[a] : defaults[i] : null;b || c && (b = c);html = this.set(html, a, b);}return html;}
};//測試用例----------------------------------------------------------------
var html = "";
var tpl = "<li id=\"id_[id]\"><p>[label]</p></li>\n";
var arr = [{id: 1, label: "內容1"},{id: 2, label: "內容2"},{id: 3, label: "內容3"},{id: 4, label: "內容4"},{id: 5, label: "內容5"}
];
for (var i = 0, len = arr.length; i < len; i++) {var a = arr[i];html += $g.$utils.bind.a(tpl, {id: a.id, label: a.label});//JSON鍵值對應匹配綁定方式（推薦）// html += $g.$utils.bind.sets(tpl, ["id", "label"], [a.id, a.label]);//數組對應匹配綁定方式（不推薦）
}
console.log(html);
// document.querySelector("dom").innerHTML = html;

?

總結

以上是生活随笔為你收集整理的【硬核技能】舒工自创bind绑定数据方法，类似angular和vue绑定数据原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。