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 つに...
1. 要件:データベースのバックアップは、実稼働環境にとって特に重要です。データベースのバックアップ...
配列メソッドJavaScript には多くの配列メソッドが用意されています。次の図は、ほとんどの配列...
1. 背景Netplan は、Ubuntu システムのネットワーク設定を簡単に管理および構成できるよ...
SeLinuxを無効にするsetenforce 0永久に閉店: vi /etc/selinux/c...
sort コマンドは非常によく使用されますが、-o、-n、-u、-r などの多くのパラメーターがあり...
設定ファイルを server.xml と content.xml に書き込みます。サーバーを再起動す...
この記事では、kubernetes1.5.2 から kubernetes1.10 にアップグレードす...
(1)実験環境youxi1 192.168.5.101 ロードバランサーyouxi2 192.168...
pssh は、多数のマシンでのバッチ ssh 操作に使用される、Python で実装されたオープン ...
キーペアの分離1 つ以上の Linux インスタンスから SSH キー ペアのバインドを解除します。...
HTML では、一般的な URL はさまざまな方法で表現されます。相対 URL:コードをコピーコード...
目次1.コンポーネントtimelineH.vueを実装する2. コンポーネントの呼び出しこの記事では...
CSS3を使用して、Googleログインページと同様の入力ボックスをアニメーション化します。効果1 ...
実際のプロジェクトでは、緊急事態を防ぐためにデータベースを頻繁にバックアップする必要があります。しば...