Anatomische Analyse des JavaScript-Frameworks des Hongmeng-Systems

Verwandte Lernempfehlungen: Javascript

Ich habe das Javascript-Framework in den letzten Tagen endlich zusammengestellt und bestanden Fallstricke und trug zu mehreren PRs bei. Heute werden wir das JS-Framework im Hongmeng-System Zeile für Zeile analysieren.

Alle Codes in diesem Artikel basieren auf der neuesten Version von Hongmeng (Version 677ed06, Einreichungsdatum 10.09.2020).

Das Hongmeng-System verwendet JavaScript zur Entwicklung einer GUI, einem Modell, das WeChat-Applets und Light-Anwendungen ähnelt. In diesem MVVM-Modell wird V tatsächlich von C++ getragen. Der JavaScript-Code ist lediglich die darin enthaltene ViewModel-Ebene.

Das Hongmeng JS-Framework weist keine Abhängigkeiten auf und verwendet während des Entwicklungs- und Verpackungsprozesses nur einige npm-Pakete. Der gepackte Code hängt nicht von einem npm-Paket ab. Schauen wir uns zunächst an, wie der mit dem Hongmeng JS-Framework geschriebene JS-Code aussieht.

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

Wenn ich dir nicht sagen würde, dass das Hongmeng ist, würdest du sogar denken, dass es Vue oder ein Applet ist. Wenn Sie JS allein verwenden (aus dem Hongmeng-System), lautet der Code wie folgt:

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复制代码

Der gesamte JS-Code im Warehouse implementiert ein responsives System, das als ViewModel in MVVM fungiert.

Lassen Sie es uns Zeile für Zeile analysieren.

Es gibt 4 Verzeichnisse im src-Verzeichnis mit insgesamt 8 Dateien. Einer davon ist ein Unit-Test. Es gibt auch 1 Leistungsanalyse. Mit Ausnahme der beiden index.js-Dateien gibt es insgesamt vier nützliche Dateien. Sie steht auch im Mittelpunkt dieser Analyse.

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

Die erste ist die Eintragsdatei src/index.js, die nur zwei Codezeilen enthält:

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

Tatsächlich wird sie erneut exportiert.

Eine weitere ähnliche Datei ist src/observer/index.js, ebenfalls 2 Codezeilen:

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

observer und subject implementieren ein Beobachtermuster. Subjekt ist das Subjekt, also die beobachtete Person. Beobachter ist ein Beobachter. Bei Änderungen im Thema muss der Beobachter aktiv benachrichtigt werden. Das ist Reaktionsfähigkeit.

Diese beiden Dateien verwenden src/observer/utils.js, also analysieren wir zuerst die utils-Datei. In 3 Teile unterteilt.

Der erste Teil

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

Zuerst wird ein Stapel zum Speichern von Beobachtern definiert. Er folgt dem Last-In-First-Out-Prinzip und verwendet intern das Array stack zur Speicherung. stack 数组来存储。

• 入栈操作 push，和数组的 push 函数一样，在栈顶放入一个观察者 observer。
• 出栈操作 pop，和数组的 pop 函数一样，在将栈顶的观察者删除，并返回这个被删除的观察者。
• 取栈顶元素 top，和 pop 操作不同，top 是把栈顶元素取出来，但是并不删除。

第二部分

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

定义了一个字符串常量 SYMBOL_OBSERVABLE。为了后面用着方便。

定义了一个函数 canObserve，目标是否可以被观察。只有对象才能被观察，所以使用 typeof 来判断目标的类型。等等，好像有什么不对。如果 target 为 null 的话，函数也会返回 true。如果 null 不可观察，那么这就是一个 bug。（写这篇文章的时候我已经提了一个 PR，并询问了这种行为是否是期望的行为）。

第三部分

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

这个没有什么好解释的，就是 Object.defineProperty 代码太长了，定义一个函数来避免代码重复。

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

第一部分

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

