Hongmeng 시스템 JavaScript 프레임워크의 해부학적 분석
관련 학습 추천: javascript
이전 글에서 Hongmeng의 Javascript 프레임워크를 소개한 적이 있는데, 이 기간 동안 드디어 JS 웨어하우스를 컴파일하고 합격했습니다. 함정에 빠져 여러 PR에 기여했습니다. 오늘은 Hongmeng 시스템의 JS 프레임워크를 한 줄씩 분석하겠습니다.
이 글의 모든 코드는 최신 버전의 Hongmeng(버전 677ed06, 제출일 2020-09-10)을 기반으로 합니다.
Hongmeng 시스템은 JavaScript를 사용하여 GUI를 개발하는데, 이는 WeChat 애플릿 및 라이트 애플리케이션과 유사한 모델입니다. 이 MVVM 모델에서 V는 실제로 C++에 의해 구현됩니다. JavaScript 코드는 그 안에 있는 ViewModel 레이어일 뿐입니다.
Hongmeng JS 프레임워크는 종속성이 없으며 개발 및 패키징 프로세스 중에 일부 npm 패키지만 사용합니다. 패키지된 코드는 npm 패키지에 의존하지 않습니다. 먼저 Hongmeng JS 프레임워크를 사용하여 작성된 JS 코드가 어떤 모습인지 살펴보겠습니다.
export default { data() { return { count: 1 }; }, increase() { ++this.count; }, decrease() { --this.count; }, }复制代码
홍멍이라고 안 했으면 vue나 애플릿인줄 알겠더라구요. Hongmeng 시스템 외부에서 JS만 사용하는 경우 코드는 다음과 같습니다.
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复制代码
웨어하우스의 모든 JS 코드는 MVVM에서 ViewModel 역할을 하는 반응형 시스템을 구현합니다.
한줄씩 분석해보겠습니다.
src 디렉토리에는 4개의 디렉토리가 있고, 총 8개의 파일이 있습니다. 그 중 하나는 단위 테스트입니다. 1개의 성능 분석도 있습니다. index.js 파일 2개를 제외하면 총 4개의 유용한 파일이 있습니다. 이번 분석의 핵심이기도 합니다.
src ├── __test__ │ └── index.test.js ├── core │ └── index.js ├── index.js ├── observer │ ├── index.js │ ├── observer.js │ ├── subject.js │ └── utils.js └── profiler └── index.js复制代码
첫 번째는 항목 파일인 src/index.js인데 코드 두 줄만 있습니다:
import { ViewModel } from './core';export default ViewModel;复制代码
실제로는 다시 내보내는 중입니다.
또 다른 유사한 파일은 src/observer/index.js이며, 두 줄의 코드도 있습니다:
export { Observer } from './observer';export { Subject } from './subject';复制代码
observer 및 subject는 관찰자 패턴을 구현합니다. 피험자는 피험자, 즉 관찰되는 사람입니다. 관찰자는 관찰자다. 주제에 변화가 있을 경우 관찰자에게 적극적으로 알려야 합니다. 이것이 반응성입니다.
이 두 파일 모두 src/observer/utils.js를 사용하므로 먼저 utils 파일을 분석해 보겠습니다. 3개 부분으로 나누어져 있습니다.
첫 번째 부분
export const ObserverStack = { stack: [], push(observer) { this.stack.push(observer); }, pop() { return this.stack.pop(); }, top() { return this.stack[this.stack.length - 1]; } };复制代码
먼저 스택은 관찰자를 저장하도록 정의됩니다. 후입선출 원칙을 따르며 저장을 위해 내부적으로 스택
배열을 사용합니다. 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
- 푸시 작업
push
는 배열의push
함수와 동일합니다. 관찰자는 스택의 맨 위에 배치됩니다. - 팝 연산
pop
은 배열의pop
함수와 동일합니다. 스택 맨 위에 있는 관찰자를 삭제하고 삭제된 것을 반환합니다. 관찰자. - 스택
top
의 최상위 요소를 가져오는 것은pop
작업과 다릅니다. 스택이지만 삭제되지는 않습니다.
두 번째 부분
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; } };复制代码
SYMBOL_OBSERVABLE
을 정의합니다. 나중에 사용의 편의를 위해. 표적을 관찰할 수 있는지 여부를 결정하는 canObserve
함수를 정의합니다. 객체만 관찰할 수 있으므로 typeof
를 사용하여 대상의 유형을 결정하세요. 잠깐, 뭔가 잘못된 것 같습니다. target
이 null
인 경우에도 이 함수는 true
를 반환합니다. null
이 관찰되지 않으면 이는 버그입니다. (이 글을 쓰는 동안 나는 이미 이 동작이 예상되었는지 묻는 PR을 제출했습니다.) 🎜🎜🎜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()(); } };复制代码
Object.defineProperty
코드가 너무 길기 때문입니다. 코드 중복을 피하기 위해 함수를 정의하세요. 🎜🎜옵저버 src/observer/observer.js를 4개 부분으로 나누어 분석해 보겠습니다. 🎜🎜🎜1부🎜🎜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])); }复制代码
context
현재 관찰자가 위치한 컨텍스트, 유형은 ViewModel
입니다. 세 번째 매개변수 콜백이 호출되면 함수의 this
는 이 컨텍스트
입니다. 🎜🎜getter
유형은 특정 속성의 값을 가져오는 데 사용되는 함수입니다. 🎜🎜콜백
유형은 함수, 특정 값이 변경될 때 실행되는 콜백 함수입니다. 🎜🎜메타
메타데이터. 관찰자는 메타
메타데이터에 주의를 기울이지 않습니다. 🎜🎜생성자의 마지막 줄에 this._lastValue = this._get()
이 있습니다. _get
함수를 분석해 보겠습니다. 🎜🎜🎜두 번째 부분🎜🎜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
은 위에서 분석한 스택으로 모든 관찰자를 저장하는 스택입니다. 현재 관찰자를 스택에 푸시하고 _getter
를 통해 현재 값을 가져옵니다. 첫 번째 부분의 생성자와 결합되어 이 값은 _lastValue
속성에 저장됩니다. 🎜🎜이 과정을 실행한 후 옵저버가 초기화되었습니다. 🎜🎜🎜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培训栏目!
위 내용은 Hongmeng 시스템 JavaScript 프레임워크의 해부학적 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











