Maison > interface Web > js tutoriel > Apprendre et comprendre le code source de vue ensemble

Apprendre et comprendre le code source de vue ensemble

零下一度
Libérer: 2017-06-26 09:50:48
original
1418 Les gens l'ont consulté

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);
    }
} //任务管理
Copier après la connexion

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(){

    }   
}
Copier après la connexion

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);
}
Copier après la connexion

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
        });
    });
});
Copier après la connexion

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;
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal