web-dev-qa-db-ja.com

副作用の意味のes6インポート

私はes6 importステートメントを読んでいました MDNのリファレンス 。構文:

import "my-module";

バインディングのみをインポートせずに、副作用のみのモジュール全体をインポートします。 副作用の意味がわかりません。私はangularimport "angular"。 Angularウィンドウにバインドしますが、オブジェクトを返しません。したがって、これが副作用として正確に呼び出されるかどうかはわかりません。

何もエクスポートせず、何か他のものをインポートする必要がある場合、これは副作用のみのモジュールです。それを初期化するためだけにインポートします。

ピュアおよび非ピュアモジュール

モジュールを関数として考えると、コンテンツをエクスポートすることによってのみスコープに影響を与えるモジュールは、常に同じものを返す関数(パラメーターのない純粋な関数)のようなものです。 React 15.01を何回インポートしても、常に同じメソッドを含むオブジェクトを取得します。

副作用のあるモジュールは、他の方法でスコープを変更してから何かを返すモジュールであり、その効果は常に予測できるとは限らず、外部の力の影響を受ける可能性があります(純粋な機能ではありません)。たとえば、ポリフィルは、それが有効にする機能がブラウザで既にサポートされていることを検出するため、何もしないかもしれません。

副作用の例:

  • Angularはグローバルwindowオブジェクトにバインドしますが、何もエクスポートしません。
  • babel polyfill のような、サポートしていないブラウザーでES6機能を有効にするポリフィルは副作用です。
  • 多くのjQueryプラグインは、自分自身をグローバルjQueryオブジェクトにアタッチします。
  • バックグラウンドで実行され、ユーザーの操作を監視し、データをサーバーに送信する分析モジュール。
  • CSSモジュールを使用していない場合、webpackにCSSをインポートすることは副作用と見なすことができます。
27
Ori Drori

以下に例を示します。

//a.js
function print1()
{
  console.log("export print1 is working");
}

function print2()
{
  console.log("non-export print2 is working");
}

print1();
print2();

//b.js
import "a.js";

「b.js」を実行すると、印刷されたメッセージが表示されます。

副作用

10
derek

以下のコード例を検討してください。何かをインポートしようとすると、何もエクスポートされませんが、多くのことを行い、既存のコードを上書きします(もしあれば)副作用です。

import Ember from 'ember';
Ember.RSVP.configure('onerror', function(error) {
    ....
});

app.js:

import './overrides/extra';
2
Farhan Ansari