Maison > Article > interface Web > 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.
Ensemble d'instructions, tel que : texte, modèle, etc.
modèle de données et affichage des données d'interaction
prise en charge du composant : c'est-à-dire mise à jour dynamique d'une partie du code html
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 :
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)
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 :
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)
//转换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); }
).
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é.//解析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 }); }); });
//调用所有的get一次Watch.isInit = true;var _keys = Object.getOwnPropertyNames(vModel); _keys.map(function(key,data){var data = vModel[key]; Watch.run(data); }); Watch.isInit = false;
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!