Node.jsのモジュール式の2日目（2019年6月1日）

モジュラーはじめに

フロントのjsのコードの複雑さの向上に伴い、JavaScriptのモジュラーコンセプトが提唱され、フロントエンドのコミュニティはES6が標準となるまで、フロントエンドのモジュラーを引き続き実施します。

1。モジュラーは何ですか

モジュールは、ファイルのある
パッケージ：モジュールの束
項目からなるパッケージ

第二に、第一段階：無モジュラー

JavaScriptの最初の役割は、単にフォームを確認することです、その後、いくつかのアニメーションを追加しましたが、ファイル内のこれらのjsコードの多くを行うことができますので、我々はちょうどhtmlファイル内のスクリプトタグを追加する必要があります。
その後、フロントエンドの複雑さの増加に伴って、コードプロジェクト、スケーラビリティの可読性を向上させるためには、私たちのJSがより緩やかにアップファイル、もはやJSファイルではありません解決することができるのではなく、それぞれにモジュールとしてのjsファイル。だから、ときそれが何であるかを紹介するjsの方法は？以下のような何か：

    <script src="jquery.js"></script>
　　<script src="jquery_scroller.js"></script>
　　<script src="main.js"></script>
　　<script src="other1.js"></script>
　　<script src="other2.js"></script>
　　<script src="other3.js"></script>

それはすべてが、すべてのファイルを一緒にJS単純です。しかし、これらのファイルの順序はまた、他のドキュメントでのjQueryを使用するために導入するためにjqueryの、jqueryのプラグインを導入する必要性として、間違って行くことはできません。

1。利点：

JSファイルを使用する場合と比較して、そのような複数のjsファイルは、それが進行している最も簡単なモジュラーなアイデアを実現しています。

2。短所：

グローバルスコープを汚染。各モジュールは、世界的な使用が簡単にさらされているので、当然のことながら、我々はまた、解決するために、名前空間を使用することができ、グローバル変数の名前の競合につながります。
大規模なプロジェクトのために、様々なJSの多くは、開発者が手動で、依存関係のモジュールとコードライブラリを解決する高い維持費を投稿する必要があります。
依存関係は、明らかにされていませんメンテナンスを助長されていません。例えばmain.jsしかし、上記の文献から、我々はjqueryのは忘れてしまった場合、それはエラーになり、表示されていない、jqueryのを使用する必要があります。

第三に、第二段階：CommonJSの仕様

CommonJS JavaScriptはまた、CommonJSのネイティブサポートのWebPACKのフロントエンド元々サーバ・ノードで使用されたモジュラー仕様です。
この仕様によれば、各ファイルは、グローバル変数を汚染しない外部に露出されないこのモジュールで定義された内部変数の一部であるモジュールです。
核となるアイデアは、CommonJSにより依存する他のモジュールをロードする同期方法を必要とし、その後、輸出またはエクスポートを介しmodule.exportsはインタフェースに露出する必要があることです。次のように：

// a.js
var x = 5;
var addX = function (value) {
  return value + x;
};
module.exports.x = x;
module.exports.addX = addX;

ここa.js CommonJSは、標準モジュールです。ここでは、このモジュール、インターフェイスの外部に露出されたモジュールがエクスポートプロパティの代わりにモジュール、あなたは外のような外部変数にアクセスすることができますエクスポートすることができます。ここで、xおよびADDX。
輸出はmodule.exportsはへの参照です。例えば、我々は、モジュールの先頭にこのコードを考えることができます。
exports = module.exports 所以，我们不能直接给exports赋值，比如number、function等。 然后我们就可以在其他模块中引入这个模块使用了： vara = require('./a.js'); console.log(example.x); // 5 console.log(example.addX(1)); // 6 这里的require就会获取到a.js所暴露的module.exports变量，然后就可以使用其暴露的x和addX了。

1。利点：

サーバ側のCommonJSの仕様では、JSの実行サーバー側のための必要条件である依存、グローバル変数汚染問題を、解決するために最初のモジュラーJavaScriptを完了しました。

2。短所：

この記事では主に、サーバー側のブラウザのJSモジュラー、原因CommonJS同期ロード・モジュール、ファイルがハードディスクに保存され、同期の負荷問題はないですが、ブラウザのためには、サーバーからファイルをする必要がありますオーバー要求は、同期ロードが適用されない、従って、CommonJSは、ブラウザ側では使用できません。

第四に、第三段階：AMD仕様

前に述べた：CommonJSの仕様ロードモジュールのみロードは、その後の操作を実行するために、完了したことを意味し、同期しています。AMDの仕様では、コールバック関数を指定することができ、非同期ロードモジュールです。Node.jsのは、主にサーバーのプログラミングに使用されているので、モジュールファイルは、一般的に、すでにCommonJSより適用規範ので、関係なく、道の非同期読み込みのため、より迅速にアップロードし、ローカルのハードディスクに存在しています。サーバー側のロードモジュールからブラウザ環境、しかし、もし、あなたは非同期モードを使用する必要があり、ブラウザは一般的にAMDの仕様を使用します。AMDの仕様と実装は、有名なrequire.jsアップです。
AMDの標準は、以下の二つのAPIを定義しています。

