<p>関連する学習の推奨事項: JavaScript ビデオ チュートリアル<p>ご存知のとおり、新しくオープン ソースになった「Hongmeng 2.0」アプリケーション開発には IoT フレームワーク言語として JavaScript を使用します。これは、SpaceX の離陸後、JavaScript が再びニュース ネットワーク レベルでホットな話題になったことを示しています。このような良い機会に陰陽だけを使用するのは残念です。一般的な科学として、この記事では虫眼鏡を使ってコードの欠陥を見つけて欠陥を見つけるのではなく、その代わりに、それがサポートする GUI が何であるかを一般的な方法で説明したいと考えています。コンピューターの基本について一般的に理解している限り、この記事を読むのに問題はありません。 <p>「Hongmeng 2.0」では、開発者は JavaScript ビジネス ロジックを Vue コンポーネントの形式で記述するだけで済み、スマート ウォッチなどの組み込みハードウェア上の UI インターフェイスにレンダリングできることはすでにわかっています。このプロセスにはどのコア モジュールが関与する必要がありますか?これらのモジュールのうち、どれが自社開発で、どれが既成のオープンソース プロジェクトを使用していますか?これは、上から下に 3 つの抽象的なレイヤーに分割されて紹介されています:
<!-- hello.hml --><text onclick="boil">{{hello}}</text>复制代码// hello.jsexport default { data: { hello: 'PPT'
},
boil() { this.hello = '核武器';
}
}复制代码boil メソッドが実行されます。 PPT を 核兵器 に変更するために呼び出されます。
<p>この裏で何が起こったのでしょうか? Vue 2.0 に精通している学生は、次のことをすぐに考えるはずです。
イベントがトリガーされたときに対応するコールバックを実行できるように、イベント メカニズムが必要です。
に割り当てるときに対応するコールバックを実行できるように、データ ハイジャック メカニズムが必要です。
属性を次のように変換します。 JS オブジェクトの属性フィールド。
属性がチェックされ、C に登録されます。これは、すべてのコンポーネントがネイティブであることと同等です。
に基づく ViewModel (サイズは数百行) です。
スタイルの標準化 API は公開されません。
を参照してください) #core/index.js、observer.js、および subject.js)、これは関数を 1 つだけ持つことと同等です: setTimeout から document.getElementById 、console.log 、fs.readFile まで、実際の IO 操作を実行できるこれらの関数はすべてです。 「エンジン API とプラットフォーム API を一緒に接着する 」のランタイムによって提供される必要があります。ランタイム自体の原理は複雑ではありません。たとえば、私の個人的な記事「JS エンジンから JS ランタイムへ」では、既製の QuickJS エンジンを利用して自分でランタイムを構築する方法が説明されています。
<p>では、「Hongmeng 2.0」では JS ランタイムはどのように構築されているのでしょうか?いくつかの重要なポイントがあります:
<text> および <p> の形式の各 XML タグ コンポーネントは、 などの JerryScript にバインドされた C コンポーネント クラスに対応します。 TextComponent や pComponent など。 @system というプレフィックスが付いた一連の組み込みモジュールもあり、JS で利用可能なルーター / オーディオ / ファイルなどのプラットフォーム機能を提供します。 (ohos_module_config.hを参照してください)。 router_module.cpp、js_router.cpp および # # を参照) #js_page_state_machine.cpp)。簡単に言えば、この「ルーティング」は次のように実装されます。
ネイティブ メソッドを呼び出し、C を入力します。
など) に従って新しいページ JS をロードし、新しいページ ステート マシン インスタンスを作成し、Init 状態に切り替えます。 。
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' のようなコードを実行して、依存関係の追跡をトリガーします。 <p>特記事項: この主観的なレビューは、「Hongmeng 2.0」の現在の GUI フレームワークのみを対象としています。勝手に誤解しないでください。<p> 「Hongmeng 2.0」の GUI 部分のハイライトについては、個人的に次のことが考えられます:
<p>もちろん、自動車メーカーは飛行機を作るとは言いませんよね？<p>つまり、これは確かに私が作った麻婆豆腐の皿ですが、一部の人が言うような満州漢の宴会ではありません。 <p>最後に個人的な主観的なコメント: <p>まず第一に、この GUI テクノロジ スタックは、オープン ソース製品を組み立てて描画するときに得られる主流レベルに達しています。ただし、パフォーマンスと表現力の点では、そのコア モジュールと Microsoft MakeCode などの産学研究の最先端ソリューションとの間には、依然として世代間のギャップがあります。 <p>第二に、多数の専門家による精密な計算が必要なロケット科学とは考えないでください。私は独自の研究開発を軽視しているわけではありませんが、皆様にご理解いただけることを心から願っています。「##」 #私も実際にこの件に参加することができます!" OS や GUI はそれほど謎ではありません。学習、使用、貢献のために利用できる国内の成熟したオープンソース製品が多数あります (ちなみに、RT-Thread は非常に簡単に体験でき、中国製なので早期導入者にお勧めします）。結局のところ、製品が技術的にどのようなものであるかを本当に理解している場合にのみ、下心を持つ人々によって操作される可能性は低くなります。 最後に、JavaScript に精通しているすべてのフロントエンド開発者に、<p>なぜあなたは今でもHongmeng を奇妙な方法で笑うのですか? Honmeng は中国の JavaScript の資産コードです。 JavaScript は、Hongmeng のような「国家兵器」によって採用されており、フロントエンドの道路の信頼性、理論的信頼性、文化的信頼性、テクノロジー スタックの信頼性を大幅に高めることができます。このように継ぎ足しと自主研究を組み合わせれば、一気に全国で高い評価を得ることができる、この道は本当に魅力的です（小声） 団結して精力的に宣伝・宣伝していかなければなりません大国間の競争における核抑止力としての JavaScript の地位は、JavaScript を書けると言う限り、誰もがあなたを尊敬するレベルにまで上昇する必要があります。フロントエンド プログラマーである限り、いつでも列に並ぶことができます。切符を買って、バスに乗ったら席を譲って、部屋を確保して、無料でセックスできる…良い時代が来ています！ <p> あなたは国の柱になりたいですか? JavaScriptを書いてみよう！ <p>もう言葉はありません、国を元気にするために一生懸命頑張ります！ <p>
プログラミング学習について詳しく知りたい方は、<p>php training のコラムに注目してください！
以上がHonmeng JavaScript GUI テクノロジー スタックを見てみましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