构造函数。接受 4 个参数。

context 当前观察者所处的上下文，类型是 ViewModel。当第三个参数 callback 调用时，函数的 this 就是这个 context。

getter 类型是一个函数，用来获取某个属性的值。

callback 类型是一个函数，当某个值变化后执行的回调函数。

meta 元数据。观察者(Observer)并不关注 meta 元数据。

在构造函数的最后一行，this._lastValue = this._get()。下面来分析 _get 函数。

第二部分

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

ObserverStack 就是上面分析过的用来存储所有观察者的栈。将当前观察者入栈，并通过 _getter 取得当前值。结合第一部分的构造函数，这个值存储在了 _lastValue

• Die Push-Operation push ist die gleiche wie die push-Funktion des Arrays. Ein Beobachter wird oben auf dem Stapel platziert.
• Die Pop-Operation pop ist die gleiche wie die Funktion pop des Arrays. Sie löscht den Beobachter oben im Stapel und gibt den gelöschten Wert zurück Beobachter.
• Das Abrufen des obersten Elements des Stapels top unterscheidet sich von der Operation pop, bei der das oberste Element entfernt wird Der Stapel wird jedoch nicht gelöscht.

Der zweite Teil

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;
  }
};复制代码

definiert eine String-Konstante SYMBOL_OBSERVABLE. Zur Vereinfachung der späteren Verwendung.

Definiert eine Funktion canObserve, um zu bestimmen, ob das Ziel beobachtet werden kann. Es können nur Objekte beobachtet werden. Verwenden Sie daher typeof, um den Typ des Ziels zu bestimmen. Warten Sie, etwas scheint nicht zu stimmen. Die Funktion gibt auch true zurück, wenn target null ist. Wenn null nicht beobachtbar ist, handelt es sich um einen Fehler. (Während ich dies schrieb, hatte ich bereits eine PR eingereicht und gefragt, ob dieses Verhalten das gewünschte Verhalten sei.) 🎜🎜🎜Teil 3🎜🎜

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()();
  }
};复制代码

🎜Es gibt nichts Einfaches zu erklären, es ist, dass der Object.defineProperty-Code zu lang ist. Definieren Sie eine Funktion, um Codeduplizierung zu vermeiden. 🎜🎜Lassen Sie uns den Beobachter src/observer/observer.js analysieren, unterteilt in 4 Teile. 🎜🎜🎜Teil Eins🎜🎜

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]));
}复制代码

🎜Konstrukteur. Akzeptiert 4 Parameter. 🎜🎜context Der Kontext, in dem sich der aktuelle Beobachter befindet, der Typ ist ViewModel. Wenn der dritte Parameter-Callback aufgerufen wird, ist der this der Funktion dieser context. 🎜🎜getter Typ ist eine Funktion, die verwendet wird, um den Wert eines bestimmten Attributs abzurufen. 🎜🎜callback Typ ist eine Funktion, eine Rückruffunktion, die ausgeführt wird, wenn sich ein bestimmter Wert ändert. 🎜🎜meta Metadaten. Beobachter achten nicht auf meta-Metadaten. 🎜🎜In der letzten Zeile des Konstruktors this._lastValue = this._get(). Lassen Sie uns die Funktion _get analysieren. 🎜🎜🎜Der zweite Teil🎜🎜

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;
};复制代码

🎜ObserverStack ist der oben analysierte Stapel zum Speichern aller Beobachter. Schieben Sie den aktuellen Beobachter auf den Stapel und erhalten Sie den aktuellen Wert über _getter. In Kombination mit dem Konstruktor des ersten Teils wird dieser Wert im Attribut _lastValue gespeichert. 🎜🎜Nach der Ausführung dieses Prozesses wurde der Beobachter initialisiert. 🎜🎜🎜Teil 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培训栏目！

Das obige ist der detaillierte Inhalt vonAnatomische Analyse des JavaScript-Frameworks des Hongmeng-Systems. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!