简版mvvm框架实现
总结
-
defineProperty;
-
Proxy代理
-
数据劫持
-
AMD /CMD模块化;
-
1.利用defineProperty实现数据劫持;
-
2.利用ES6中proxy实现数据劫持
-
3.mvvm框架中编译数据到视图
-
4.实现数据驱动视图更新;
-
5.发布订阅模式;
-
6.AMD模块化require.js介绍;
defineProperty
let dep = new Dep();
Object.defineProperty(obj,'name',{
configurable: true,
enumerable: true,
writable: true,
get(){
dep.addSub(new Watcher( ()=> console.log("添加订阅了")))
return value;
},
set(newValue){
dep.notify(); //发布
value = newValue;
}
})
proxy
-
定义 :对象用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等)。
-
基本使用
let obj = new Proxy({ name: "张三", age: 20 },{ get(target, name) { return target[name]; }, set(target,name,value){ target[name] = value; } })
-
相关配置参数
has(target, propKey):拦截propKey in proxy的操作,返回一个布尔值。 defineProperty(target, propKey, propDesc):拦截Object.defineProperty(proxy, propKey, propDesc)、Object.defineProperties(proxy, propDescs),返回一个布尔值。
通过数据劫持实现表达式
- 通过defineProperty劫持数据:observer
发布订阅监听数据的更新
'''
class Dep{ //收集器
constructor(){
this.subs = [];
}
addSub(sub){
this.subs.push(sub);
}
notify(newValue)
){
this.subs.forEach(sub => sub.update(newValue)