La liaison de données JavaScript implémente une simple bibliothèque MVVM_javascript skills

Lecture recommandée :

Implémentation d'une liaison de données bidirectionnelle js très simple

MVVM est un modèle de développement très populaire pour le front-end Web. L'utilisation de MVVM peut permettre à notre code de se concentrer davantage sur le traitement de la logique métier plutôt que sur les opérations DOM. Actuellement, les célèbres frameworks MVVM incluent vue, avalon, réagissent, etc. Chacun de ces frameworks a ses propres mérites, mais l'idée d'implémentation est à peu près la même : liaison de données + actualisation de la vue. Par curiosité et volonté de bricoler, j'ai également écrit la bibliothèque MVVM la plus simple (mvvm.js) dans cette direction, avec un total de plus de 2 000 lignes de code. La dénomination et l'utilisation des instructions sont similaires à celles de vue. partagez-les ici. Parlons du principe de mise en œuvre et de mes idées d'organisation du code.

Organisation des idées

MVVM est conceptuellement un modèle qui sépare véritablement la logique des vues et des données, et ViewModel est au centre de l'ensemble du modèle. Pour implémenter ViewModel, vous devez associer le modèle de données (Model) à la vue (View). L'ensemble de l'idée d'implémentation peut être simplement résumée en 5 points :

Implémenter un compilateur pour analyser et extraire les instructions pour chaque nœud de l'élément