Hongmeng 시스템은 Huawei가 독립적으로 개발한 분산 운영 체제로 사용자에게 원활하고 안전하며 지능적인 전체 시나리오 경험을 제공합니다. Hongmeng OS는 출시 이후 지속적으로 업데이트 및 반복되었으며, Huawei의 주력 모델인 Mate 시리즈, P 시리즈, Nova 시리즈를 포함하여 지원되는 휴대폰 모델의 범위가 점차 확대되었습니다. Hongmeng 시스템은 적응을 위해 다른 브랜드의 휴대폰에 개방되어 있으므로 앞으로 더 많은 휴대폰이 Hongmeng 시스템을 지원할 수 있습니다. 또한 Hongmeng 시스템은 태블릿, 스마트 웨어러블, 스마트 스크린 등 다양한 단말 장치를 지원하여 신속한 연결, 상호 지원 및 리소스 공유를 구현합니다.

WebSocket 및 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법 소개: 지속적인 기술 개발로 음성 인식 기술은 인공 지능 분야의 중요한 부분이 되었습니다. WebSocket과 JavaScript를 기반으로 한 온라인 음성 인식 시스템은 낮은 대기 시간, 실시간, 크로스 플랫폼이라는 특징을 갖고 있으며 널리 사용되는 솔루션이 되었습니다. 이 기사에서는 WebSocket과 JavaScript를 사용하여 온라인 음성 인식 시스템을 구현하는 방법을 소개합니다.

WebSocket과 JavaScript: 실시간 모니터링 시스템 구현을 위한 핵심 기술 서론: 인터넷 기술의 급속한 발전과 함께 실시간 모니터링 시스템이 다양한 분야에서 널리 활용되고 있다. 실시간 모니터링을 구현하는 핵심 기술 중 하나는 WebSocket과 JavaScript의 조합입니다. 이 기사에서는 실시간 모니터링 시스템에서 WebSocket 및 JavaScript의 적용을 소개하고 코드 예제를 제공하며 구현 원칙을 자세히 설명합니다. 1. 웹소켓 기술

