维护老的,没有框架的项目的时候对于页面动态的一些数据修改就很烦,需要操作dom,但是引入框架又要重构,老项目重构,想想就可怕。
如果我们仅仅只是简单的实现数据的绑定,或许会简单很多。
参考大神之作:https://segmentfault.com/a/1190000021242882
//获取dom
var el = document.getElementById(htmlId);
//获取页面所有dom var template = el.innerHTML;
//重写 var data = new Proxy(chEnTextHtml[languageType], { set:function(obj, name, value) { obj[name] = value; render(); } }); render();
//使用的是双大括号,此处替换大括号内容 function render() { el.innerHTML = template.replace(/{{w+}}/g, function(str){ str = str.substring(2, str.length - 2); return chEnTextHtml[languageType][str]; }); }
但是这个是不兼容ie浏览器的,主要是proxy是es6的内容,ie浏览器是很恶心的,不兼容该方法,只能引入插件es6-proxy-polyfill使其兼容ie浏览器。
这个插件非常好用,所有用到proxy的项目都可以使用这个插件,毕竟大多数网站还是要求兼容IE的。
问题都解决了,最后还有一个问题,那就是会在页面加载的时候闪现一下自定的大括号内容:{{自定义}},在vue中可以使用v-loack来解决,jq和js中暂时没有去想怎么解决,我想可以参考vue的loack来进行解决