Detaillierte Erläuterung der Grundprinzipien der Implementierung des MVVM-Frameworks in nativem JS-js-Tutorial-php.cn

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:

Object.defineProperty

Im Allgemeinen Objekte deklarieren, Eigenschaften definieren und ändern

let obj = {}
obj.name = 'zhangsan'
obj.age = 20

Nach dem Login kopieren

Verwenden Sie ObjectdefinePropertyDeklarationsobjekt
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,
})

Nach dem Login kopieren

Auf den ersten Blick scheint es etwas überflüssig zu sein?

Keine Sorge, schauen Sie nach unten.

Deskriptor

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 enumerablefalse und kann nicht geändert werden später. Gemeinsame Attribute

Wenn auf

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

Nach dem Login kopieren

true auf

gesetzt ist, können seine internen Eigenschaften nicht durchlaufen werden; wenn eine Durchquerung erforderlich ist, setzen Sie enumerable auf falseenumerable

let obj = {name:'zhangsan'}
Object.defineProperty(obj,'age',{
    enumerable:false,
    value:20,
})
for(let key in obj){
    console.log(key)    //name
}

Nach dem Login kopieren

trueDatendeskriptor

: Der diesem Attribut entsprechende Wert, der Standardwert ist

. valueundefined: 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

Nach dem Login kopieren

false und

besteht darin, dass ersteres darin besteht, ob writable geändert werden kann, und letzteres darin besteht, ob configurable gelöscht werden kann. valuevalueSpeicherdeskriptor

: Eine Methode, die

für ein Attribut bereitstellt, standardmäßig get(). getterundefined: 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

Nach dem Login kopieren

undefinedWenn 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. ageundefined Wenn ich

setze, ruft es die Methode

auf und setzt die globale Variable obj.age = 20 auf obj.set(). age20 ruft zu diesem Zeitpunkt

an und erhält

. obj.age20

Hinweis:

Datendeskriptor und Speicherdeskriptor können nicht gleichzeitig vorhanden sein, andernfalls wird ein Fehler gemeldet

let obj = {}
let age
Object.defineProperty(obj,'age',{
    value:10,        //报错
    get:function(){
        return age
    },
    set:function(newVal){
        age = newVal
    }
})

Nach dem Login kopieren

Datenabfang

Verwenden Sie

Datenüberwachung implementieren, um eine Datenüberwachung zu erreichen.

Object.definePropertyZuerst gibt es ein Objekt

let data = {
    name:'zhangsan',
    friends:[1,2,3,4]
}

Nach dem Login kopieren

Schreiben Sie unten eine Funktion, um das

-Objekt zu überwachen, und dann können Sie intern etwas tun

observe(data)

Nach dem Login kopieren

dataMit 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.

dataNatü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    //这里注释掉了，实际设置属性就是这样写的。
            }
        })
    }
}

Nach dem Login kopieren

observeBeachten Sie zwei Punkte:

deklarieren, können wir
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 varval
ist
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.namegetdata[key]
Beobachtermodus

Ein typisches Anwendungsszenario für den Beobachtermodus – öffentliches WeChat-Konto

不同的用户（我们把它叫做观察者：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...

Nach dem Login kopieren

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...

Nach dem Login kopieren

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...

Nach dem Login kopieren

MVVM 框架的内部基本原理就是上面这些。