1. モジュラーコンセプト複雑なプログラムを、特定のルール (仕様) に従って複数のブロック (ファイル) にカプセル化し、それらを組み合わせます。ブロックの内部データと実装は非公開であり、一部のインターフェース (メソッド) のみが外部に公開され、他の外部モジュールと通信します。 2. モジュール化モジュラー JavaScript を使用する理由は何ですか? 実際の開発プロセスでは、変数、関数、オブジェクトなどの名前の競合が頻繁に発生し、競合が発生してグローバル変数が汚染される可能性があるためです。
3. モジュール化プロセス1. 通常の記述(グローバル関数と変数)実際、異なる関数や変数をまとめる限り、それは単純なモジュールです。これの欠点は明らかで、変数が簡単に汚染されるということです。 var name = 'カカ'; 関数cat1(){ name = '年々'; } 関数cat2(){ name = '魚がいます'; } 2. オブジェクトのカプセル化モジュール全体をオブジェクトに配置し、外部からアクセスするときにオブジェクトのプロパティまたはメソッドを直接呼び出します。 var 猫 = { 名前:「カカ」 cat1:関数(){ var name = '年々'; console.log(名前); }, cat2:関数(){ var name = '魚がいます'; console.log(名前); } } cat.name;// Kakacat.cat1();// Nian Niancat.cat2();// 魚がいる この方法は変数の競合問題を解決しますが、外部の関係者によって自由に変更されやすいという欠点があります。 cat.name = 'ルー・ルー'; 3. 匿名関数メソッドvar cat = (関数() { // 匿名関数のローカル変数名 var name = 'カカ'; // 匿名関数のローカル関数 cat1 var cat1 = 関数() { var name = '年々'; console.log(名前); }; // 匿名関数のローカル関数 cat2 var cat2 = 関数() { var name = '魚がいます'; console.log(名前); }; //ウィンドウを通して外部ポートを公開します。外部からアクセスできるようにする場合は、ここに配置します。window.myModule = { 猫1:猫1, 猫2:猫2, 名前:名前、 }; })(); console.log(myModule.name);// name変数は露出ポートに配置され、出力できます。結果は次のようになります。KakamyModule.cat1();// cat1関数は露出ポートに配置され、出力できます。結果は次のようになります。Nian NianmyModule.cat2();// cat2関数は露出ポートに配置され、出力できます。結果は次のようになります。魚がいます 変数名が削除されると、その時点ではアクセスできず、結果は未定義になります。これにより、変数が任意に変更されないという問題が解決されます。 ウィンドウ.myModule = { 猫1:猫1, 猫2:猫2, }; console.log(myModule.name); // 未定義 匿名関数メソッドは、基本的に関数汚染と変数の恣意的な変更の問題を解決し、モジュール仕様の基礎でもあります。 4. モジュラーソリューション匿名関数が自分自身を呼び出す方法に基づき、コードの依存関係を強化するために、ほとんどの JavaScript ランタイム環境には独自のモジュール仕様が採用されるようになりました。 Commonjs、AMD、CMD、ES6モジュールの4つのカテゴリに分けられます。 1. コモンJS①ブラウザ環境ではなく、ノード環境で使用②NodeJSは仕様に準拠③依存関係を導入するにはrequire()を使用する④モジュールを公開するにはexportsを使用する 2. AMD①ブラウザ環境でのモジュールの非同期読み込み ②RequireJSが準拠する仕様 ③モジュール管理ツールライブラリrequire.jsに依存 ④AMDが依存関係の事前配置を提唱 3. CM①ブラウザ環境では非同期と同期の両方の読み込みをサポート ②SeaJSは仕様に準拠 ③CMDは最も近いものに依存することを推奨 4. ES6モジュールES6 のモジュール構文は、コンパイル時にモジュールの依存関係を決定でき、入力と出力の変数宣言も決定できます。これはもはや単なるモジュール仕様ではなく、次の機能を備えた JS 言語の標準構文として使用されるようになりました。 ①ブラウザとサーバー環境の両方でサポートされています ②モジュールの依存関係と変数はコンパイル時に決定でき、その他のモジュール仕様は実行時に決定されます ③エクスポートコマンドはモジュールの外部インターフェースを指定するために使用されます ④インポートコマンドは他のモジュールが提供する関数を入力するために使用されます ここでもう 1 つ付け加えておきたいことがあります。ES5 バージョンのモジュール化ソリューションは、言語レベルでのモジュール化しか実現しません。欠点は、ほとんどの JavaScript オペレーティング環境で直接実行できないことです。正常に実行するには、ビルド ツールを使用して標準の ES5 に変換する必要があります。ここでは、自動ビルド ツール webpack を使用する必要があります。 上記は、Js モジュール化の動作原理とソリューションの詳細な説明です。Js モジュール化の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。 以下もご興味があるかもしれません:
|
>>: Windows での Maven のインストールと構成に関するグラフィカル チュートリアル (ローカライズされたウェアハウス構成を含む)
昨日はデータベースへの接続に問題はありませんでしたが、今日はデータベースへの接続時にこのエラーが報告...
1. Dockerネットワークカードを作成する [root@i ~]# brctl addbr d...
序文MySQLでは、準備、実行、割り当て解除を正式にはPREPARE STATEMENTと呼びます。...
JS タイマーを使用して、要素に移動する効果のあるメソッドを作成します。実装のアイデアは、まず要素の...
ソート問題最近、Geek Time の「45 Lectures on MySQL Practice」...
この記事では、参考までに、簡単なログイン機能を実装するためのvue+tp5の具体的なコードを紹介しま...
目次概要マップされた型を使用して Object.freeze() を構築するマッピングタイプの構文は...
目次結合アルゴリズム駆動テーブルと非駆動テーブルの違い1. 単純なネストループ結合、単純なネスト、イ...
今日、インターフェースの同時実行の問題を検証したところ、これまでredisで解決していた同時実行のプ...
この記事では、MySQL のデータベース テーブルの容量を確認するためのコマンド ステートメントを紹...
1: グループ化関数の記述順序 1 選択 ... 2 から ... 3 どこで ... 4 グループ...
レコード ロックは、単一のインデックス レコードをロックします。レコード ロックは常にインデックスを...
テーブルの style="table-layout:fixed;" を設定し、次...
この記事では、HTTP プロトコルのリファラーのメタデータ パラメータの提案について説明します。この...
MySQL 5.7 には、オンライン DDL、マルチソース レプリケーション、拡張された半同期、テー...