Analyse anatomique du framework JavaScript du système Hongmeng

Recommandations d'apprentissage associées : javascript

J'ai présenté le framework Javascript de Hongmeng dans l'article précédent. Enfin, le JS. L'entrepôt a été compilé et adopté. Au cours du processus, j'ai rencontré de nombreux pièges et j'ai contribué plusieurs PR à Hongmeng. Aujourd'hui, nous allons analyser ligne par ligne le framework JS dans le système Hongmeng.

Tous les codes de cet article sont basés sur la dernière version de Hongmeng (version 677ed06, date de soumission 2020-09-10).

Le système Hongmeng utilise JavaScript pour développer une interface graphique, qui est un modèle similaire aux applets WeChat et aux applications légères. Dans ce modèle MVVM, V est en réalité supporté par C++. Le code JavaScript n'est que la couche ViewModel qu'il contient.

Le framework Hongmeng JS n'a aucune dépendance et n'utilise que certains packages npm pendant le processus de développement et de packaging. Le code packagé ne dépend d’aucun package npm. Voyons d'abord à quoi ressemble le code JS écrit à l'aide du framework Hongmeng JS.

export default {
  data() {    return { count: 1 };
  },
  increase() {
    ++this.count;
  },
  decrease() {
    --this.count;
  },
}复制代码

Si je ne vous disais pas que c'est Hongmeng, vous penseriez même que c'est une vue ou une applet. Si JS est utilisé seul (hors système Hongmeng), le code est le suivant :

const vm = new ViewModel({
  data() {    return { count: 1 };
  },
  increase() {
    ++this.count;
  },
  decrease() {
    --this.count;
  },
});console.log(vm.count); // 1vm.increase();console.log(vm.count); // 2vm.decrease();console.log(vm.count); // 1复制代码

Tout le code JS dans l'entrepôt implémente un système réactif, qui fait office de ViewModel dans MVVM.

Analysons-le ligne par ligne. Il y a 4 répertoires dans le répertoire

src, avec un total de 8 fichiers. L’un d’eux est un test unitaire. Il existe également 1 analyse des performances. En excluant les 2 fichiers index.js, il y a 4 fichiers utiles au total. C’est également l’objet de cette analyse.

src
├── __test__
│   └── index.test.js
├── core
│   └── index.js
├── index.js
├── observer
│   ├── index.js
│   ├── observer.js
│   ├── subject.js
│   └── utils.js
└── profiler
    └── index.js复制代码

Le premier est le fichier d'entrée, src/index.js, qui ne contient que 2 lignes de code :

import { ViewModel } from './core';export default ViewModel;复制代码

Il s'agit en fait d'une réexportation.

Un autre fichier similaire est src/observer/index.js, également 2 lignes de code :

export { Observer } from './observer';export { Subject } from './subject';复制代码

observer et subject implémentent un modèle d'observateur. le sujet est le sujet, c'est-à-dire la personne observée. l'observateur est un observateur. Lorsqu'il y a des changements dans le sujet, l'observateur doit être activement informé. C'est la réactivité.

Ces deux fichiers utilisent src/observer/utils.js, analysons donc d'abord le fichier utils. Divisé en 3 parties.

La première partie

export const ObserverStack = {  stack: [],
  push(observer) {    this.stack.push(observer);
  },
  pop() {    return this.stack.pop();
  },
  top() {    return this.stack[this.stack.length - 1];
  }
};复制代码

Définit d'abord une pile pour stocker les observateurs, selon le principe du dernier entré, premier sorti, et utilise le tableau stack en interne pour stockage.

• L'opération Push push, comme la fonction push du tableau, place un observateur en haut de la pile.
• L'opération pop pop, comme la fonction pop du tableau, supprime l'observateur en haut de la pile et renvoie l'observateur supprimé.
• Obtenir l'élément supérieur de la pile top, qui est différent de l'opération pop top prend l'élément supérieur de la pile mais ne le supprime pas.

La deuxième partie

export const SYMBOL_OBSERVABLE = '__ob__';export const canObserve = target => typeof target === 'object';复制代码

définit une constante de chaîne SYMBOL_OBSERVABLE. Pour plus de commodité, utilisation ultérieure.

