mvvm的初步思想
1.Object.defineProperty(obj,key,desc);
用法:1.给对象新增属性和特性
2.修改对象属性值和特性
desc(属性特性):
1.enumerable:boolean 可枚举
2.writable :boolean 可写
3.value:any 赋值
4.get 取值
5.set 改值
2.思路:
对象的赋值和改值其实是通过Object.defineProperty的get和set特性来实现的,一般默认模式。
通过改写属性的get和set的特性,来实现对一个对象的监听。
3.举例:
var obj = {age:23};
console.log(obj.age); //23 Object.defineProperty(obj,'age',{
get(){
return 24;
}
});
console.log(obj.age); //24 obj.age = 25;
console.log(obj.age); //24
原理:对象属性和赋值取值都会触发自身的get和set特性。
4.实现:
/*js 监听器*/
var transi = "";
function observe(obj,key){
if(obj[key] && (typeof obj[key] == 'object')){
Object.keys(obj[key]).forEach((v,index)=>{
observe(obj[key],v,obj[key][v]);
});
} else {
Object.defineProperty(obj,key,{
set(newV){
transi = newV;
console.log('值改变');
},
get(){
console.log('新值为' + transi);
return transi;
}
})
}
}
var obj = {name : 'wang',age:{max:12,good:{at:30}}};
observe(window,'obj');
obj.age.good.at = 44;
console.log(obj.age.good.at);
5.延伸:
vue的双向绑定机制:当改变一个值时,在这个值的set特性中触发其他值的改变,实现数据实时更新的机制。
6.核心:
1.observer观察者: 观察一个对象,当某一属性改变时,触发set特性,由set触发与之关联的属性,哪些与之关联,怎么建立起关系?需要一个订阅者,即为一个数组,存放一些关联的对象。
2.watcher订阅者: 订阅者需要自己的更新机制,在set中被触发时需要及时更新自己的数据,再渲染到页面上,需要complier来解析页面,实现view层改变。
3.complier解析: 通过js获取指令模板,正则匹配换值,将操作封装放进set函数中实现view层自动更新。
7.数组的push、shift、concat、unshift、pop等api触发数据更新重新渲染:
数组没法像对象可以对字段的监听,若想实现监听,必然需要重写push、shift、concat、unshift、pop这些函数
方案一:
const push1 = Array.prototype.push;
Array.prototype.push = function () {
render(); //拦截进行数组render重新渲染
return push1.apply(this,arguments);
};
此方案虽然实现数组的监听,但也改变了所有数组的原型,而且不是所有数组都需要监听;
方案二:
中心思想:代理原型
var obj = Object.create(Array.prototype);
var prototypePush = Array.prototype.push;
obj.push=function () {
render(); //拦截进行数组render重新渲染
return prototypePush.apply(this,arguments);
};
var arr = [];
arr.__proto__ = obj;
mvvm的初步思想的更多相关文章
- JDBC 常用词汇以及初步思想
####JDBC程序访问数据库步骤
- 对MVVM思想的在认识
如果说MVP是对MVC的进一步改进,那么MVVM则是思想的完全变革.它是将“数据模型数据双向绑定”的思想作为核心,因此在View和Model之间没有联系,通过ViewModel进行交互,而且Model ...
- 从angularJS看MVVM
javascript厚积薄发走势异常迅猛,导致现在各种MV*框架百家争雄,MVVM从MVC演变而来,为javascript注入了全新的活力.我工作的业务不会涉及到angularJS[ng]这么重量级的 ...
- 【iOS】小项目框架设计(ReactiveCocoa+MVVM+AFNetworking+FMDB)
上一个项目使用到了ReactiveCocoa+MVVM+AFNetworking+FMDB框架设计,从最初的尝试,到后来不断思考和学习,现在对这样一个整体设计还是有了一定了理解与心得.在此与大家分享下 ...
- 浅谈MVC、MVP、MVVM架构模式的区别和联系
MVC.MVP.MVVM这些模式是为了解决开发过程中的实际问题而提出来的,目前作为主流的几种架构模式而被广泛使用. 一.MVC(Model-View-Controller) MVC是比较直观的架构模式 ...
- 完全掌握KMP算法思想
文档下载页面http://download.csdn.net/detail/yedeqixian/4209500 80页在讲KMP算法的开始先举了个例子,让我们对KMP的基本思想有了最初的认 ...
- angularJS看MVVM
从angularJS看MVVM javascript厚积薄发走势异常迅猛,导致现在各种MV*框架百家争雄,MVVM从MVC演变而来,为javascript注入了全新的活力.我工作的业务不会涉及到a ...
- js架构设计模式——从angularJS看MVVM
javascript厚积薄发走势异常迅猛,导致现在各种MV*框架百家争雄,MVVM从MVC演变而来,为javascript注入了全新的活力.我工作的业务不会涉及到 angularJS[ng] 这么重量 ...
- Unity 3D Framework Designing(1)—— MVVM 模式的设计和实施(Part 2)
MVVM回顾 经过上一篇文章的介绍,相信你对 MVVM的设计思想有所了解.MVVM的核心思想就是解耦,View与ViewModel应该感受不到彼此的存在.View只关心怎样渲染,而ViewModel只 ...
随机推荐
- eql框架。
在刚进入公司的时候,在service层的框架用的是eql,是公司内的大佬封装的,作为一个小白,真的是折磨.公司内没有任何的文档,只能靠着自己一步一步的摸索. 后来用习惯了,发现这个框架确实有自己的独到 ...
- spring MVC的流程
spring MVC的工作流程
- Win7下部署Lepus企业级MySQL数据库监控
从官网下载(http://www.lepus.cc/soft/17)安装包后,解压到phpStudy的www目录下: 打开phpStudy管理界面,找到站点管理,并新增站点: 在浏览器里面打开后,报此 ...
- 洛谷 P1219八皇后
把全部,在这251秒,赌上! ——<游戏人生zero> 题目:https://www.luogu.org/problem/P1219 八皇后是一道非常非常非常经典的深搜+回溯的题目. 这道 ...
- Git学习-上传项目到github
现在流行把项目代码上传到git上,今天试了好久,终于成功上传到git了,特做点笔记. 准备工作 在github上注册一个账号,创建一个仓库. 创建好仓库,得到它的地址: 开始上传 一.新建一个文件夹, ...
- Windows 7 上怎样打开SQL Server 配置管理器
场景 在Windows 7 上打开 SQL Server 的配置管理器. 实现 右击电脑--管理 在计算机管理--服务和应用程序-SQL Server 配置管理器 注: 博客首页: https://b ...
- charles 镜像工具
本文参考:charles 镜像工具 镜像工具会在你浏览指定网站时,把抓取到的文件克隆一份,并保存在你指定的路径下: 注意:如果你配置是www.aaa.com; 那么只会抓这个域名下的文件,这个域名如果 ...
- charles 禁用Cookies /Block Cookies Settings
本文参考:charles 禁用Cookies 禁用cookies/Block Cookies Settings 功能:阻止发送和接收Cookie 禁用Cookie工具 禁用Cookie工具阻止发送和接 ...
- Mongodb关于查询返回指定字段的方法记录
//通常指定字段由前端传入后台,例如params 前端以逗号分隔 //后端获取字段后操作如下: Query query = new Query(); if (params != null) { Str ...
- 浏览器兼容性知识&测试计划&测试报告
浏览器兼容性知识&测试计划&测试报告 浏览器兼容性问题:网页或网站兼容性问题,因为不同浏览器使用内核及所支持的HTML(标准通用标记语言下的一个应用)等网页语言标准不同:以及用户客户端 ...