フロントエンドのモジュール性に関する 3 つの仕様

今回はフロントエンドモジュール化の仕様と、フロントエンドモジュール化仕様の注意点をご紹介します。実際の事例を見てみましょう。

モジュール性と言えば、これがフロントエンド開発におけるコンセンサスとなっているのは間違いなく、私も開発中に徐々にモジュール性の概念を受け入れ、モジュール開発のメリットを深く実感してきました。なぜそんなことを言うのですか？簡単なコードを見てみましょう: (モジュール化なし)

これは、モジュール化が使用される前によく見られる現象です。本体の下部に大量の js を配置しますが、これをご存知ですか?この方法には 2 つの大きな問題があります:

1. リーフはツリーに依存し、ツリーはルートに依存するため、上から下への root.js、tree.js、leaf.js の順序を間違えることはできません。順序は同じです。変更すると機能しません。

2. 私が初心者または初心者であれば、leaf.js を取得するとき、それがtree.js に依存していることは知っていますが、それは知っていますか？ Tree.js は実際には root.js に依存していますか?おそらく root.js を実行するには他の js に依存する必要があるでしょうか?

モジュール化は、まさにこの種の js ファイル間の不確実な依存関係を保存するためにこの時に登場しました。

AMD仕様

この仕様と言えば、今ではほとんどの人が使っていませんが、この仕様の基礎となるのは、まず .js の HTML ファイルに require を導入する必要があるということです。 jQuery の構文を使用する場合と同様に、最初に jQuery.js をロードする必要があります。この面倒な require.js を導入した後、大量の js ファイルは 3 つのカテゴリに分類されます:

最初のカテゴリ: simple define()、これは require.js 内のリソースへの参照によるものです (リソースも渡されます)パラメータとして) を最初に定義し、次に require/define する必要があります。このタイプは純粋な定義を担当します

2 番目のタイプ: パラメータ付きのdefine(["other registered js"])、このカテゴリでは、その他明確に定義された js が引用され、同時に自分自身が別のものを定義し、二重の責任を負います

3 番目のカテゴリ: simple require(["Other Definition js1 ","Other Definition js2",.. .]), このカテゴリでは、リソースの引用にのみ焦点を当てる必要があり、多くのリソースを参照できます。 どうやって？面倒だと感じますか？関数をグローバルに定義する必要があり

、require.jsを参照する必要があるので、怒って放棄してください。

CMD仕様

実際、CMD仕様とAMD仕様の間に本質的な違いはありません。違いは、依存するモジュールの実行タイミングの処理が異なることです。 どちらもモジュールを非同期でロードしますが、AMD はフロントエンドに依存しています。js は、依存するモジュールが誰であるか、どの js に依存する必要があるかを簡単に知ることができるため、これらの js に依存する理由については、次のとおりです。待ってください、待ってください リソースがロードされたら、CMD が近くの依存関係であることについて説明します。この依存モジュールを使用する必要がある場合は、それをロードして使用します。

これは何ですか？今夜は三国志5話を見る予定です。 AMD は最初にエピソード 1 から 5 までの 5 つのウィンドウを開き、最初にすべてのエピソードをバッファリングします。CMD は最初に最初のエピソードのウィンドウを開き、最初のエピソードの視聴が完了するまで待ちます。 2 番目のエピソードを見たい場合は、2 番目のエピソードにジャンプしてください。

CommonJS 仕様

一般に、現在最も頻繁に使用されており、優れたモジュール仕様として誰もが認識しているのは CommonJS です。

JS ファイルをエクスポートするには、 module.export={xxx: 出力したいコンテンツ} を使用するだけで、別の JS で何かを引用したい場合は、var xxxx= Just quote を使用するだけです。これは、モジュールを非同期的にロードするのではなく、一度に同期的にロードします。個人的には、この基準はある程度良いと言えると思いますし、「666」を使って説明すること自体が間違っているわけではありません。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Vue.js フォーム入力バインディング

JS 型の値をブール型に変換するためのルールとは何ですか

以上がフロントエンドのモジュール性に関する 3 つの仕様の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。