Explication détaillée des principes de base de la mise en œuvre du framework MVVM en js natif-js tutoriel-php.cn

Le contenu de cet article est une explication détaillée des principes de base de la mise en œuvre du framework MVVM dans JS natif. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Dans la page front-end, le Modèle est représenté par un objet JS pur, et la Vue est responsable de l'affichage. Les deux sont maximisés en séparation

Le ViewModel est ce qui associe le Modèle. et la vue. ViewModel est responsable de la synchronisation des données du modèle avec View pour l'affichage, et est également responsable de la synchronisation des modifications de View avec le modèle.

L'idée de conception de MVVM : faites attention aux changements dans le modèle et laissez le framework MVVM mettre à jour automatiquement l'état du DOM, libérant ainsi les développeurs des étapes fastidieuses d'exploitation du DOM.

Après avoir compris l'idée de MVVM, j'ai implémenté un framework MVVM utilisant du JS natif.

Avant d'implémenter le framework MVVM, examinons quelques utilisations de base :

Object.defineProperty

Déclarez généralement les objets, définissez et modifiez les propriétés

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

Copier après la connexion

Déclaration d'un objet avec ObjectdefineProperty
Syntaxe :

Object.defineProperty(obj,prop,descriptor)

obj : l'objet cible à traiter

prop : le objet à définir ou à modifier Le nom de l'attribut

descriptor : le descripteur de l'attribut à définir ou à modifier

let obj = {}
Object.defineProperty(obj,'age',{
    value = 14,
})

Copier après la connexion

À première vue, cela semble un peu superflu. Est-ce inutile ?

Ne vous inquiétez pas, en regardant vers le bas, le

descripteur

descriptor a deux formes : le descripteur de données et le descripteur de stockage, tous deux partagent des attributs :

configurable, s'il peut être supprimé, la valeur par défaut est false, et

enumerable ne peut pas être modifié après définition. S'il peut être parcouru, la valeur par défaut est false. , et il ne peut pas être modifié après la définition.

Attributs partagés

est défini sur configurable, ses attributs internes ne peuvent pas être supprimés à l'aide de false ; cela, vous devez définir delete sur configurable. Lorsque true

let obj = {}
Object.defineProperty(obj,'age',{
    configurable:false,
    value:20,
})
delete obj.age         //false

Copier après la connexion

est défini sur enumerable, ses propriétés internes ne peuvent pas être parcourues ; si la traversée est requise, définissez false sur enumerabletrue

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

Copier après la connexion

données. description Symboles

: la valeur correspondant à cet attribut, la valeur par défaut est value. undefined
: Quand et immédiatement si c'est writable, true peut être modifié par l'opérateur d'affectation. La valeur par défaut est value. La différence entre false

let obj = {}
Object.defineProperty(obj,'age',{
    value:10,
    writable:false
})
obj.age = 11
obj.age        //10

Copier après la connexion

et writable est que le premier est de savoir si configurable peut être modifié, et le second est de savoir si value peut être supprimé. value

Descripteur de stockage

: Une méthode qui fournit get() à un attribut, par défaut getter. undefined
: Une méthode qui fournit set() à un attribut. La valeur par défaut est 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

Copier après la connexion

Quand j'appelle

, je demande en fait à l'objet obj.age l'attribut obj Que va-t-il faire ? Il appellera la méthode age, il trouvera la variable globale obj.get() et obtiendra age. undefined

Lorsque je définis

, il appelle la méthode obj.age = 20, définissant la variable globale obj.set() sur age. 20

appelle

à ce moment-là et obtient obj.age. 20

Remarque : Le descripteur de données et le descripteur de stockage ne peuvent pas exister en même temps, sinon une erreur sera signalée

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

Copier après la connexion

Interception de données

Utiliser

mettre en œuvre l'interception des données pour réaliser la surveillance des données. Object.defineProperty

Il y a d'abord un objet

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

Copier après la connexion

Écrivez une fonction ci-dessous pour surveiller l'objet

, puis vous pourrez faire quelque chose en internedata

observe(data)

Copier après la connexion

Changer en d'autres termes, les propriétés à l'intérieur de

sont toutes surveillées par nous. Lorsque les propriétés sont appelées, nous pouvons leur appliquer quelques astuces pour modifier les valeurs renvoyées lorsque les propriétés sont définies, elles ne le sont pas. data

Bien sûr, c'est ennuyeux, cela veut juste montrer que nous pouvons manipuler en interne pour obtenir les résultats que nous souhaitons.

Alors

comment dois-je écrire cette fonction ? 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    //这里注释掉了，实际设置属性就是这样写的。
            }
        })
    }
}

Copier après la connexion

Notez deux points :

Lorsque nous déclarons
, nous ne pouvons pas utiliser let val = data[key], car chaque attribut doit être surveillé ici. Utiliser <.> Chaque fois qu'il traverse, un nouveau var sera créé et attribué ; si vous utilisez let, seule la première fois est une instruction, et les instructions suivantes seront affectées à une instruction val après le parcours. terminé, vous obtenez le dernier attribut, ce n'est évidemment pas ce dont nous avons besoin. Dans la méthode varval
,
est le get précédemment déclaré qui ne peut pas être utilisé ici, et une erreur sera signalée. Parce qu'appeler return signifie appeler la méthode val, le résultat est data[key], et continuer à appeler la méthode data.name deviendra une boucle infinie, donc une variable est nécessaire pour stocker get, et renvoyer cette variable . data.namegetdata[key]
Mode Observateur

Un scénario d'application typique du mode observateur - Compte public WeChat

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

Copier après la connexion

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

Copier après la connexion

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

Copier après la connexion

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