原生js实现MVVM框架的基本原理详解

原生js实现MVVM框架的基本原理详解在前端页面中,把Model用纯JS对象表示,View负责显示,两者做到了最大化的分离把Model和View关联起来的就是ViewModel。

大家好,欢迎来到IT知识分享网。原生js实现MVVM框架的基本原理详解

在前端页面中,把 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 //这里注释掉了,实际设置属性就是这样写的。

}

})

}

}

注意两点:

  1. 我们在声明let val = data[key]时,不能用var,因为这里需要对每个属性进行监控,用let每次遍历都会创建一个新的val,在进行赋值;如果用var,只有第一次才是声明,后面都是对一次声明val进行赋值,遍历结束后,得到的是最后一个属性,显然这不是我们需要的。
  2. get方法里,return就是前面声明的val,这里不能用data[key],会报错。因为调用data.name,就是调用get方法时,得到的结果是data.name,又继续调用get方法,就随变成死循环,所以这里需要用一个变量来存储data[key],并将这个变量返回出去。

观察者模式

一个典型的观察者模式应用场景——微信公众号

  1. 不同的用户(我们把它叫做观察者:Observer)都可以订阅同一个公众号(我们把它叫做主体:Subject)
  2. 当订阅的公众号更新时(主体),用户都能收到通知(观察者)

用代码怎么实现呢?先看逻辑:

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://yundeesoft.com/54230.html

(0)

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信