「スニペット」がMalina.jsを使用したWeb開発にどのように役立つか





これはプログラミングにおいて明白で有用なことなので、なぜ関数が必要なのか誰も尋ねません。関数を使用すると、コードを再利用して、アプリケーションアーキテクチャを改善できます。



コンポーネントテンプレートで同じ機能を使用してみませんか。最近の多くのフレームワークでは、コンポーネントを他のコンポーネント内で使用できます。しかし、これは単なる機能というよりも、モジュールを接続するようなものです。結局のところ、コンポーネントは、テンプレートに加えて、独自のJavaScriptコード、独自のスタイルを持つことができ、非常に分離されています(これは良いことです)。



この場合、Malina.jsにいわば「フラグメント」テンプレートの「関数」があり、テンプレートのさまざまなフラグメントを再利用でき、コンポーネントよりもはるかに軽量で、別のファイルに移動する必要がありません(コンポーネントで必要になることがよくあります)。結果としてフラグメントが通常の関数にコンパイルされるため、通常の関数が持つ機能、たとえば再帰やクロージャー。



1.テンプレートのフラグメントの再利用



コンポーネントテンプレートで作業している場合、特にそれがフォーム、入力要素、パネルなどである場合、再利用できる重複ブロックがある可能性があります。以下は、js-framework-benchmarkのテンプレートの一部で、同じボタンがいくつかあります。「フラグメント」







を使用すると、次のようになります。 ここでは、2つの引数を持つフラグメント宣言され、ボタンから「クリック」イベントが送信されますこのボタンの行はディレクティブを使用して作成できますが、フラグメントは1行だけで使用することはできません。







buttonid, name@clickfor/each



2.閉鎖



なぜなら フラグメントは関数にコンパイルされます。つまり、ループ内であっても、ほぼどこでも宣言for/eachできるため、クロージャーを使用できます。以下の例では、スニペットにboxは、引数textcolorループからの閉じた変数、およびclickクリック時に呼び出されるコンポーネントのルートからの関数への参照があります。@click={click(text, color)}







3.再帰



「フラグメント」はそれ自体を呼び出すことができ、再帰を実行してツリーを構築できます。また、「フラグメント」はコンポーネントの下部に配置できます。JavaScriptでは、関数は、最後に宣言されている場合でも、(現在の)スコープ全体で使用できます。



以下は、drawそれ自体を呼び出してツリーを構築するスニペットの例です。







結論



「フラグメント」は、コンポーネント内で再利用できる軽量のテンプレートの「ピース」であり、コンポーネントをよりコンパクトにし、構造を改善するのに役立ちます。



すべての例は、オンラインREPLエディター試すことができますは要点です。



清聴ありがとうございました。



All Articles