ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptでインポートを使用するにはどうすればよいですか?

JavaScriptでインポートを使用するにはどうすればよいですか?

不言
不言オリジナル
2019-01-19 17:00:5919019ブラウズ

ES6 では、JavaScriptでインポートを使用するにはどうすればよいですか? オブジェクトをモジュール化して管理できます。モジュール化することで機能を再利用できるだけでなく、保守性も向上します。

JavaScriptでインポートを使用するにはどうすればよいですか?

#import は、モジュールからエクスポートされた関数、オブジェクト、初期値を別のモジュールにインポートするために使用される構文です。

以下に示すように

import {模块名称} from "需要导入模块的路径名"

インポートを使用するにはどうすればよいですか?

このモジュールにはデフォルト モジュールと名前付きモジュールがあります。

最初にデフォルトのエクスポート モジュールと名前付きエクスポート モジュールを読み込みます

import {ModuleA, ModuleB} from "modules"; 
import Default from 'modules2';

最初の行では、モジュール A とモジュール B という 2 つの名前付きモジュールをモジュール ファイルからインポートします。

2 行目では、デフォルトのモジュールを modules 2 ファイルからインポートします。

モジュール エクスポートの実行

関数、オブジェクト、およびプリミティブ値をモジュールにエクスポートするには、エクスポートを使用する必要があります。

具体的な例を見てみましょう

デフォルト モジュールとしてエクスポートします

// alert.js
export default function () {
    alert("default module called!");
};

名前付きエクスポート

// utils.js
export function sum(x, y, z) {
    return x+y+z;
}
 
export function multiply(x, y) {
    return x*y;
}

sum および multiply という名前のモジュールをエクスポートできます。

この関数は、次のコードを呼び出すことで使用できます。

import { sum, multiply } from 'utils'; 
console.log(sum(1, 2, 3));
console.log(multiply(5, 8));

実行結果は次のとおりです。

->6
->40

この記事はここで終了します。さらに興味深い内容については、次の点に注目してください。 php 中国語 その他の関連コラムのチュートリアルはインターネット上にあります! ! !

以上がJavaScriptでインポートを使用するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。