définit une fonction canObserve, si la cible peut être observée. Seuls les objets peuvent être observés, utilisez donc typeof pour déterminer le type de cible. Attendez, quelque chose ne va pas. Si target est null, la fonction retournera également true. Si null n'est pas observable, alors c'est un bug. (En écrivant ceci, j'avais déjà déposé un PR et demandé si ce comportement était le comportement souhaité).

Partie 3

export const defineProp = (target, key, value) => {  Object.defineProperty(target, key, { enumerable: false, value });
};复制代码

Il n'y a rien de facile à expliquer, c'est juste que Object.defineProperty le code est trop long, définissez une fonction pour éviter la duplication de code.

Analysons l'observateur src/observer/observer.js, divisé en 4 parties.

Première partie

export function Observer(context, getter, callback, meta) {  this._ctx = context;  this._getter = getter;  this._fn = callback;  this._meta = meta;  this._lastValue = this._get();
}复制代码

Constructeur. Accepte 4 paramètres.

context Le contexte de l'observateur actuel, type est ViewModel. Lorsque le troisième rappel de paramètre est appelé, le this de la fonction est celui-ci context. Le type

getter est une fonction utilisée pour obtenir la valeur d'une propriété. Le type

callback est une fonction, une fonction de rappel qui est exécutée lorsqu'une certaine valeur change.

meta Métadonnées. Les observateurs ne prêtent pas attention aux meta métadonnées.

est sur la dernière ligne du constructeur, this._lastValue = this._get(). Analysons la fonction _get.

La deuxième partie

Observer.prototype._get = function() {  try {
    ObserverStack.push(this);    return this._getter.call(this._ctx);
  } finally {
    ObserverStack.pop();
  }
};复制代码

ObserverStack est la pile analysée ci-dessus pour stocker tous les observateurs. Poussez l'observateur actuel sur la pile et obtenez la valeur actuelle via _getter. Combinée avec le constructeur de la première partie, cette valeur est stockée dans l'attribut _lastValue.

Après avoir exécuté ce processus, l'observateur a été initialisé.

Partie 3

Observer.prototype.update = function() {  const lastValue = this._lastValue;  const nextValue = this._get();  const context = this._ctx;  const meta = this._meta;  if (nextValue !== lastValue || canObserve(nextValue)) {    this._fn.call(context, nextValue, lastValue, meta);    this._lastValue = nextValue;
  }
};复制代码

这部分实现了数据更新时的脏检查(Dirty checking)机制。比较更新后的值和当前值，如果不同，那么就执行回调函数。如果这个回调函数是渲染 UI，那么则可以实现按需渲染。如果值相同，那么再检查设置的新值是否可以被观察，再决定到底要不要执行回调函数。

第四部分

Observer.prototype.subscribe = function(subject, key) {  const detach = subject.attach(key, this);  if (typeof detach !== 'function') {    return;
  }  if (!this._detaches) {    this._detaches = [];
  }  this._detaches.push(detach);
};

Observer.prototype.unsubscribe = function() {  const detaches = this._detaches;  if (!detaches) {    return;
  }  while (detaches.length) {
    detaches.pop()();
  }
};复制代码

订阅与取消订阅。

我们前面经常说观察者和被观察者。对于观察者模式其实还有另一种说法，叫订阅/发布模式。而这部分代码则实现了对主题(subject)的订阅。

先调用主题的 attach 方法进行订阅。如果订阅成功，subject.attach 方法会返回一个函数，当调用这个函数就会取消订阅。为了将来能够取消订阅，这个返回值必需保存起来。

subject 的实现很多人应该已经猜到了。观察者订阅了 subject，那么 subject 需要做的就是，当数据变化时即使通知观察者。subject 如何知道数据发生了变化呢，机制和 vue2 一样，使用 Object.defineProperty 做属性劫持。

下面再来分析观察者 src/observer/subject.js，分 7 部分。

第一部分

export function Subject(target) {  const subject = this;
  subject._hijacking = true;
  defineProp(target, SYMBOL_OBSERVABLE, subject);  if (Array.isArray(target)) {
    hijackArray(target);
  }  Object.keys(target).forEach(key => hijack(target, key, target[key]));
}复制代码

构造函数。基本没什么难点。设置 _hijacking 属性为 true，用来标示这个对象已经被劫持了。Object.keys 通过遍历来劫持每个属性。如果是数组，则调用 hijackArray。

第二部分

两个静态方法。

Subject.of = function(target) {  if (!target || !canObserve(target)) {    return target;
  }  if (target[SYMBOL_OBSERVABLE]) {    return target[SYMBOL_OBSERVABLE];
  }  return new Subject(target);
};

Subject.is = function(target) {  return target && target._hijacking;
};复制代码

Subject 的构造函数并不直接被外部调用，而是封装到了 Subject.of 静态方法中。

如果目标不能被观察，那么直接返回目标。

如果 target[SYMBOL_OBSERVABLE] 不是 undefined，说明目标已经被初始化过了。

否则，调用构造函数初始化 Subject。

Subject.is 则用来判断目标是否被劫持过了。

第三部分

Subject.prototype.attach = function(key, observer) {  if (typeof key === 'undefined' || !observer) {    return;
  }  if (!this._obsMap) {    this._obsMap = {};
  }  if (!this._obsMap[key]) {    this._obsMap[key] = [];
  }  const observers = this._obsMap[key];  if (observers.indexOf(observer) < 0) {
    observers.push(observer);    return function() {
      observers.splice(observers.indexOf(observer), 1);
    };
  }
};复制代码

这个方法很眼熟，对，就是上文的 Observer.prototype.subscribe 中调用的。作用是某个观察者用来订阅主题。而这个方法则是“主题是怎么订阅的”。

观察者维护这一个主题的哈希表 _obsMap。哈希表的 key 是需要订阅的 key。比如某个观察者订阅了 name 属性的变化，而另一个观察者订阅了 age 属性的变化。而且属性的变化还可以被多个观察者同时订阅，因此哈希表存储的值是一个数组，数据的每个元素都是一个观察者。

第四部分

Subject.prototype.notify = function(key) {  if (    typeof key === 'undefined' ||
    !this._obsMap ||
    !this._obsMap[key]
  ) {    return;
  }  this._obsMap[key].forEach(observer => observer.update());
};复制代码

当属性发生变化是，通知订阅了此属性的观察者们。遍历每个观察者，并调用观察者的 update 方法。我们上文中也提到了，脏检查就是在这个方法内完成的。

第五部分

Subject.prototype.setParent = function(parent, key) {  this._parent = parent;  this._key = key;
};

Subject.prototype.notifyParent = function() {  this._parent && this._parent.notify(this._key);
};复制代码

这部分是用来处理属性嵌套(nested object)的问题的。就是类似这种对象：{ user: { name: 'JJC' } }。

第六部分

function hijack(target, key, cache) {  const subject = target[SYMBOL_OBSERVABLE];  Object.defineProperty(target, key, {    enumerable: true,
    get() {      const observer = ObserverStack.top();      if (observer) {
        observer.subscribe(subject, key);
      }      const subSubject = Subject.of(cache);      if (Subject.is(subSubject)) {
        subSubject.setParent(subject, key);
      }      return cache;
    },
    set(value) {
      cache = value;
      subject.notify(key);
    }
  });
}复制代码

这一部分展示了如何使用 Object.defineProperty 进行属性劫持。当设置属性时，会调用 set(value)，设置新的值，然后调用 subject 的 notify 方法。这里并不进行任何检查，只要设置了属性就会调用，即使属性的新值和旧值一样。notify 会通知所有的观察者。

第七部分

劫持数组方法。

const ObservedMethods = {  PUSH: 'push',  POP: 'pop',  UNSHIFT: 'unshift',  SHIFT: 'shift',  SPLICE: 'splice',  REVERSE: 'reverse'};const OBSERVED_METHODS = Object.keys(ObservedMethods).map(    key => ObservedMethods[key]
);复制代码

ObservedMethods 定义了需要劫持的数组函数。前面大写的用来做 key，后面小写的是需要劫持的方法。

function hijackArray(target) {
  OBSERVED_METHODS.forEach(key => {    const originalMethod = target[key];

    defineProp(target, key, function() {      const args = Array.prototype.slice.call(arguments);
      originalMethod.apply(this, args);      let inserted;      if (ObservedMethods.PUSH === key || ObservedMethods.UNSHIFT === key) {
        inserted = args;
      } else if (ObservedMethods.SPLICE) {
        inserted = args.slice(2);
      }      if (inserted && inserted.length) {
        inserted.forEach(Subject.of);
      }      const subject = target[SYMBOL_OBSERVABLE];      if (subject) {
        subject.notifyParent();
      }
    });
  });
}复制代码

数组的劫持和对象不同，不能使用 Object.defineProperty。

我们需要劫持 6 个数组方法。分别是头部添加、头部删除、尾部添加、尾部删除、替换/删除某几项、数组反转。

通过重写数组方法实现了数组的劫持。但是这里有一个需要注意的地方，数据的每一个元素都是被观察过的，但是当在数组中添加了新元素时，这些元素还没有被观察。因此代码中还需要判断当前的方法如果是 push、unshift、splice，那么需要将新的元素放入观察者队列中。

另外两个文件分别是单元测试和性能分析，这里就不再分析了。

想了解更多编程学习，敬请关注php培训栏目！

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!