這篇文章帶給大家的內容是關於原生JS實作MVVM框架的基本原理詳解,有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
在前端頁面中,把 Model 用純 JS 物件表示,View 負責顯示,兩者做到了最大化的分離
把 Model 和 View 關聯起來的就是 ViewModel。 ViewModel 負責把 Model 的資料同步到 View 中顯示出來,也負責把 View 的修改同步回 Model。
MVVM 的設計想法:專注於 Model 的變化,讓 MVVM 框架去自動更新 DOM 的狀態,從而把開發者從操作 DOM 的繁瑣步驟中解脫出來。
了解了 MVVM 想法後,自己用原生 JS 實作一個 MVVM 框架。
實作MVVM 框架前先來看幾個基本用法:
普通宣告對象,定義和修改屬性
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
方法(举例来说:当新世相推送福利时,它会自动帮忠粉组的用户打开流量,这比较极端,只是用来举例)
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...
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...
MVVM 框架的内部基本原理就是上面这些。
相关推荐:
以上是原生js實作MVVM框架的基本原理詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!