es6 にリソースをインポートするために使用するもの

es6 では、import ステートメントまたは import() を使用してリソースをインポートできます。 import コマンドは、「import {member} from 'module identifier'」という構文で、指定したモジュール (リソース ファイル) をインポートするために使用されます。import() は、「import (resource location)」という構文でファイルまたはモジュールをインポートするために使用されます。 」。

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

モジュール開発は、ES6 モジュール仕様で定義されている es6 で実行できます。

• 各 js ファイルは独立したモジュールです。

• 他のモジュール メンバーをインポートするには import キーワードを使用します。

• モジュール メンバーを外部に共有するには expost キーワードを使用します

export コマンド

##export

モジュール関数は、主に

export と import## という 2 つのコマンドで構成されます # 。 export コマンドはモジュールの外部インターフェイスを指定するために使用され、import コマンドは他のモジュールによって提供される関数をインポートするために使用されます。 モジュールは独立したファイルです。このファイル内の変数はすべて外部から取得することはできません。モジュール内の変数を外部から読み取れるようにしたい場合は、

export

キーワードを使用して変数をエクスポートする必要があります。 例:

//test1.js
export var firstName = 'mike'
export var lastName = 'Jack'

上記のコードは、ユーザー情報を保存する

test1.js

ファイルです。 ES6 はこれをモジュールとして扱い、export コマンドを使用して 3 つの変数を外部にエクスポートします。上記に加えて、export
を記述する別の方法もあります。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">//test1.js var firstName = &amp;#39;mike&amp;#39; var lastName = &amp;#39;Jack&amp;#39; export {firstName, lastName}</pre><div class="contentsignin">ログイン後にコピー</div></div>

export

このコマンドは、変数の出力に加えて、関数や関数を出力することもできます。 class <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">export function add(x, y){ return x + y }</pre><div class="contentsignin">ログイン後にコピー</div></div>

export

コマンドは、モジュールの最上位にある限り、モジュール内のどこにでも使用できます。ブロックレベルのスコープにある場合は、import コマンド

as## と同様にエラーが報告されます。 #通常、export

出力変数は元の名前ですが、

as キーワード

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

import コマンド

## を使用して名前を変更できます。

#export コマンドを使用してモジュールの外部インターフェイスを定義した後、他の JS ファイルは

import

コマンドを通じてこのモジュールをロードできます。入力変数 Name を再フェッチしたい場合は、import コマンドで as を使用して入力変数の名前を変更する必要があります。

import {firstName, lastName} from './test1.js'
console.log(firstName,lastName)

importコマンドの本質は入力インターフェイスであるため、コマンドによって入力される変数はすべて読み取り専用です。つまり、モジュールをロードするスクリプト内でインターフェイスを書き換えることはできません。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">import {lastName as suName} from &amp;#39;./test1.js&amp;#39;</pre><div class="contentsignin">ログイン後にコピー</div></div>

import

その後の from は、モジュール ファイルの場所を指定します。相対パスまたは絶対パスを指定できます。

.js

サフィックスは省略可能です。パスのないモジュール名だけの場合は、モジュールの場所を JavaScript エンジンに伝えるための構成ファイルが必要です。モジュールの全体的な読み込み特定の出力値をロードする場合、全体としてロードを使用することもできます。つまり、アスタリスク (*) を使用してオブジェクトを指定すると、すべての出力値がこのオブジェクトにロードされます。 次の

circle.js

ファイルは、2 つのメソッド

area

と

circumference

を出力します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">import {a} from &amp;#39;./xxx&amp;#39; a = {} //报错</pre><div class="contentsignin">ログイン後にコピー</div></div>次に、このモジュールをロードします。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">// circle.js export function area(radius) { return Math.PI * radius * radius; } export function circumference(radius) { return 2 * Math.PI * radius; }</pre><div class="contentsignin">ログイン後にコピー</div></div>上記はロードするメソッドを一つずつ指定する方法ですが、全体のロード方法は以下の通りです。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">// main.js import { area, circumference } from &amp;#39;./circle&amp;#39;; console.log(&amp;#39;圆面积：&amp;#39; + area(4)); console.log(&amp;#39;圆周长：&amp;#39; + circumference(14));</pre><div class="contentsignin">ログイン後にコピー</div></div>モジュールが全体としてロードされるオブジェクト (上記の例は

circle

) は静的に分析可能である必要があるため、実行時の変更は許可されないことに注意してください。以下の書き込み方法は使用できません。

import * as circle from './circle';
console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14));

exportdefaultコマンド

exportdefaultは、モジュールのデフォルト出力を指定するために使用されます

import * as circle from './circle';

// 下面两行都是不允许的
circle.foo = 'hello';
circle.area = function () {};

他のモジュールがモジュールをロードするとき、

import

コマンドでは匿名関数に任意の名前を指定できます<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">//export-default.js export default function(){ console.log(&amp;#39;foo&amp;#39;) }</pre><div class="contentsignin">ログイン後にコピー</div></div>

export default

コマンドは非匿名関数の前に使用できますが、関数名は匿名関数の外部では無効です。モジュールをロードするとき、それは匿名関数としてロードされます。本質的に、exportdefault は、

default

という名前の変数またはメソッドを出力することです。その後、システムはそれに任意の値を与えることを許可します。 name<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">import cus from &amp;#39;./export-default.js&amp;#39;</pre><div class="contentsignin">ログイン後にコピー</div></div>通常の出力とデフォルトの出力を比較<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">export default function test(){ console.log(&amp;#39;test&amp;#39;) }</pre><div class="contentsignin">ログイン後にコピー</div></div>#概要: export

対応する

import

ステートメントでは、curly を使用する必要があります。大括弧、

export デフォルト 対応する import ステートメントでは中括弧を使用する必要はありません。 exportdefault コマンドは、モジュールのデフォルト出力を指定するために使用されます。明らかに、モジュールはデフォルト出力を 1 つだけ持つことができるため、exportdefault はモジュール内で 1 回のみ使用できます。同じモジュール。 エクスポートとインポートの組み合わせ記述方法モジュール内の場合は、最初に入力してから同じモジュールを出力します import ステートメントは、export

ステートメント

と一緒に記述できます。

export {foo, bar} from 'my_module'
//可以简单理解为
import {foo, bar} from 'my_module'
export {foo, bar}

上面代码中，export和import语句可以结合在一起，写成一行。但需要注意的是，写成一行以后，foo和bar实际上并没有导入当前模块，只是相当于对外转发了这两个接口，导致当前模块不能直接使用foo和bar.

import()函数

import(specifier)

上面的代码中，import函数的参数specifier,指定所要加载的模块的位置。。import命令能够接受什么参数，import()函数就能接受什么参数，两者区别主要是后者为动态加载。

import()返回一个 Promise 对象。下面是一个例子。

const main = document.querySelector('main');
import(`./section-modules/${someVariable}.js`)
  .then(module => {
    module.loadPageInto(main);
  })
  .catch(err => {
    main.textContent = err.message;
  });

import()函数可以用在任何地方，不仅仅是模块，非模块的脚本也可以使用。它是运行时执行，也就是说，什么时候运行到这一句，就会加载指定的模块。另外，import()函数与所加载的模块没有静态连接关系，这点也是与import语句不相同。import()类似于 Node 的require方法，区别主要是前者是异步加载，后者是同步加载。

【相关推荐：javascript视频教程、web前端】

以上がes6 にリソースをインポートするために使用するものの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。