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 でコンテナのポート マッピングを動的に変更する方法
MySQL を使用する場合、多くの開発者は一部の列に対して関数計算を実行することが多く、その結果、イ...
最近、Vue プロジェクトについて知り、ElementUI でデータを xlsx および Excel...
目次1. uniappプラグインマーケットのリファレンスプラグイン2. 具体的な導入プロセス1. m...
効果画像: 1. はじめに独自のアプレットでこのような機能を実装する必要がある1. 核となる考え方ス...
その理由は、このタイプの Web ページが WAP と呼ばれるワイヤレス プロトコルから生成されたた...
目次基本的な設定バージョンとDockerイメージについて始めるelasticsearch.ymlにつ...
1. scale() メソッドズームとは「縮小」と「拡大」を意味します。 CSS3 では、scal...
では、早速リソースについて見ていきましょう。 123WORDPRESS.COM ダウンロードSQLy...
目次リアクティブ機能使用法: toRef 関数 (理解するだけ)使用法: ref関数レスポンシブデー...
この記事では主に、 list-itemの下にある::master疑似要素、 list-style-i...
1. MySQLをダウンロードする1.1 ダウンロードアドレスhttps://downloads.m...
3つのモードブリッジ(ブリッジ モード)、NAT(ネットワーク アドレス変換モード)、ホストオンリー...
目次1. テレポートの紹介1.1. 複数のテレポートを使用する2. テレポートを使用する理由3. テ...
目次問題の説明方法 1 (バックエンドが画像 URL を返す)方法 2 (フロントエンドで requ...
Seurat は、単一細胞解析用の重量級の R パッケージです。使用したことがある人なら誰でも、その...