• 1.require（[モジュール]、コールバック）

• 2. （ID、[依存]、定義コールバック）
     モジュールによって定義される定義および使用は、モジュールをロードするために必要とします。そして、エクスポートモジュールを必要とすることも方法CommonJSをサポートしています。
     警報モジュールの定義：

define(function () {
    var alertName = function (str) {
      alert("I am " + str);
    }
    var alertAge = function (num) {
      alert("I am " + num + " years old");
    }
    return {
      alertName: alertName,
      alertAge: alertAge
    };
  });
引入模块：
require(['alert'], function (alert) {
  alert.alertName('JohnZhu');
  alert.alertAge(21);
});

require.jsを使用している場合しかし、私たちは、あなたがそれを必要とするとき、あなたが代わりにリロードを、使用する前に、事前にすべての依存関係をロードする必要があります。

1。利点：

非同期ロードモジュールのブラウザ環境では。並行して複数のモジュールをロードします。

2。短所：

開発コストを増加させ、かつオンデマンドでロードすることはできませんが、事前にすべての依存関係をロードする必要があります。

第五に、第四段階：CMD仕様

アウトCMD仕様提督アリのヒスイは、JSライブラリsea.js.を達成するために それはすなわち、JSファイルがモジュールで、非常によく似requirejsではなく、すべてのモジュールの先頭に依存してロードするより、オンデマンドでロードされた方法により、より優れたロードのCMD。次のように：

define(function(require, exports, module) {
  var $ = require('jquery');
  var Spinning = require('./spinning');
  exports.doSomething = ...
  module.exports = ...
})

1。利点：

また、モジュラー負荷にブラウザ側を達成。
これは、近くの需要、依存関係にロードすることができます。

2。短所：

SPM依存パッケージ、ロードロジックモジュール強調。
実際には、我々は、元のAMDとCMDとの違いは、実装の遅れで事前に実行するために依存モジュール、である見ることができます。後者は必要な場合にのみ、すなわち、近く尊敬依存し、モジュールの使用を必要としながら、前者は、予め尊敬に依存しています。次のように：

// AMD
define(['./a', './b'], function(a, b) {  // 依赖必须一开始就写好  
   a.doSomething()    
   // 此处略去 100 行    
   b.doSomething()    
   ...
});
// CMD
define(function(require, exports, module) {
   var a = require('./a')   
   a.doSomething()   
   // 此处略去 100 行   
   var b = require('./b') 
   // 依赖可以就近书写   
   b.doSomething()
   // ... 
});

第六に、第五段階：ES6モジュラー

いくつかのモジュラーソリューションは、独自のフロントエンドのコミュニティに実装される前に、ちょうど皆の承認および広範な使用を取得し、ES6モジュラープログラムは、実際の規範です。ES6は、ブラウザで実行できなかったためES6では、我々はそう、我々はまた、尊敬、より強力な、機能は以前のプログラムに比べキーワード輸出エクスポートモジュールによって導入importキーワードモジュールを使用することができますが、 、輸入我々は唯一広くサポートされている現在のバベルによってサポートされませんコンパイルが必要です。
けれども、インポートと違い必要はほとんどが、移行コードのコストには必ずしも主流ES6将来は、非常に簡単ですので、まだ、ES6を使用することをお勧めします。以下のような：

  import store from '../store/index'
  import {mapState, mapMutations, mapActions} from 'vuex'
  import axios from '../assets/js/request'
  import util from '../utils/js/util.js'

  export default {
    created () {
      this.getClassify(); 

      this.RESET_VALUE();
      console.log('created' ,new Date().getTime());

    }

迎撃機

彼らは、その後に処理される前に、要求または応答やキャッチをインターセプト（インターセプターは何も行うことができます要求または応答のプロセスを傍受）

要求と応答インターセプタインターセプタにインターセプタ

要求インターセプタ（interceptors.requst）または各手段は、指定されたHTTPリクエストをインターセプトすることができる、および設定項目を変更することができます。

応答ブロッカー（interceptors.response）は、それぞれが各HTTP要求をライブまたは指定した後、HTTPリクエストをインターセプトし、修正結果の項目を返してもよいです。

画像

インターセプタのワークフロー：

画像

インターセプターを削除

画像

インスタンスaxiosカスタムインターセプタを追加します

画像

キャンセル

使用トークンキャンセルキャンセル要求を

トークンは、ファクトリメソッドCancelToken.sourceを使用して作成することができますキャンセル

参考：Axios中国のドキュメント

モジュラーES6

参考サイト：http://es6.ruanyifeng.com/#docs/module

脱構築
「静的な最適化」

image.png

CMDの構文：

image.png

image.png

image.png