Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Grundprinzipien der Implementierung des MVVM-Frameworks in nativem JS
Der Inhalt dieses Artikels ist eine detaillierte Erläuterung der Grundprinzipien der Implementierung des MVVM-Frameworks in nativem JS. Ich hoffe, dass er für Sie hilfreich ist.
Auf der Front-End-Seite wird das Modell als reines JS-Objekt dargestellt und die Ansicht ist für die Anzeige verantwortlich. Die beiden werden getrennt maximiert.
Das ViewModel verknüpft das Modell und die Aussicht. ViewModel ist für die Synchronisierung von Modelldaten mit View zur Anzeige sowie für die Synchronisierung von View-Änderungen zurück mit Model verantwortlich.
Die Designidee von MVVM: Achten Sie auf Änderungen im Modell und lassen Sie das MVVM-Framework den Status des DOM automatisch aktualisieren, wodurch Entwickler von den umständlichen Schritten des DOM-Betriebs befreit werden.
Nachdem ich die Idee von MVVM verstanden hatte, implementierte ich ein MVVM-Framework mit nativem JS.
Bevor wir das MVVM-Framework implementieren, schauen wir uns einige grundlegende Verwendungen an:
Im Allgemeinen Objekte deklarieren, Eigenschaften definieren und ändern
let obj = {} obj.name = 'zhangsan' obj.age = 20
Verwenden Sie ObjectdefineProperty
Deklarationsobjekt
Syntax:
Object.defineProperty(obj,prop,descriptor)
obj
: Das zu verarbeitende Zielobjekt
prop
: Das zu verarbeitende Attribut definierter oder geänderter Name
descriptor
: Zu definierender oder zu ändernder Attributdeskriptor
let obj = {} Object.defineProperty(obj,'age',{ value = 14, })
Auf den ersten Blick scheint es etwas überflüssig zu sein?
Keine Sorge, schauen Sie nach unten.
descriptor
hat zwei Formen: Datendeskriptor und Speicherdeskriptor. Beide haben gemeinsame Attribute:
configurable
Es kann gelöscht werden. Der Standardwert ist false
und kann nach der Definition nicht geändert werden. Der Standardwert ist enumerable
false
und kann nicht geändert werden später. Gemeinsame Attribute
gesetzt, können die internen Attribute nicht mit configurable
gelöscht werden. Wenn Sie sie löschen möchten, müssen Sie false
auf delete
setzen. Wenn configurable
let obj = {} Object.defineProperty(obj,'age',{ configurable:false, value:20, }) delete obj.age //false
true
auf gesetzt ist, können seine internen Eigenschaften nicht durchlaufen werden; wenn eine Durchquerung erforderlich ist, setzen Sie enumerable
auf false
enumerable
let obj = {name:'zhangsan'} Object.defineProperty(obj,'age',{ enumerable:false, value:20, }) for(let key in obj){ console.log(key) //name }
true
Datendeskriptor : Der diesem Attribut entsprechende Wert, der Standardwert ist . value
undefined
: Wann und sofort, wenn es
ist, kann writable
vom Zuweisungsoperator geändert werden. Der Standardwert ist true
. Der Unterschied zwischen value
let obj = {} Object.defineProperty(obj,'age',{ value:10, writable:false }) obj.age = 11 obj.age //10
false
und besteht darin, dass ersteres darin besteht, ob writable
geändert werden kann, und letzteres darin besteht, ob configurable
gelöscht werden kann. value
value
Speicherdeskriptor
für ein Attribut bereitstellt, standardmäßig get()
. getter
undefined
: Eine Methode, die
für ein Attribut bereitstellt. Der Standardwert ist set()
. setter
let obj = {} let age Object.defineProperty(obj,'age',{ get:function(){ return age }, set:function(newVal){ age = newVal } }) obj.age = 20 obj.age //20
undefined
Wenn ich aufrufe, frage ich tatsächlich das -Objekt nach dem obj.age
-Attribut. Was wird es tun? Es ruft die Methode obj
auf, findet die globale Variable age
und ruft obj.get()
ab. age
undefined
Wenn ich
auf und setzt die globale Variable obj.age = 20
auf obj.set()
. age
20
ruft zu diesem Zeitpunkt
. obj.age
20
Datendeskriptor und Speicherdeskriptor können nicht gleichzeitig vorhanden sein, andernfalls wird ein Fehler gemeldetlet obj = {}
let age
Object.defineProperty(obj,'age',{
value:10, //报错
get:function(){
return age
},
set:function(newVal){
age = newVal
}
})
Datenabfang
Object.defineProperty
Zuerst gibt es ein Objekt
let data = { name:'zhangsan', friends:[1,2,3,4] }
Schreiben Sie unten eine Funktion, um das
-Objekt zu überwachen, und dann können Sie intern etwas tunobserve(data)
data
Mit anderen Worten, Die internen Attribute werden alle von uns überwacht. Beim Aufrufen des Attributs können wir einige Tricks anwenden, um den zurückgegebenen Wert zu ändern. data
Natürlich ist das langweilig, es soll nur zeigen, dass wir intern manipulieren können, um die gewünschten Ergebnisse zu erzielen.
Dann
wie soll ich diese Funktion schreiben?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 //这里注释掉了,实际设置属性就是这样写的。 } }) } }
observe
Beachten Sie zwei Punkte:
nicht verwenden, da hier jedes Attribut überwacht werden muss, verwenden Sie let val = data[key]
Bei jedem Durchlauf wird ein neues var
erstellt und zugewiesen. Wenn Sie let
verwenden, handelt es sich nur beim ersten Mal um eine Anweisung, und nachfolgende Anweisungen werden einer Anweisung val
zugewiesen ist Das letzte Attribut, das ist offensichtlich nicht das, was wir brauchen. In der Methode var
val
das zuvor deklarierte get
, das hier nicht verwendet werden kann und ein Fehler gemeldet wird. Da der Aufruf von return
den Aufruf der Methode val
bedeutet, ist das Ergebnis data[key]
, und der weitere Aufruf der Methode data.name
wird zu einer Endlosschleife, sodass eine Variable zum Speichern von get
und zum Zurückgeben dieser Variablen erforderlich ist . 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 框架的内部基本原理就是上面这些。
相关推荐:
Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Grundprinzipien der Implementierung des MVVM-Frameworks in nativem JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!