欢迎大家来到IT世界,在知识的湖畔探索吧!
在前端页面中,把 Model 用纯 JS 对象表示,View 负责显示,两者做到了最大化的分离
把 Model 和 View 关联起来的就是 ViewModel。ViewModel 负责把 Model 的数据同步到 View 中显示出来,还负责把 View 的修改同步回 Model。
MVVM 的设计思想:关注 Model 的变化,让 MVVM 框架去自动更新 DOM 的状态,从而把开发者从操作 DOM 的繁琐步骤中解脱出来。
了解了 MVVM 思想后,自己用原生 JS 实现一个 MVVM 框架。
实现 MVVM 框架前先来看几个基本用法:
Object.defineProperty
普通声明对象,定义和修改属性
let obj = {}
obj.name = ‘zhangsan’
obj.age = 20
用ObjectdefineProperty声明对象
语法:
Object.defineProperty(obj,prop,descriptor)
obj:要处理的目标对象
prop:要定义或修改的属性的名称
descriptor:将被定义或修改的属性描述符
let obj = {}
Object.defineProperty(obj,’age’,{
value = 14,
})
咋一看有点画蛇添足,这不很鸡肋嘛
别急,往下看
描述符
descriptor有两种形式:数据描述符和存储描述符,他们两个共有属性:
configurable,是否可删除,默认为false,定义后无法修改
enumerable,是否可遍历,默认为false,定以后无法修改
共有属性
configurable设置为false时,其内部属性无法用delete删除;如要删除,需要把configurable设置为true。
let obj = {}
Object.defineProperty(obj,’age’,{
configurable:false,
value:20,
})
delete obj.age //false
enumerable设置为false时,其内部属性无法遍历;如需遍历,要把enumerable设置为true
let obj = {name:’zhangsan’}
Object.defineProperty(obj,’age’,{
enumerable:false,
value:20,
})
for(let key in obj){
console.log(key) //name
}
数据描述符
value:该属性对应的值,默认为undefined。
writable:当且紧当为true时,value才能被赋值运算符改变。默认为false。
let obj = {}
Object.defineProperty(obj,’age’,{
value:10,
writable:false
})
obj.age = 11
obj.age //10
writable和configurable的区别是前者是value能否被修改,后者是value能否被删除。
存储描述符
get():一个给属性提供getter的方法,默认为undefined。
set():一个给属性提供setter的方法,默认为undefined。
let obj = {}
let age
Object.defineProperty(obj,’age’,{
get:function(){
return age
},
set:function(newVal){
age = newVal
}
})
obj.age = 20
obj.age //20
当我调用obj.age时,其实是在向obj对象要age这个属性,它会干嘛呢?它会调用obj.get()方法,它会找到全局变量age,得到undefined。
当我设置obj.age = 20时,它会调用obj.set()方法,将全局变量age设置为20。
此时在调用obj.age,得到20。
注意:数据描述符和存储描述符不能同时存在,否则会报错
let obj = {}
let age
Object.defineProperty(obj,’age’,{
value:10, //报错
get:function(){
return age
},
set:function(newVal){
age = newVal
}
})
数据拦截
使用Object.defineProperty来实现数据拦截,从而实现数据监听。
首先有一个对象
let data = {
name:’zhangsan’,
friends:[1,2,3,4]
}
下面写一个函数,实现对data对象的监听,就可以在内部做一些事情
observe(data)
换句话说,就是data内部的属性都被我们监控的,当调用属性时,就可以在上面做些手脚,使得返回的值变掉;当设置属性时,不给他设置。
当然这样做很无聊,只是想说明,我们可以在内部做手脚,实现我们想要的结果。
那observe这个函数应该怎么写呢?
function observe(data){
if(!data || typeof data !== ‘object’)return //如果 data 不是对象,什么也不做,直接跳出,也就是说只对 对象 操作
for(let key in data){ //遍历这个对象
let val = data[key] //得到这个对象的每一个`value`
if(typeof val === ‘object’){ //如果这个 value 依然是对象,用递归的方式继续调用,直到得到基本值的`value`
observe(val)
}
Object.defineProperty(data,key,{ //定义对象
configurable:true, //可删除,原本的对象就能删除
enumerable:true, //可遍历,原本的对象就能遍历
get:function(){
console.log(‘这是假的’) //调用属性时,会调用 get 方法,所以调用属性可以在 get 内部做手脚
//return val //这里注释掉了,实际调用属性就是把值 return 出去
},
set:function(newVal){
console.log(‘我不给你设置。。。’) //设置属性时,会调用 set 方法,所以设置属性可以在 set 内部做手脚
//val = newVal //这里注释掉了,实际设置属性就是这样写的。
}
})
}
}
注意两点:
- 我们在声明let val = data[key]时,不能用var,因为这里需要对每个属性进行监控,用let每次遍历都会创建一个新的val,在进行赋值;如果用var,只有第一次才是声明,后面都是对一次声明val进行赋值,遍历结束后,得到的是最后一个属性,显然这不是我们需要的。
- get方法里,return就是前面声明的val,这里不能用data[key],会报错。因为调用data.name,就是调用get方法时,得到的结果是data.name,又继续调用get方法,就随变成死循环,所以这里需要用一个变量来存储data[key],并将这个变量返回出去。
观察者模式
一个典型的观察者模式应用场景——微信公众号
- 不同的用户(我们把它叫做观察者:Observer)都可以订阅同一个公众号(我们把它叫做主体:Subject)
- 当订阅的公众号更新时(主体),用户都能收到通知(观察者)
用代码怎么实现呢?先看逻辑:
Subject 是构造函数,new Subject()创建一个主题对象,它维护订阅该主题的一个观察者数组数组(举例来说:Subject 是腾讯推出的公众号,new Subject() 是一个某个机构的公众号——新世相,它要维护订阅这个公众号的用户群体)
主题上有一些方法,如添加观察者addObserver、删除观察者removeObserver、通知观察者更新notify(举例来说:新世相将用户分为两组,一组是忠粉就是 addObserver,一组是黑名单就是:removeObserver,它在忠粉组可以添加用户,可以在黑名单里拉黑一些杠精,如果有福利发放,它就会统治忠粉里的用户:notify)
Observer 是构造函数,new Observer() 创建一个观察者对象,该对象有一个update方法(举例来说:Observer 是忠粉用户群体,new Observer() 是某个具体的用户——小王,他必须要打开流量才能收到新世相的福利推送:updata)
当调用notify时实际上调用全部观察者observer自身的update方法(举例来说:当新世相推送福利时,它会自动帮忠粉组的用户打开流量,这比较极端,只是用来举例)
ES5 写法:
function Subject(){
this.observers = []
}
Subject.prototype.addObserver = function(observer){
this.observers.push(observer)
}
Subject.prototype.removeObserver = function(observer){
let index = this.observers.indexOf(observer)
if(index > -1){
this.observers.splice(index,1)
}
}
Subject.prototype.notify = function(){
this.observers.forEach(observer=>{
observer.update()
})
}
function Observer(name){
this.name = name
this.update = function(){
console.log(name + ‘ update…’)
}
}
let subject = new Subject() //创建主题
let observer1 = new Observer(‘xiaowang’) //创建观察者1
subject.addObserver(observer1) //主题添加观察者1
let observer2 = new Observer(‘xiaozhang’) //创建观察者2
subject.addObserver(observer2) //主题添加观察者2
subject.notify() //主题通知观察者
/**** 输出 *****/
hunger update…
valley update…
ES6 写法:
class Subject{
constructor(){
this.observers = []
}
addObserver(observer){
this.observers.push(observer)
}
removeObserver(observer){
let index = this.observers.indexOf(observer)
if(index > -1){
this.observers.splice(index,1)
}
}
notify(){
this.observers.forEach(observer=>{
observer.update()
})
}
}
class Observer{
constructor(name){
this.name = name
this.update = function(){
console.log(name + ‘ update…’)
}
}
}
let subject = new Subject() //创建主题
let observer1 = new Observer(‘xiaowang’) //创建观察者1
subject.addObserver(observer1) //主题添加观察者1
let observer2 = new Observer(‘xiaozhang’) //创建观察者2
subject.addObserver(observer2) //主题添加观察者2
subject.notify() //主题通知观察者
/**** 输出 *****/
hunger update…
valley update…
ES5 和 ES6 写法效果一样,ES5 的写法更好理解,ES6 只是个语法糖
主题添加观察者的方法subject.addObserver(observer)很繁琐,直接给观察者下方权限,给他们增加添加进忠粉组的权限
class Observer{
constructor() {
this.update = function() {
console.log(name + ‘ update…’)
}
}
subscribeTo(subject) { //只要用户订阅了主题就会自动添加进忠粉组
subject.addObserver(this) //这里的 this 是 Observer 的实例
}
}
let subject = new Subject()
let observer = new Observer(‘lisi’)
observer.subscribeTo(subject) //观察者自己订阅忠粉分组
subject.notify()
/****** 输出 *******/
lisi update…
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://itzsg.com/76648.html