<p>Verwandte Lernempfehlungen: Javascript-Video-Tutorial<p>Wie wir alle wissen, verwendet die neue Open-Source-Version „Hongmeng 2.0“ JavaScript als Rahmensprache für die IoT-Anwendungsentwicklung. Dies zeigt, dass JavaScript nach dem Start von SpaceX erneut zu einem heißen Thema auf der Ebene der Nachrichtensendungen geworden ist. Es wäre schade, Yin Yang Qi nur für eine so gute Gelegenheit zu nutzen. Aus Gründen der Populärwissenschaft verwendet dieser Artikel keine Lupe, um die Fehler im Code herauszufinden, um Fehler zu finden, sondern hofft, in Laiensprache zu erklären, worum es bei der von ihm unterstützten GUI geht. Solange Sie über allgemeine Kenntnisse der Computer-Grundlagen verfügen, sollte der Lektüre dieses Artikels nichts im Wege stehen. <p>Wir wissen bereits, dass Entwickler bei „Hongmeng 2.0“ lediglich JavaScript-Geschäftslogik in Form von Vue-Komponenten schreiben müssen, um sie in eine UI-Schnittstelle auf eingebetteter Hardware wie Smartwatches zu rendern. Welche Kernmodule müssen in diesen Prozess einbezogen werden? Welche dieser Module sind selbstentwickelt und welche nutzen vorgefertigte Open-Source-Projekte? Es ist von oben nach unten in drei abstrakte Ebenen unterteilt, um Folgendes vorzustellen:
<!-- hello.hml --><text onclick="boil">{{hello}}</text>复制代码// hello.jsexport default { data: { hello: 'PPT'
},
boil() { this.hello = '核武器';
}
}复制代码boil-Methode aufgerufen, wodurch PPT in einen nuclear umgewandelt wird Waffe. Was ist dahinter passiert? Studierende, die mit Vue 2.0 vertraut sind, sollten sofort an folgende Dinge denken: <p>
<p> erfordert einen Vorverarbeitungsmechanismus für XML, um es in eine verschachtelte Funktionsstruktur in JS umzuwandeln. Auf diese Weise müssen Sie zur Laufzeit nur eine einfache Auswertung durchführen und können mit JS eine Benutzeroberfläche generieren, die der XML-Struktur entspricht.
<p>Damit der entsprechende Callback ausgeführt werden kann, wenn das onclick-Ereignis ausgelöst wird, ist ein Ereignismechanismus erforderlich. boil 方法，让 PPT 变成 核武器。
<p>这背后发生了什么呢？熟悉 Vue 2.0 的同学应该会立刻联想到下面这几件事：
onclick 事件时能执行相应回调。this.hello 赋值时能执行相应回调。onclick 属性转换为 JS 对象的属性字段。onclick 属性会在 C++ 中被检查和注册，相当于全部组件均为原生。Object.defineProperty 的（几百行量级的）ViewModel。document.createElement 式的标准化 API。ace_lite_jsfwk 仓库下的 core/index.js、observer.js 和 subject.jsEin Daten-Hijacking-Mechanismus ist erforderlich, damit der entsprechende Rückruf ausgeführt werden kann, wenn this.hello ein Wert zugewiesen wird. <p>Es muss möglich sein, UI-Objektsteuerelemente in Rückrufen zu aktualisieren.
<p>Wie werden diese Dinge erreicht? Um es einfach auszudrücken: Die
<p>XML-Vorverarbeitung basiert auf dem vorgefertigten NPM-Open-Source-Paket, um das onclick-Attribut in XML in das Attributfeld des JS-Objekts zu konvertieren. 🎜🎜🎜Ereignisregistrierung und -auslösung🎜 werden direkt in C++ implementiert. Das onclick-Attribut des im vorherigen Schritt erhaltenen JS-Objekts wird überprüft und in C++ registriert, was der nativen Funktionalität aller Komponenten entspricht. 🎜🎜🎜Daten-Hijacking-Mechanismus🎜 ist in JS implementiert und ist ein ViewModel (Hunderte von Zeilen groß), das auf Object.defineProperty basiert. 🎜🎜🎜UI-Steuerungsaktualisierungen🎜 werden durch den Aufruf nativer C++-Methoden im JS-Rückruf implementiert, der automatisch von ViewModel ausgeführt wird. Dieser Teil erfolgt vollständig implizit und stellt keine standardisierte API im document.createElement-Stil bereit. 🎜🎜🎜Da eine große Anzahl von Funktionen in gängigen JS-Frameworks direkt in C++ implementiert sind, ist der gesamte GUI-Technologie-Stack in reinem JavaScript implementiert (siehe hauptsächlich core/ unter dem Warehouse-Index <code>ace_lite_jsfwk). js, observer.js und subject.js), was gleichbedeutend damit ist, nur diese Funktion zu haben: 🎜🎜🎜Ein ViewModel, das beobachtet werden kann. 🎜🎜🎜Was die Implementierungskomplexität und -qualität des reinen JS-Framework-Teils betrifft, kann es objektiv gesehen als guter Bonus im Rekrutierungsgespräch für Schulen verwendet werden, wenn es sich um eine persönliche Amateurarbeit handelt. 🎜🎜JS-Engine und Laufzeitschicht🎜🎜Nachdem wir die JS-Framework-Schicht verstanden haben, können wir entweder denken, dass „Hongmeng 2.0“ sich für eine tiefgreifende Anpassung des stark vereinfachten Vue an C++ entscheidet, oder wir können denken, dass es sich stark um die stark vereinfachte (und Private) DOM implementiert das unterstützende Front-End-Framework. Wenn wir die Prinzipien dieser GUI weiter erforschen wollen, müssen wir daher ihren C++-Teil betreten und die Implementierung ihrer JS-Engine und Laufzeitschicht verstehen. 🎜<p>Was sind die Unterschiede und Zusammenhänge zwischen JS-Engine und Laufzeit? JS-Engines müssen im Allgemeinen nur der ECMA-262-Spezifikation entsprechen, die keine Plattform-APIs mit „Nebeneffekten“ definiert. Von setTimeout über document.getElementById über console.log bis fs.readFile können diese alle tatsächlichen E/A-Vorgänge ausführen Die Funktionalität muss von einer Laufzeit bereitgestellt werden, die „die Engine-API und die Plattform-API zusammenhält“. Das Prinzip der Laufzeit selbst ist nicht kompliziert. In meinem persönlichen Artikel „Von der JS-Engine zur JS-Runtime“ können Sie beispielsweise sehen, wie Sie mithilfe der vorgefertigten QuickJS-Engine eine Laufzeit selbst erstellen. setTimeout 到 document.getElementById 到 console.log 再到 fs.readFile，这些能执行实际 IO 操作的功能，都需要由「将引擎 API 和平台 API 胶合到一起」的运行时提供。运行时本身的原理并不复杂，譬如在个人的文章《从 JS 引擎到 JS 运行时》中，你就可以看到如何借助现成的 QuickJS 引擎，自己搭建一个运行时。
<p>那么在「鸿蒙 2.0」中，JS 运行时是如何搭建出来的呢？有这么几条重点：
<text> 和 <p> 的 XML 标签组件，都对应一个绑定到 JerryScript 上的 C++ Component 类，如 TextComponent 和 pComponent 等。@system 为前缀的 built-in 模块，它们提供了 JS 中可用的 Router / Audio / File 等平台能力（参见 ohos_module_config.h）。router_module.cpp、js_router.cpp 和 js_page_state_machine.cpp）。简单说来这个「路由」是这样实现的：
router.replace 原生方法，走进 C++。pages/detail
<text> und <p> entspricht einer an JerryScript gebundenen C++-Komponentenklasse, z. B. TextComponent und <code>pComponent usw.
@system in JS, die Plattformfunktionen wie Router/Audio/Datei in JS bereitstellen (siehe ohos_module_config.h).
<p>Was hier besonders erwähnenswert ist, ist Router. Es unterscheidet sich stark von den Implementierungsprinzipien allgemeiner Webplattform-Routings wie vue-router. Es wird während der Laufzeit speziell tiefgreifend angepasst (siehe router_module.cpp, js_router.cpp und). js_page_state_machine.cpp). Einfach ausgedrückt wird dieses „Routing“ wie folgt implementiert: <p>
router.replace zum Seitenwechsel in JS auf und geben Sie C++ ein. <p>Laden Sie in C++ das neue Seiten-JS entsprechend dem neuen Seiten-URI-Pfad (z. B. pages/detail), erstellen Sie eine neue Seitenzustandsmaschineninstanz und versetzen Sie sie in den Init-Status. 
Rufen Sie im Init-Prozess der neuen Zustandsmaschine die JS-Engine auf, um den JS-Code der neuen Seite auszuwerten und das ViewModel der neuen Seite abzurufen. graphic_lite 仓库了。可以认为，这里才是真正执行实际绘制的 GUI。像之前的 TextComponent 等原生组件，都会对应到这里的某种图形库 View。它以一种相当经典的方式，在 C++ 层实现并提供了「Canvas 风格的立即模式 GUI」和「DOM 风格的保留模式 GUI」两套 API 体系（对于立即模式和保留模式 GUI 的区别与联系，可参见个人这篇 IMGUI 科普回答）。概括说来，这个图形子系统的要点大致如下：
UIView 这个 C++ 控件基类，其中有一系列形如 OnClick / OnLongPress / OnDrag 的虚函数。基本每种 JS 中可用的原生 Component 类，都对应于一种 UIView 的子类。DrawLine / DrawCurve / DrawText 等命令式的绘制方法。FillArea 矩形单色填充能力。libpng 和 libjpeg 做图像解码，然后即可使用内存中的 bitmap 图像做绘制。
<p>然后对于路径，这个图形库自己实现了各种 CPU 中的像素绘制方法，典型的例子就是这个贝塞尔曲线的绘制源码：
void DrawCurve::DrawCubicBezier(const Point& start, const Point& control1, const Point& control2, const Point& end, const Rect& mask, int16_t width, const ColorType& color, OpacityType opacity)
{ if (width == 0 || opacity == OPA_TRANSPARENT) { return;
}
Point prePoint = start; for (int16_t t = 1; t <= INTERPOLATION_RANGE; t++) {
Point point;
point.x = Interpolation::GetBezierInterpolation(t, start.x, control1.x, control2.x, end.x);
point.y = Interpolation::GetBezierInterpolation(t, start.y, control1.y, control2.y, end.y); if (prePoint.x == point.x && prePoint.y == point.y) { continue;
}
DrawLine::Draw(prePoint, point, mask, width, color, opacity);
prePoint = point;
}
}复制代码INTERPOLATION_RANGE）作为插值输入，逐点计算出曲线表达式的 XY 坐标，然后直接修改像素位置所在的 framebuffer 内存即可。这种教科书式的实现是最经典的，不过如果要拿它对标 Skia 里的黑魔法，还是不要勉为其难了吧。
<p>最后对于文字的绘制，会涉及一些字体解析、定位、RTL和折行等方面的处理。这部分实际上也是组合使用了一些业界通用的开源基础库来实现的。比如对于「牢」这个字，就可以找到图形库的这么几个开源依赖，它们各自扮演不同的角色：
harfbuzz - 用来告诉调用者，应该把「牢」的 glyph 字形放在哪里。freetype - 从宋体、黑体等字体文件中解码出「牢」的 glyph 字形，将其光栅化为像素。icu - 处理 Unicode 中许多奇葩的特殊情况，这块个人不了解，略过。this.hello = 'PPT'JS aus, um die Abhängigkeitsverfolgung auszulösen. <p>Besonderer Hinweis: Diese subjektive Rezension bezieht sich nur auf das aktuelle GUI-Framework von „Hongmeng 2.0“, bitte interpretieren Sie sie nicht nach Belieben falsch.<p>Was die Highlights von „Hongmeng 2.0“ im GUI-Teil betrifft, fallen mir persönlich folgende ein:
<p>Natürlich werden Autohersteller nicht sagen, dass sie Flugzeuge bauen, oder?<p>Kurz gesagt, das ist zwar ein Teller mit hausgemachtem Mapo-Tofu, aber es ist nicht das Mandschu-Han-Bankett, wie manche Leute sagen. <p>Abschließend noch ein persönlicher subjektiver Kommentar: <p>Zuallererst hat dieser GUI-Technologie-Stack das Mainstream-Niveau erreicht, das durch Zusammenstellen und Ausleihen von Open-Source-Produkten erreicht werden kann. In Bezug auf Leistung und Ausdruckskraft besteht jedoch immer noch eine Generationslücke um eine Größenordnung zwischen seinen Kernmodulen und branchenführenden Branchen-, Universitäts- und Forschungslösungen wie Microsoft MakeCode. <p>Zweitens: Betrachten Sie es nicht als Raketenwissenschaft, die Präzisionsberechnungen einer großen Anzahl von Experten erfordert – das soll nicht die unabhängige Forschung und Entwicklung herabsetzen, aber ich hoffe aufrichtig, dass jeder verstehen kann: „Das kann ich auch tatsächlich.“ Beteiligen Sie sich an dieser Angelegenheit! " Betriebssystem und Die GUI ist nicht so mysteriös. Es gibt viele inländische ausgereifte Open-Source-Produkte zum Lernen, Verwenden und Mitmachen (übrigens empfehle ich RT-Thread, das sehr einfach zu erleben ist und auch in China hergestellt, als Early Adopter). Denn nur wenn man wirklich versteht, wie ein Produkt technisch beschaffen ist, ist es doch weniger wahrscheinlich, dass es von Menschen mit Hintergedanken manipuliert wird, oder? <p>Abschließend für alle Frontend-Entwickler, die mit JavaScript vertraut sind: Warum lachen Sie immer noch auf seltsame Weise über Hongmeng? Hongmeng ist der Reichtumscode von JavaScript in China! JavaScript wird von einer „nationalen Waffe“ wie Hongmeng übernommen, was das Straßenvertrauen, das theoretische Vertrauen, das kulturelle Vertrauen und das Vertrauen in den Technologie-Stack des Front-Ends erheblich verbessern kann. Solange wir Spleißen und Selbstforschung auf diese Weise kombinieren, können wir auf einen Schlag im ganzen Land hohes Ansehen erlangen. Dieser Weg ist wirklich faszinierend (flüstern) <p>Wir müssen uns zusammenschließen und JavaScript energisch fördern und fördern, um mit den Majors zu konkurrieren Streben Sie danach, das Niveau der nuklearen Abschreckung in China zu erreichen, und streben Sie danach, das Niveau zu erreichen, auf dem Sie jeder respektieren wird, solange Sie sagen, dass Sie JavaScript schreiben können – solange Sie ein Front-End-Programmierer sind, können Sie springen Beim Ticketkauf in der Schlange stehen, bei einer Fahrt den Sitzplatz aufgeben und umsonst Sex haben... …Gute Zeiten stehen vor der Tür! <p>Möchten Sie eine Säule des Landes werden? Lass uns JavaScript schreiben! <p>Keine Worte mehr, ich werde hart daran arbeiten, das Land zu verjüngen!
<p>Wenn Sie mehr über das Erlernen des Programmierens erfahren möchten, achten Sie bitte auf die Spalte „PHP-Schulung“!
Das obige ist der detaillierte Inhalt vonWerfen wir einen Blick auf den JavaScript-GUI-Technologie-Stack von Hongmeng. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
