首页 > 代码库 > 闲来无事，实现一个只具最基本数据双向绑定的js
闲来无事，实现一个只具最基本数据双向绑定的js
近期项目内用knockoutjs。
想模拟实现数据双向绑定的基本功能。
只具有最基本的功能，且很多细节未曾考虑，也未优化精简。
能想到的缺少的模块
1事件监听，自定义访问器事件
2模版
3父子级
编码时，有两个循环陷阱。
只依赖浏览器，打开即可运行。
工作以后端和数据为主，前端较生疏，将就看吧
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <br> 9 <lable>name</lable><input type="text" data-bind="name" value="old"/><br>10 <lable>age</lable><input type="text" data-bind="value" value="18"/><br>11 <!--<lable>sex</lable><input type="text" value="http://www.mamicode.com/男"/><br>-->12 <input type="button" onclick="mvvm.bind(window.ViewModel)" value="绑定数握">13 <input type="button" onclick="mvvm.Saybind(window.ViewModel)" value="查看数据">14 <input type="button" onclick="window.ViewModel.changename()" value="改名">15 16 </body>17 <script>18 (function(win){19 window.mvvm={20 bind:function(obj){21 var inputs = document.getElementsByTagName("input");22 if(!obj.hasini){23 alert("初始化访问器")24 //为model添加访问器,目的，是model时更新UI25 for (var Property in obj) {26 (function(){27 var proname=Property;28 var priname="_"+proname;29 if(typeof obj[Property]!="function"){30 obj[priname]=obj[proname];31 obj[proname]=null;32 var setget={33 get: function () {34 return obj[priname]35 },36 set:function (value) {37 obj[priname] = value;38 for (var i = 0; i < inputs.length; i++) {39 var att = inputs[i].getAttribute("data-bind");40 if (att == proname) {41 inputs[i].value = obj[priname];42 break;43 }44 }45 }46 }47 Object.defineProperty(obj, proname, setget);48 }49 })(obj,Property)50 }51 }52 obj.hasini=true;53 alert("初始化完成")54 //为UI绑定model的值，并为UI添加事件，修改UI时更新Model值。55 for (var i = 0; i < inputs.length; i++) {56 var inputdom = inputs[i];57 var att = inputdom.getAttribute("data-bind");58 if (att != null) {59 for (var Property in obj) {60 if (Property == att) {61 // 绑定属性62 inputdom.value = obj[Property];63 // 绑定事件64 inputdom.onchange = function () {65 obj[this.getAttribute("data-bind")] = this.value;66 }67 }68 }69 }70 }71 },72 Saybind:function(obj){73 alert(obj.toString());74 }75 }76 77 })(window);78 var ViewModel={79 name:"cui",80 value:"24",81 toString:function(){82 var ps="";83 for(var Property in this){84 if(typeof this[Property]!="function")85 ps+=Property+":"+this[Property]+";"86 }87 return ps;88 },89 changename:function(){90 this.name="daming";91 }92 } ;93 94 </script>95 </html>
闲来无事，实现一个只具最基本数据双向绑定的js
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。