イベントシステムという言葉は小規模なプログラムの開発でよく聞くことがありますが、その技術についてはよく分からないかもしれませんので、今回は実際の事例を交えながら解説していきます。
イベントとは何ですか?
WeChat アプレットの公式ドキュメントでは次のように説明されています。イベントは子コンポーネントから親コンポーネントにデータを渡すために使用され、あらゆるデータを渡すことができます。
アプレット開発におけるイベントとは、ビュー層からロジック層への通信方法を指し、主にユーザーの行動をロジック層にフィードバックして処理することを目的としています。イベントはコンポーネントにバインドできます。トリガー イベントに達すると、ロジック層の対応するイベント処理関数が実行されます。オブジェクトには、ID、データセット、タッチなどの追加情報を含めることができます。
要約すると、アプレットのイベントはユーザー インタラクションを処理する手段であり、ユーザーの操作動作をリッスンして、対応するイベントをトリガーして特定のビジネス ロジックと表示効果を処理します。アプレットイベントには主にユーザー操作イベントとカスタムイベントがあり、開発者はユーザー操作を正しく処理し、良好なユーザーエクスペリエンスを実現するために、これらのイベントのメソッドや仕組みを理解する必要があります。
イベントの分類
アプレット開発におけるイベントは、バブリング イベントと非バブリング イベントに分けられます。
1.バブリングイベント
コンポーネント上のイベントが発生すると、イベントは親ノードに渡されます。たとえば、次の図に示すように:
2. 非バブルイベント
コンポーネントでイベントが発生しても、イベントは親ノードには渡されません。特別な宣言のないすべての非バブリング イベント (フォームの送信イベント、入力の入力イベント、スクロールビューのスクロール イベントなど)。
事例デモンストレーション
具体的な操作方法 ここでは WXML を例に説明しますが、基礎となるロジックの観点から見ると、イベント バインディングを実行していない場合は、アプレットの WXML 構造でキーと値のペアを宣言するだけです。
WXML を virtualDOM にコンパイルします。ここでのコンパイルは、virtualDOM で使用される $gwx 関数です。宣言されたタップ キーと値のペアがどこでコンパイルされるかを見てみましょう。
上記で宣言されたイベント タグが見つかったレベルでは、attr 属性内にbindtap:bindTextTap キーと値のペアがあることがわかります。では、この DOM 構造はどのようにしてイベント解析を実行するのでしょうか?
解析アルゴリズムは、基礎となる基本ライブラリの WAWebview.js ファイルにあります。基礎となる基本ライブラリの後の章で知識が閉ループを形成するのを防ぐために、事前にイベント モジュールの完全なプロセスを分析しましょう。 。
基礎となる基本ライブラリ内の virtualDOM 関数 applyProperties を解析するためのソース コードは次のとおりです。イベント解析を含む属性解析が行われます。
l 関数のソース コードはすぐに返されます。
applyProperties には、virtualDOM の attr 属性をトラバースするための forIn ループがあることがわかります。次に、e 関数を実行します。ここで、e 関数のパラメータと属性名が attr オブジェクトのキーであることがわかります。
e 関数には、特別な属性名を判断するために使用される if が多数あります。バインドするタップ イベントのキーと値のペアは、bindtap:bindTextTap です。キーは bindingtap で、イベント バインディングには、bind などのプレフィックスが多数あります。 10 行目の if で通常の if (n = e.match(/^(capture-)?(mut-)?(bind|catch):?(.+)$/)) を使用して、 attr の属性を判定します。名前がイベント属性であるかどうかを判断します。イベント属性の場合は、E関数を実行し、exparserコンポーネントシステムの属性属性名exparser:info-attr-に変換します。
ミニプログラムイベントシステム概要
アプレットでは、イベントはユーザー インタラクションを処理する重要な手段であり、ユーザーの操作動作やカスタム イベントをリッスンすることで、複雑なビジネス ロジックと優れたユーザー エクスペリエンスを実現できます。開発者は、さまざまなイベントの種類とトリガー方法を理解し、さまざまなビジネス ニーズに応じてそれらを柔軟に使用および処理する必要があります。同時に、適切なイベント設計と処理も、アプリケーションの品質とユーザー満足度を向上させる重要な要素の 1 つです。
小規模プログラムについて話すとき、最初に思い浮かぶのは、WeChat 小規模プログラム、Alipay 小規模プログラムなどです。実際、私たちが開発した小規模プログラムをさまざまなプラットフォームに配置することに加えて、FinClip SDK を統合して小規模プログラムを配置することもできます。このようにして、ワンタイム開発とマルチターミナル シェルフを最大限に実現し、開発の人員とコスト投資を大幅に削減できます。
