nodeモジュール化1

5212 ワード

一、モジュール化概要
先端の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());

    }

4.9 JS 01