首页 > 【硬核技能】舒工自创bind绑定数据方法,类似angular和vue绑定数据原理

【硬核技能】舒工自创bind绑定数据方法,类似angular和vue绑定数据原理

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 = "
  • [label]

  • "; 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;

     

    更多相关:

    • 爬取妹子网的低级教程连接如下:[爬妹子网](https://blog.csdn.net/baidu_35085676/article/details/68958267) ps:只支持单个套图下载,不支持整体下载 在说说我的这个爬虫代码的设计思路: ①当我们浏览这个网站时,会发现,每一个页面的URL都是以网站的域名+page+页数组成,...

    • 我们在使用Nginx搭建HTTP的web server的过程中,一般都很顺利,默认的网站根目录一般是/usr/local/nginx/html,我们也可以正常访问到Nginx的欢迎信息,比如使用下面的网址: http://localhost/ 但是发现运行一段时间后,Nginx的error日志中会定期抱怨说,没有找到favicon...

    • 菜鸟教程(runoob.com)