Utilisez Object.defineProperty pour implémenter des compétences simples de liaison_javascript bidirectionnelles js

Origine

Il y a quelques jours, j'examinais l'implémentation de certains mini frameworks mvvm populaires (tels que des frameworks plus légers tels que avalon.js et vue.js, plutôt que des frameworks plus lourds tels que Angularjs et Emberjs). Les frameworks mvvm populaires modernes suppriment généralement la liaison de données bidirectionnelle comme argument de vente du framework lui-même (Ember.js ne semble pas prendre en charge la liaison de données bidirectionnelle.), et chaque framework a des méthodes de mise en œuvre de liaison de données bidirectionnelles. Les liaisons ne sont pas cohérentes. Par exemple, Anguarjs utilise une vérification sale en interne, alors que l'essence de la méthode d'implémentation interne d'avalon.js est de définir des accesseurs de propriété.

Je ne vais pas discuter ici de la mise en œuvre spécifique de la liaison de données bidirectionnelle par chaque framework. Je parlerai uniquement de plusieurs méthodes courantes de mise en œuvre de la liaison de données bidirectionnelle sur le front-end et me concentrerai sur la sélection technologique de. avalon.js pour implémenter le type de liaison de données bidirectionnelle.

Mise en œuvre générale de la liaison de données bidirectionnelle

Tout d’abord, parlons de ce qu’est la liaison de données bidirectionnelle frontale. Pour faire simple, il s'agit de la couche contrôleur du framework (la couche contrôleur est ici un terme général, qui peut être compris comme le middleware qui contrôle le comportement de la vue et contacte la couche modèle) et la couche de présentation de l'interface utilisateur (couche vue) pour établir un canal de données bidirectionnel. Lorsqu'un changement se produit dans l'un ou l'autre calque, l'autre calque effectuera automatiquement les modifications correspondantes immédiatement (ou apparemment immédiatement).

De manière générale, pour réaliser cette relation de liaison de données bidirectionnelle (le processus d'association entre la couche contrôleur et la couche d'affichage), il existe actuellement trois façons sur le front-end,

1.Vérification sale

2. Mécanisme d'observation

3. Accesseur de propriété encapsulé

Vérification sale

Nous disons que l'implémentation technique de la liaison de données bidirectionnelle dans Angularjs (fait ici spécifiquement référence à la version AngularJS 1.x.x, et non à la version AngularJS 2.x.x) est une vérification sale. Le principe général est qu'Angularjs maintiendra une vérification sale. séquence en interne pour combiner tous les attributs requis. Les attributs surveillés sont placés dans cette séquence. Lorsque certains événements se produisent (notez que cela n'est pas planifié mais déclenché par certains événements spéciaux), Angularjs appellera la méthode $digest. La logique interne de cette méthode est de. traverse Tous les observateurs comparent les attributs surveillés pour voir si leurs valeurs d'attribut ont changé avant et après l'appel de la méthode. S'ils changent, le gestionnaire correspondant est appelé. Il existe de nombreux articles sur Internet qui analysent les principes de mise en œuvre de la liaison de données bidirectionnelle Angularjs, comme cet article, cet article, etc.

L'inconvénient de cette méthode est évident. Le parcours et la formation des observateurs sont très gourmands en performances, surtout lorsque le nombre de moniteurs sur une seule page atteint un ordre de grandeur.

Mécanisme d'observation

Le blogueur a déjà publié un article réimprimé et traduit. Les modifications de liaison de données apportées par Object.observe() concernent l'utilisation de la méthode Object.observe dans ECMAScript7 pour surveiller et observer les objets (ou leurs propriétés une fois qu'ils sont quand). un changement se produit, le gestionnaire correspondant sera exécuté.

C'est actuellement le moyen le plus idéal pour surveiller les modifications des données d'attribut. Le langage (navigateur) le prend en charge de manière native. Il n'y a rien de mieux que cela. Le seul regret est que l’ampleur actuelle du soutien ne soit pas suffisante et qu’elle doive être pleinement encouragée.

Accesseur de propriété encapsulé

Il existe un concept de méthode magique en PHP, comme les méthodes __get() et __set() en PHP. Il existe un concept similaire en JavaScript, mais cela ne s'appelle pas une méthode magique, mais un accesseur. Jetons un coup d'œil à un exemple de code,

var data = {
name: "erik",
getName: function() {
return this.name;
},
setName: function(name) {
this.name = name;
}
};