Implémentez un analyseur pour analyser les instructions sur l'élément et mettez à jour l'intention de l'instruction vers le dom via une fonction d'actualisation (un module spécifiquement responsable de l'actualisation de la vue peut être nécessaire au milieu), comme l'analyse du nœud623f90a3fd6e86e9b503f7bd98f6b95a94b3e26ee717c64999d7867364b1b4a3 obtenez d'abord la valeur de isShow dans le modèle, puis modifiez node.style.display en fonction de isShow pour contrôler l'affichage et le masquage de l'élément ;

Implémenter un Watcher pour connecter la fonction de rafraîchissement de chaque instruction dans Parser avec les champs du Modèle correspondant

Implémentez un observateur pour surveiller les changements de valeur de tous les champs de l'objet. Une fois qu'un changement se produit, vous pouvez obtenir la dernière valeur et déclencher un rappel de notification

Utilisez Observer pour établir une surveillance du modèle dans le Watcher. Lorsqu'une valeur dans le modèle change, la surveillance est déclenchée. Une fois que le Watcher a obtenu la nouvelle valeur, il appelle la fonction de rafraîchissement associée à l'étape 2 pour réaliser les données. . Le but de rafraîchir la vue lors du changement.

Exemple d'effet

Jetez d’abord un coup d’œil rapide à l’exemple d’utilisation final, qui est similaire à l’instanciation d’autres frameworks MVVM :

<div id="mobile-list">
<h1 v-text="title"></h1>
<ul>
<li v-for="item in brands">
<b v-text="item.name"></b>
<span v-show="showRank">Rank: {{item.rank}}</span>
</li>
</ul>
</div>
var element = document.querySelector('#mobile-list');
var vm = new MVVM(element, {
'title' : 'Mobile List',
'showRank': true,
'brands' : [
{'name': 'Apple', 'rank': 1},
{'name': 'Galaxy', 'rank': 2},
{'name': 'OPPO', 'rank': 3}
]
});
vm.set('title', 'Top 3 Mobile Rank List'); // => <h1>Top 3 Mobile Rank List</h1>

Division des modules

J'ai divisé MVVM en cinq modules à implémenter : module de compilation Compiler, module d'analyse Parser, module d'actualisation de vue Updater, module d'abonnement aux données Watcher et module d'écoute des données Observer. Le processus peut être brièvement décrit comme suit : Une fois que le compilateur a compilé les instructions, il transmet les informations d'instruction à l'analyseur Parser pour analyse. L'analyseur met à jour la valeur initiale et s'abonne à l'observateur pour les modifications de données. puis les renvoie à l'observateur. L'observateur notifie ensuite les résultats des modifications et trouve la fonction d'actualisation correspondante pour actualiser la vue.

Le processus ci-dessus est illustré dans la figure :

Ce qui suit présentera les principes de base de la mise en œuvre de ces cinq modules (seules les parties clés du code sont publiées, veuillez vous rendre sur mon Github pour lire la mise en œuvre complète)

1. Module Compilateur Compilateur

La responsabilité principale du compilateur est d'analyser et d'extraire les instructions pour chaque nœud de l'élément. Étant donné que le processus de compilation et d'analyse traversera l'intégralité de l'arborescence des nœuds plusieurs fois, afin d'améliorer l'efficacité de la compilation, l'élément est d'abord converti en un fragment de copie sous la forme d'un fragment de document à l'intérieur du constructeur MVVM. L'objet de compilation est ce fragment de document et. ne doit pas être l'élément cible. Une fois tous les nœuds compilés, les fragments de document sont rajoutés aux nœuds réels d'origine.

vm.complieElement implémente l'analyse et l'extraction d'instructions de tous les nœuds de l'élément :

vm.complieElement = function(fragment, root) {
var node, childNodes = fragment.childNodes;
// 扫描子节点
for (var i = 0; i < childNodes.length; i++) {
node = childNodes[i];
if (this.hasDirective(node)) {
this.$unCompileNodes.push(node);
}
// 递归扫描子节点的子节点
if (node.childNodes.length) {
this.complieElement(node, false);
}
}
// 扫描完成，编译所有含有指令的节点
if (root) {
this.compileAllNodes();
}
}

La méthode vm.compileAllNodes compilera chaque nœud dans this.$unCompileNodes (transmettra les informations d'instruction à Parser Après avoir compilé un nœud, supprimez-le de la file d'attente du cache et vérifiez this.$unCompileNodes .length When length ==). = 0, cela signifie que toute la compilation est terminée et que les fragments du document peuvent être ajoutés aux nœuds réels.

2. Module d'analyse d'instructions Analyseur

Lorsque le compilateur Compiler extrait les instructions de chaque nœud, elles peuvent être analysées par l'analyseur. Chaque instruction a une méthode d'analyse différente.La méthode d'analyse de toutes les instructions n'a besoin de faire que deux choses : l'une consiste à mettre à jour la valeur des données dans la vue (état initial) et l'autre consiste à abonner la fonction d'actualisation à la surveillance des modifications de le Modèle. Ici, nous prenons l'analyse du v-text comme exemple pour décrire la méthode générale d'analyse d'une instruction :

parser.parseVText = function(node, model) {
// 取得 Model 中定义的初始值 
var text = this.$model[model];
// 更新节点的文本
node.textContent = text;
// 对应的刷新函数：
// updater.updateNodeTextContent(node, text);
// 在 watcher 中订阅 model 的变化
watcher.watch(model, function(last, old) {
node.textContent = last;
// updater.updateNodeTextContent(node, text);
});
}

3. 数据订阅模块 Watcher

上个例子，Watcher 提供了一个 watch 方法来对数据变化进行订阅，一个参数是模型字段 model 另一个是回调函数，回调函数是要通过 Observer 来触发的，参数传入新值 last 和 旧值 old , Watcher 拿到新值后就可以找到 model 对应的回调（刷新函数）进行更新视图了。model 和 刷新函数是一对多的关系，即一个 model 可以有任意多个处理它的回调函数（刷新函数），比如： v-text="title" 和 v-html="title" 两个指令共用一个数据模型字段。

添加数据订阅 watcher.watch 实现方式为：

watcher.watch = function(field, callback, context) {
var callbacks = this.$watchCallbacks;
if (!Object.hasOwnProperty.call(this.$model, field)) {
console.warn('The field: ' + field + ' does not exist in model!');
return;
}
// 建立缓存回调函数的数组
if (!callbacks[field]) {
callbacks[field] = [];
}
// 缓存回调函数
callbacks[field].push([callback, context]);
}

当数据模型的 field 字段发生改变时，Watcher 就会触发缓存数组中订阅了 field 的所有回调。

4. 数据监听模块 Observer

Observer 是整个 mvvm 实现的核心基础，看过有一篇文章说 O.o (Object.observe) 将会引爆数据绑定革命，给前端带来巨大影响力，不过很可惜，ES7 草案已经将 O.o 给废弃了！目前也没有浏览器支持！所幸的是还有 Object.defineProperty 通过拦截对象属性的存取描述符(get 和 set) 可以模拟一个简单的 Observer :

// 拦截 object 的 prop 属性的 get 和 set 方法
Object.defineProperty(object, prop, {
get: function() {
return this.getValue(object, prop);
},
set: function(newValue) {
var oldValue = this.getValue(object, prop);
if (newValue !== oldValue) {
this.setValue(object, newValue, prop);
// 触发变化回调
this.triggerChange(prop, newValue, oldValue);
}
}
});

然后还有个问题就是数组操作 ( push, shift 等) 该如何监测？所有的 MVVM 框架都是通过重写该数组的原型来实现的：

observer.rewriteArrayMethods = function(array) {
var self = this;
var arrayProto = Array.prototype;
var arrayMethods = Object.create(arrayProto);
var methods = 'push|pop|shift|unshift|splice|sort|reverse'.split('|');
methods.forEach(function(method) {
Object.defineProperty(arrayMethods, method, function() {
var i = arguments.length;
var original = arrayProto[method];
var args = new Array(i);
while (i--) {
args[i] = arguments[i];
}
var result = original.apply(this, args);
// 触发回调
self.triggerChange(this, method);
return result;
});
});
array.__proto__ = arrayMethods;
}

这个实现方式是从 vue 中参考来的，觉得用的很妙，不过数组的 length 属性是不能够被监听到的，所以在 MVVM 中应避免操作 array.length

5. 视图刷新模块 Updater

Updater 在五个模块中是最简单的，只需要负责每个指令对应的刷新函数即可。其他四个模块经过一系列的折腾，把最后的成果交给到 Updater 进行视图或者事件的更新，比如 v-text 的刷新函数为：

updater.updateNodeTextContent = function(node, text) {
node.textContent = text;
}

v-bind:style 的刷新函数：

updater.updateNodeStyle = function(node, propperty, value) {
node.style[propperty] = value;
}

双向数据绑定的实现

表单元素的双向数据绑定是 MVVM 的一个最大特点之一：

其实这个神奇的功能实现原理也很简单，要做的只有两件事：一是数据变化的时候更新表单值，二是反过来表单值变化的时候更新数据，这样数据的值就和表单的值绑在了一起。

数据变化更新表单值利用前面说的 Watcher 模块很容易就可以做到：

watcher.watch(model, function(last, old) {
input.value = last;
});'

表单变化更新数据只需要实时监听表单的值得变化事件并更新数据模型对应字段即可：

var model = this.$model;
input.addEventListenr('change', function() {
model[field] = this.value;
});‘

其他表单 radio, checkbox 和 select 都是一样的原理。

以上，整个流程以及每个模块的基本实现思路都讲完了，第一次在社区发文章，语言表达能力不太好，如有说的不对写的不好的地方，希望大家能够批评指正！

结语

折腾这个简单的 mvvm.js 是因为原来自己的框架项目中用的是 vue.js 但是只是用到了它的指令系统，一大堆功能只用到四分之一左右，就想着只是实现 data-binding 和 view-refresh 就够了，结果没找这样的 javascript 库，所以我自己就造了这么一个轮子。

虽说功能和稳定性远不如 vue 等流行 MVVM 框架，代码实现可能也比较粗糙，但是通过造这个轮子还是增长了很多知识的 ~ 进步在于折腾嘛！

目前我的 mvvm.js 只是实现了最本的功能，以后我会继续完善、健壮它，如有兴趣欢迎一起探讨和改进~