Object.defineproperty实现数据和视图的联动 ------是不是就是 Angular 模型和视图的同步的实现方式???
参考:http://www.cnblogs.com/oceanxing/p/3938443.html
-----------------------------------------------------------------
这里的一篇文章讲的是 javascript 中的依赖注入:
http://www.jb51.net/article/62425.htm
http://www.oschina.net/code/snippet_1181081_35136
计算机编程的世界其实就是一个将简单的部分不断地抽象,并将这些抽象组织起来的过程。
依赖注入解决的正是 如何有效组织代码依赖的模块的问题。
------------------------------------------------------------------
前端 MVC 的实现,其中可能用到一个知识点。
Object.defineProperty 语法
var o = {}; // 创建一个新对象 // Example of an object property added with defineProperty with a data property descriptor
Object.defineProperty(o, "a", {value : 37,
writable : true,
enumerable : true,
configurable : true});
// 对象o拥有了属性a,值为37 // Example of an object property added with defineProperty with an accessor property descriptor
var bValue;
Object.defineProperty(o, "b", {get : function(){ return bValue; },
set : function(newValue){ bValue = newValue; },
enumerable : true,
configurable : true});
o.b = 38;
// 对象o拥有了属性b,值为38 // The value of o.b is now always identical to bValue, unless o.b is redefined // 数据描述符和存取描述符不能混合使用
Object.defineProperty(o, "conflict", { value: 0x9f91102,
get: function() { return 0xdeadbeef; } });
// throws a TypeError: value appears only in data descriptors, get appears only in accessor descriptors
The value of o.b is now always identical to bValue, unless o.b is redefined
数据和视图联动
给对象o定义新的属性b,并且定义属性b的get和set方法,当o.b的时候会调用b属性的get方法,给b属性赋值的时候,会调用set方法,这就是修改数据的时候,视图会自动更新的关键
前端获取数据后,需要根据数据操作dom,视图变化后,需要修改不少代码,有没有方法将数据和dom操作隔离,看一个例子
显示用户信息的html模版
<div>
<p>你好,<span id='nickName'></span></p>
<div id="introduce"></div>
</div>
视图控制器
//视图控制器
var userInfo = {};
Object.defineProperty(userInfo, "nickName", {
get: function(){
return document.getElementById('nickName').innerHTML;
},
set: function(nick){
document.getElementById('nickName').innerHTML = nick;
}
});
Object.defineProperty(userInfo, "introduce", {
get: function(){
return document.getElementById('introduce').innerHTML;
},
set: function(introduce){
document.getElementById('introduce').innerHTML = introduce;
}
})
//数据
//todo 获取用户信息的代码 userInfo.nickName = "xxx";
userInfo.introduce = "我是xxx,我来自云南,..."
设置userInfo的nickName属性时会调用set方法,更新dom节点的html
浏览器访问 test.html,运行的效果如下图:
更新模型,视图同步更新
Object.defineproperty实现数据和视图的联动 ------是不是就是 Angular 模型和视图的同步的实现方式???的更多相关文章
- Object.defineproperty实现数据和视图的联动
Object.defineproperty语法 var o = {}; // 创建一个新对象 // Example of an object property added with definePro ...
- 利用object.defineProperty实现数据与视图绑定
如今比较火的mvvm框架,例如vue就是利用es5的defineProperty来实现数据与视图绑定的,下面我来介绍一下defineProperty的用法. var people= {} Object ...
- vue Object.defineProperty Proxy 数据双向绑定
Object.defineProperty 虽然已经能够实现双向绑定了,但是他还是有缺陷的. 只能对属性进行数据劫持,所以需要深度遍历整个对象 对于数组不能监听到数据的变化 虽然 Vue 中确实能检测 ...
- 前端数据双向绑定原理:Object.defineProperty()
Object.definedProperty方法可以在一个对象上直接定义一个新的属性.或修改一个对象已经存在的属性,最终返回这个对象. Object.defineProperty(obj, prop, ...
- Vue双向绑定的实现原理系列(一):Object.defineproperty
了解Object.defineProperty() github源码 Object.defineProperty()方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. ...
- vue实现双向数据绑定之Object.defineProperty()篇
前言 vue.js中使用ES5的Object.defineProperty()实现数据的双向绑定 Object.defineProperty()原理 Object.defineProperty()可以 ...
- Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象。
Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. 语法EDIT Object.defineProperty(obj, ...
- JavaScript Object.defineProperty()方法详解
Object.defineProperty() 方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. 语法 Object.defineProperty(obj, prop ...
- Object.defineProperty使用技巧
Object.definedProperty 该方法允许精确添加或修改对象的属性.通过赋值操作添加的普通属性是可枚举的,能够在属性枚举期间呈现出来(for...in 或 Object.keys 方法) ...
随机推荐
- Self Numbers
Self Numbers Time Limit : 20000/10000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) Tota ...
- .htaccess重写URL讲解
使用ThinkPHP和Laravel等框架的都知道,所以的请求都需要经过index.php文件入口,无论你的URI是什么. 当然除了访问的是静态文件或者访问路径的文件真实存在,例如你访问xxx.com ...
- [转载] 关于Windows Boot Manager、Bootmgfw.efi、Bootx64.efi、bcdboot.exe 的详解
原帖: http://bbs.wuyou.net/forum.php?mod=viewthread&tid=303679 前言:1.本教程针对于UEFI启动来叙述的,根据普遍的支持UEFI的机 ...
- linux下如何开放80端口
linux清屏命令:clear linux版本:CentOS6.5 1.开启80端口命令:/sbin/iptables -I INPUT -p tcp --dport 80 -j ACCEPT2.保存 ...
- C: Run a System Command and Get Output? 在C程序中调用工具,并且得到结果。
现在在做一个WIFI API相关的库,这样就可以让其他的人管理WIFI. 在调用API的时候要回复SHELL打印的信息,比如说搜索热点,而且不在SHELL中打印出来.然后把信息返回给调用API的程序. ...
- ASP MVC之参数传递
1.URL获取参数 Request.QueryString["XqType"]; 2.表单提交,control层获取参数:Request.Form["XXX" ...
- Java NIO Related
A file's status is 3-valued: The file is verified to exist; The file is verified to not exist; The f ...
- iOS 6 Passbook 入门 1/2
http://www.raywenderlich.com/zh-hans/23066/ios-6-passbook-%E5%85%A5%E9%97%A8-12 iOS 6 Passbook 入门 1/ ...
- java 线程的同步
Example12_7.java public class Example12_7 { public static void main(String args[]) { Bank bank = new ...
- Contest - 多校训练(985专场) Problem C: 985的方格难题
题目链接:http://acm.zzuli.edu.cn/zzuliacm/problem.php?cid=1157&pid=2 Description 985走入了一个n * n的方格地图, ...