Nodeモジュール化

一、モジュール化概要
先端のjsコードの複雑度が高くなるにつれて、JavaScriptモジュール化という概念が提起され、先端コミュニティも先端のモジュール化を絶えず実現し、SE 6がそれを規範化した.
1.モジュール化とは?
モジュールは一つのファイルです.
パッケージ:モジュール一山で構成項目
二、第一段階:モジュール化なし
JavaScriptの最初の役割はフォームを検証するだけで、後でいくつかのアニメーションを追加しますが、これらのjsコードは多くのファイルの中で完成できます.だから、私達はhtmlファイルにscriptタグを追加するだけでいいです.
その後、フロントエンドの複雑度が高くなるにつれて、プロジェクトコードの可読性、拡張性などを高めるために、私達のjsファイルはだんだん多くなりました.jsファイルでなくても解決できます.一つ一つのjsファイルをモジュールとしています.では、この時のjs導入方式はどうなりますか?大体次のようです.

にすべてのjsファイルを に くということです.しかし、これらのファイルの はまだ っていません. えば、jqueryは に しなければなりません.jqueryプラグインを することができます. のファイルでjqueryを うことができます.
1. :
つのjsファイルを うよりも、このような のjsファイルが も なモジュール を する は です.
2. :
のスコープを する.どのモジュールも に しているので、 に うと の を きます.もちろん、 を って することもできます.
プロジェクトについては、 jsが く、 はマニュアルでモジュールとコードライブラリの を しなければならず、 メンテナンスコストが い.
は らかではなく、 には です. えば、Main.jsはjqueryを う がありますが、 の の からは えません.jqueryを れたら、エラーが します.
、 :CommonJS
Common JSはJavaScriptモジュール された で、 はサーバー のnodeに われていました.フロントエンドのwebpackもCommon JSの に してサポートされています.
この によって、 ファイルはモジュールであり、その に された はこのモジュールに し、 に しない、つまりグローバル を しない.
CommmonJSのコア は、require によって、 する のモジュールを にローディングし、exportsまたはmodule.exportを じて が なインターフェースを き すことである. の りです

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

ここのa.jsはCommonJS のモジュールです.ここのmoduleはこのモジュールを しています.moduleのexport は に されたインターフェースです.ここのxとaddXなど にアクセスできる を き すことができます.
exportsは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.export を して、その されたxとaddXを することができます.
1. :
CommonJS はサーバー で してJavaScriptのモジュール を し、 、グローバル の を しました.これもjsがサーバー で するための です.
2. :
この は にブラウザ のjsのモジュール であり、CommunJSは ローディングモジュールであり、サーバー ではファイルはハードディスクに されていますので、 ローディングは ありません.
、 :AMD
に べました.Common JS ロードモジュールは しています.つまり、ロードが してから、 の が されます.AMD は ローディングモジュールであり、コールバック の が です.Node.jsは にサーバープログラミングに われていますので、モジュールファイルは にはすでにローカルハードディスクに していますので、ロードが く、 ロードの を しなくてもいいです.ただし、ブラウザ であれば、サーバー からモジュールをロードする は モードが となりますので、ブラウザ はAMD が です.AMD の は、 なrequire.jsです.AMD では、 の2つのAPIが されている.

   1.require([module], callback)

   2\. define(id, [depends], callback)

すなわち、モジュールはdefineによって され、その 、requireを してモジュールをロードする.また、requireはCommunJSのモジュール にも しています.alertモジュールを :

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とする.それはrequirejsと に ています.つまり、jsファイルはモジュールですが、CMDのロード はより れています.モジュールの にすべての をロードしなければならないのではなく、 に じてロードする です. のとおりです

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

1. :
ブラウザ のモジュール ローディングも に しました. に じてロードできます. くに します.
2. :
SPMパッケージに して、モジュールのロードロジックが ります. には、この でAMDとCMDの いが かります. は するモジュールに して に され、 は されます. は に しているが、 は くにあるモジュールを とする だけrequireを する. のとおりです

// 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()
   // ... 
});

、 :ES 6モジュール
これまでのいくつかのモジュール プログラムはすべてフロントエンドコミュニティが で したもので、ただ さんの と な を ました.ES 6のモジュール は の です.ES 6では、importキーを ってモジュールを することができます.exportキーワードの モジュールを じて、 のいくつかの よりも が く、また たちが していますが、ES 6は ブラウザで できないため、Babelを じてサポートされていないimportをコンパイルするしかないです.
のところimportとrequireの いは きくないですが、やはりes 6を うことを します. のSE 6は ですから、コードの コストについてはとても です. えば:

  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());

    }