从上面的代码中我们可以管中窥豹，比如 data 中的 getName() 和 setName() 方法，我们可以简单的将其看成 data.name 的访问器（或者叫做 存取器 ）。

其实，针对上述的代码，更加严格一点的话，不允许直接访问 data.name 属性，所有对 data.name 的读写都必须通过 data.getName() 和 data.setName() 方法。所以，想象一下，一旦某个属性不允许对其进行直接读写，而必须是通过访问器进行读写时，那么我当然通过重写属性的访问器方法来做一些额外的情，比如属性值变更监控。使用属性访问器来做数据双向绑定的原理就是在此。

这种方法当然也有弊端，最突出的就是每添加一个属性监控，都必须为这个属性添加对应访问器方法，否则这个属性的变更就无法捕获。

Object.defineProperty 方法

国产mvvm框架avalon.js实现数据双向绑定的原理就是属性访问器。不过它当然不会像上述示例代码一样原始。它使用了ECMAScript5.1（ECMA-262）中定义的标准属性 Object.defineProperty 方法。针对国内行情，部分还不支持 Object.defineProperty 低级浏览器采用VBScript作了完美兼容，不像其他的mvvm框架已经逐渐放弃对低端浏览器的支持。

我们先来MDN上对 Object.defineProperty 方法的定义，

The Object.defineProperty() method defines a new property directly on an object, or modifies an existing property on an object, and returns the object.

意义很明确， Object.defineProperty 方法提供了一种直接的方式来定义对象属性或者修改已有对象属性。其方法原型如下，

Object.defineProperty(obj, prop, descriptor)

其中，

obj ，待修改的对象
prop ，带修改的属性名称
descriptor ，待修改属性的相关描述
descriptor 要求传入一个对象，其默认值如下，

/**
* @{param} descriptor
*/
{
configurable: false,
enumerable: false,
writable: false,
value: null,
set: undefined,
get: undefined
}

configurable ，属性是否可配置。可配置的含义包括：是否可以删除属性（ delete ），是否可以修改属性的 writable 、 enumerable 、 configurable 属性。

enumerable ，属性是否可枚举。可枚举的含义包括：是否可以通过 for...in 遍历到，是否可以通过 Object.keys() 方法获取属性名称。

writable ，属性是否可重写。可重写的含义包括：是否可以对属性进行重新赋值。

value ，属性的默认值。

set ，属性的重写器（暂且这么叫）。一旦属性被重新赋值，此方法被自动调用。

get ，属性的读取器（暂且这么叫）。一旦属性被访问读取，此方法被自动调用。

下面来一段示例代码，

var o = {};
Object.defineProperty(o, 'name', {
value: 'erik'
});
console.log(Object.getOwnPropertyDescriptor(o, 'name')); // Object {value: "erik", writable: false, enumerable: false, configurable: false}
Object.defineProperty(o, 'age', {
value: 26,
configurable: true,
writable: true
});
console.log(o.age); // 26
o.age = 18;
console.log(o.age); // 18. 因为age属性是可重写的
console.log(Object.keys(o)); // []. name和age属性都不是可枚举的
Object.defineProperty(o, 'sex', {
value: 'male',
writable: false
});
o.sex = 'female'; // 这里的赋值其实是不起作用的
console.log(o.sex); // 'male';
delete o.sex; // false, 属性删除的动作也是无效的

经过上述的示例，正常情况下 Object.definePropert() 的使用都是比较简单的。

不过还是有一点需要额外注意一下， Object.defineProperty() 方法设置属性时，属性不能同时声明访问器属性（ set 和 get ）和 writable 或者 value 属性。 意思就是，某个属性设置了 writable 或者 value 属性，那么这个属性就不能声明 get 和 set 了，反之亦然。

因为 Object.defineProperty() 在声明一个属性时，不允许同一个属性出现两种以上存取访问控制。

示例代码，

var o = {},
myName = 'erik';
Object.defineProperty(o, 'name', {
value: myName,
set: function(name) {
myName = name;
},
get: function() {
return myName;
}
});

上面的代码看起来貌似是没有什么问题，但是真正执行时会报错，报错如下，

TypeError: Invalid property. A property cannot both have accessors and be writable or have a value, #<Object>

因为这里的 name 属性同时声明了 value 特性和 set 及 get 特性，这两者提供了两种对 name 属性的读写控制。这里如果不声明 value 特性，而是声明 writable 特性，结果也是一样的，同样会报错。