0. モジュールとは何か歴史的に、JavaScript にはモジュール システムがなかったため、大規模なプログラムを小さな相互依存ファイルに分割し、それらを簡単な方法で組み立てることは不可能でした。他の言語にもこの機能があり、例えばRubyのrequire、Pythonのimport、さらにはCSSにも@importがありますが、JavaScriptにはこの点に関するサポートがないため、大規模で複雑なプロジェクトの開発に大きな障害となっています。 ES6 より前に、コミュニティはいくつかのモジュール読み込みソリューションを開発しましたが、その中で最も重要なのは CommonJS と AMD でした。 ES6 モジュールの設計思想は、モジュールの依存関係や入力変数、出力変数をコンパイル時に決定できるように、可能な限り静的にすることです。 ES6 モジュールはオブジェクトではなく、エクスポート コマンドを通じて出力用に明示的に指定され、インポート コマンドを通じてインポートされるコードです。 モジュール システムによって解決される主な問題は次のとおりです。
1.モジュールの読み込み<script> タグを使用してモジュールをロードする場合は、type="module" を追加する必要があります。 1.1 方法1<スクリプトタイプ="モジュール"> 「./module.js」からモジュールをインポートします。 </スクリプト> 1.2 方法2<script src="./module.js" type="module"></script> 2. 輸出と輸入2.1 モジュールのエクスポートは他のモジュールからインポートしてアクセスできます。例 1: About.js を使用して Base.js 内の Base オブジェクトを呼び出し、ホームページに出力します。 インデックス.html <スクリプトタイプ="モジュール"> 「./js/About.js」からAboutをインポートします。 console.log(バージョン情報); </スクリプト> ベース 定数ベース = { ニックネーム: 'admin', 年齢: 19 } デフォルトのベースをエクスポートします。 について '../js/Base.js' から Base をインポートします。 const src = `ニックネーム:${Base.nick},年齢:${Base.age}.`; デフォルトの src をエクスポートします。 出力:
2.2 輸出されていなくても輸入できる例 2: About.js はエクスポートされず、ホームページにインポートされます。 インデックス.html <スクリプトタイプ="モジュール"> 「./js/About.js」をインポートします。 </スクリプト> について const src = 'Hello World!'; コンソールログ(ソース); 出力:
2.3 インポートされたコードは一度だけ実行されます例 3: About.js を 3 回インポートし、エクスポート結果を確認します。 インデックス.html <スクリプトタイプ="モジュール"> 「./js/About.js」をインポートします。 「./js/About.js」をインポートします。 「./js/About.js」をインポートします。 </スクリプト> について const src = 'Hello World!'; コンソールログ(ソース); 出力: 「こんにちは世界」 3. デフォルトのエクスポートと対応するインポートexport default はデフォルト値をエクスポートするために使用されます。モジュールには 1 つしか設定できません。 エクスポートにエクスポート デフォルトを使用する場合、インポート名は任意の名前にすることができます。 例 4: export default を使用してエクスポートし、インポートに任意の名前を付けます。 インデックス.html <スクリプトタイプ="モジュール"> 「./js/About.js」からbbbをインポートします。 コンソールにログ出力します。 </スクリプト> について const src = 'Hello World!'; デフォルトの src をエクスポートします。 出力:
4. 輸出とそれに伴う輸入export を使用してエクスポートする場合、インポートの名前は任意にすることはできません。 例 5: export を使用してエクスポートします。 インデックス.html <スクリプトタイプ="モジュール"> 「./js/About.js」から{age、nick}をインポートします。 console.log(ニックネーム、年齢); </スクリプト> jsについて 定数年齢 = 18; {age} をエクスポートします。 // 年齢をエクスポートします; × // エクスポート const age = 18; √ エクスポート const nick = 'admin'; 出力:
5. モジュールに関する注意事項1. モジュールでは、トップレベルの this は undefined を指します。 2import には昇格効果があり、モジュール全体の先頭に昇格され、最初に実行されます。 3. インポートが実行された時点では、コードはまだ実行されていません。 4. インポートとエクスポートは、コード ブロック内ではなく、モジュールの最上位レベルでのみ実行できます。 5.import() は条件付きでインポートできます。 6. 複合書き込みメソッドはエクスポートされており、現在のモジュールでは使用できません 複合書き込み、インポートしてからエクスポート: './js/About.js' から About をエクスポートします。 要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Docker でコンテナのポート マッピングを動的に変更する方法
一つの環境Alibaba Cloud Server: CentOS 7.4 64 ビット (RedH...
1. マックヴラン前回のブログ投稿で紹介した Docker コンテナのホスト間通信を実現するための ...
背景Navicat は、最高の MySQL 視覚化ツールです。ただし、ビューのインポートとエクスポー...
1. マスタースレーブレプリケーションとは何ですか?マスタースレーブレプリケーションは、スレーブデー...
1. 環境: CentOS7、OpenSSL1.1.1k。 2. コンセプト:ルート証明書: サーバ...
目次1. JSONとは何か1.1 配列リテラル1.2 オブジェクトリテラル1.3 混合リテラル1.4...
ログインを提供し、ユーザー情報データインターフェースを取得するapi/user.js内 '@...
目次1. ユーザーとユーザーグループの重要性1) ユーザーの存在意義2) ユーザーグループの重要性2...
Web プロジェクトの開発プロセスでは、CSS ファイルや JS ファイルを参照することがよくあり...
この記事では、MySQL 8.0.13のインストールと設定のチュートリアルを参考までに紹介します。具...
絶対位置決め方式: (1)親要素を相対配置に設定します。親要素の高さを指定しない場合は、左の子要素の...
目次1. テストデータ2. ヌル値による不便3. スペース、空の値、null をどのように判断すれば...
目次Vue2 ライティングVue3プラグインのバージョンの記述Vue3 動的コンポーネントの記述書き...
CSS3 パターン ギャラリーこの CSS3 パターン ライブラリには、純粋な CSS3 を使用して...
目次1. MySQLイメージを取得する2. ダウンロードが完了したか確認する3. MySQLはローカ...