Honor 휴대폰은 출시 이후 뛰어난 성능과 혁신적인 디자인 컨셉으로 소비자들의 선호를 받아왔습니다. Hongmeng 시스템이 출시되면서 Honor 휴대폰이 다시 한번 폭넓은 관심을 끌었습니다. 자체 개발한 새로운 운영 체제인 Hongmeng OS는 Honor 휴대폰 사용 경험을 크게 개선하고 사용자에게 새로운 기능과 제어 방법을 제공했습니다. 이런 맥락에서 Honor 휴대폰 사용자는 휴대폰을 Hongmeng 시스템으로 업그레이드하기를 간절히 바라고 있습니다. 모든 사람이 더 나은 업그레이드를 할 수 있도록 돕기 위해 이 문서에서는 포괄적인 정보를 제공합니다.

새로운 기술 분야에서는 항상 새로운 운영체제가 많은 주목을 받습니다. 최근 Honor 휴대폰은 Huawei가 개발한 새로운 운영 체제인 Hongmeng OS로 업그레이드될 것이라고 발표했습니다. 이는 의심할 여지 없이 많은 Honor 휴대폰 사용자에게 좋은 소식입니다. 그러나 많은 사용자들은 여전히 Hongmeng 시스템으로 업그레이드하는 방법에 대해 의구심을 갖고 있을 수 있습니다. 이 기사에서는 Honor 휴대폰을 Hongmeng 시스템으로 업그레이드하는 방법을 자세히 설명하여 사용자가 이를 더 잘 이해하고 작동할 수 있도록 돕습니다. 우선 Honor 휴대폰을 Hongmeng 시스템으로 업그레이드하려면 사용자는 휴대폰이 네트워크에 연결되어 있고 전력이 충분한지 확인해야 합니다. 이것

Hongmeng OS는 고려해 볼 만한 사용하기 쉬운 운영 체제입니다. 간단하고 직관적인 사용자 인터페이스, 원활하고 안정적인 시스템 성능, 풍부한 기능 응용 프로그램 및 완벽한 생태학적 지원을 갖추고 있습니다. 사용자 경험, 시스템 성능, 풍부한 기능부터 생태학적 지원에 이르기까지 Hongmeng 시스템은 모든 측면에서 우수한 성능을 발휘하여 사용자의 일상적인 사용 요구 사항을 충족하고 사용자에게 편리하고 효율적인 경험을 제공할 수 있습니다.

Huawei가 출시한 새로운 운영 체제인 Hongmeng 시스템은 출시 이후 광범위한 관심과 열띤 논의를 불러일으켰습니다. 홍멍 시스템은 화웨이가 독자적으로 개발한 운영체제로 기대가 크며 안드로이드, iOS 등 현재 인기 있는 운영체제와 경쟁할 것으로 예상된다. 그러나 Hongmeng 시스템이 점차 시장에 출시되고 대중화되면서 사용자들은 사용 경험, 기능성, 안정성 및 기타 측면에 대해 다양한 논의와 평가를 진행하기 시작했습니다. 그렇다면 Hongmeng 시스템은 사용하기 쉬운가요? 유저들 사이에서는 평판이 어떤가요? 다음부터 시작하겠습니다.

Hongmeng 시스템과 Android 시스템은 Linux 커널을 기반으로 하며 데이터 상호 운용성의 기반을 제공하는 기본 아키텍처가 유사합니다. 그러나 두 시스템 간의 설계 개념, 시스템 아키텍처 및 기능 구현에 차이가 있어 데이터 상호 운용성에 문제가 있습니다. Hongmeng 시스템과 Android 시스템 간의 데이터 상호 운용성을 달성하려면 호환성 및 데이터 형식 변환과 같은 기술적 문제를 해결하고 통일된 데이터 교환 표준을 수립하고 안정적인 데이터 전송 메커니즘을 구축해야 합니다. 동시에 두 시스템 간의 데이터 상호 운용성을 공동으로 촉진하려면 애플리케이션 개발자와 생태계 파트너의 적극적인 참여와 지원이 필요합니다.
