Apprendre et comprendre le code source de vue ensemble

D'après le site officiel de vue, on peut savoir que vue est un framework mvvm et qu'il est responsive. Afin de mieux comprendre sa connotation, j'ai implémenté une simple démo d'apprentissage mvvm. Partagez-le avec tout le monde ci-dessous et invitez tout le monde à en discuter.

1. Le contenu minimum inclus dans mvvm

1. Ensemble d'instructions, tel que : texte, modèle, etc.

2. modèle de données et affichage des données d'interaction

3. prise en charge du composant : c'est-à-dire mise à jour dynamique d'une partie du code html

2. Ma mise en œuvre

1. Définition des variables et mise en place de la veille

var directives = {}; //指令集合var vNodes = new Array(); //解析的Dom集合var dataModel = {
    name:"name",
    title: "title"}; //数据Modelvar Watch = {
    isInit: false,
    watchs: new Array(),
    run: function(newValue, expOrfn){ var self = this;if(!self.isInit){
            expOrfn.call(vModel);
        }this.watchs.map(function(data,index){
            data.nodes.map(function(d,i){if(self.isInit){
                    d.directive.init(newValue, d, data); //绑定初始化值， 以及初始化一些事件}else{
                    d.directive.update(newValue, d, data); //只更新值，此时run的调用来值value-set                }
            });
        });
        
        self.watchs = [];
    },
    push:function(watch){this.watchs.push(watch);
    }
} //任务管理

Explication :

1. Regarder La méthode push est utilisée pour ajouter des dépendances, puis exécutée pour exécuter toutes les dépendances. Une fois l'exécution terminée, la collection de dépendances actuelle doit être nettoyée. La collecte des dépendances dans vue se fait en dep, et la gestion des tâches assurée par watch (Je ne sais pas si je comprends bien)

2. Définition des instructions

directives.text = { 
    init: function(value, vNode){
        vNode.elm.textContent = value;
    },
    update: function(value, vNode){
        vNode.elm.textContent = value;
    }
}//需要响应事件的怎么办directives.model ={ 
    init: function(value, vNode, _watch){
        vNode.elm.value = value; //判断自己发生的改变，不应该再改变自己 vNode.elm.addEventListener('keyup',function(evt){
            vNode.model[_watch.key] = vNode.elm.value;
        }); 
    },
    update:function(){

    }   
}

Description :

1. Puisqu'il s'agit d'un exemple d'apprentissage de démonstration, seul un texte simple et Le modèle est défini. Deux spécifications, le texte : utilisé pour l'affichage des données et le modèle utilisé pour la réponse de saisie (zone de saisie)

3.

Remarque :

//转换vModel，暂支持一级var properties = Object.getOwnPropertyNames(dataModel);var vModel = {}, formSetting = false;for( var index in properties){ 
    (function refreshData(_index){var key = properties[_index];var property = Object.getOwnPropertyDescriptor(dataModel, key);var setter = property.set;var getter = property.get;var _val = property.value;var _getter = function(){var val = getter ? getter.call(vModel) : _val;//收集依赖，与watch要分开            Watch.push({
                key: key,
                nodes: vNodes.filter(function(data,index){return data.modelKey == key ? true : false;
                }),
                getter: _getter
            });return val;
        };
        Object.defineProperty(vModel, key, {
            configurable: true,
            enumerable: true,
            set: function(value){if(setter){
                    setter.call(vModel, value);
                } //处理依赖                Watch.run(value, _getter);//this.value = value;            },
            get: _getter

        })
    })(index);
}

vModel est généré sur la base de dataModel, c'est-à-dire que les méthodes get et set de chaque attribut sont personnalisées, ce qui peut également être implémenté à l'aide d'un proxy dans es6 (

1. Tu as raison ?

   ).

   Lors de la définition d'un attribut, la méthode get sera appelée en premier pour collecter les dépendances. Une fois la valeur de commodité modifiée, tout le contenu concerné peut être modifié.

2. 4. Analyser dom en tant que vNode

Instructions :

//解析vNodesvar app = document.getElementById('app');
app.childNodes.forEach(function(data,index){if(data.nodeType != 1) return;var hv = data.getAttribute('data-hv');var hvs = hv.split(',');
    hvs.forEach(function(item,row){var keyValue = item.split(':'); //vNode对象上一定要有model，这是方便vNode相应时候的找vModel        vNodes.push({
            directive: directives[keyValue[0]],
            modelKey: keyValue[1],
            model: vModel,
            elm: data
        });
    });
});

Ici, nous parlons à propos de l'analyse C'est très tiré par les cheveux pour vNode, car il collecte uniquement les instructions spécifiées par data-hv sur le dom et stocke les instructions, éléments, vModel, etc. correspondants dans un objet dans vNodes pour la méthode get de chaque attribut de vModel pour collecter les dépendances.

1. 5. Première initialisation

Instructions :

//调用所有的get一次Watch.isInit = true;var _keys = Object.getOwnPropertyNames(vModel);
_keys.map(function(key,data){var data = vModel[key];
    Watch.run(data); 
});
Watch.isInit = false;

sera initialisée La valeur de vModel est rendu au Dom. Ici, chaque get est activement exécuté, puis la méthode watch.run est exécutée.

1. Je pense que la conception et la mise en œuvre ici ne sont pas cohérentes avec les idées de vue. Si quelqu'un voit cela, veuillez me donner quelques conseils.

2. 6. Dom analysé

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!