JSモジュール化の過程

2533 ワード

javascript

まず、ES 6のclassが出る前にはモジュールがありません.JSはモジュール化された言語ではありません.いわゆる「モジュール」は匿名の関数か、あるいはオブジェクトの疑似モジュールです.

var module = (function(){
    let _count = 2 //     
    let m1 = function() {
        console.log(_count)
    }
    let m2 = function() {
        console.log(_count + 1)
    }
    return {
        m1,
        m2
    }
})()

転換点:2009年に米国のオオカミさんプログラマーがnodeJsを発明しました.サーバーはモジュールが必要です.オペレーティングシステムと他のアプリケーションと対話しないとプログラムできないので、commonJs仕様を引き出しました.
common Js規格
エクスポート

module.exports = {
    math
}
exports //  module.exports    ，      ，

導入する

let math = require('math') //     ，     
math.add(2,3)

短所:nodeJsはサーバー言語ですので、モジュールは現地に置いてあります.ロード速度は比較的速いですが、先端にJSをロードするのはサーバーからロードしたものです.遅いので、ブラウザの仮死状態を引き起こす可能性があります.
AMD仕様

define(id?, dependencies?, factory)
*   id:   ，    (  )，      
*   dependencies:            (  )，      。,       
*   factory:     ，

エクスポート

// math.js
define(['lib'],function(){ //   lib.js
    let add = function(x, y){
        return x + y
    }
    return {
        add
    }
})

導入する

require(['math'],function(){
    math.add(2,3)
})

利点:非同期ローディングモジュールでは、実行内容はコールバックにおいて欠点があります.欠点とは言えません.すべての依存は、ファイルの頭にあるユーザーに宣言しなければなりません.
CMD仕様
AMDの仕様とはちょっと違っています.

define(['lib'],function(require, exports, module){ //   lib.js
    let a = require('./a') //   a.js
    a.test()
    let add = function(x, y){
        return x + y
    }
    module.exports = {
        add
    }
})

AMDとの違い:

工場関数はデフォルトでは3つのパラメータがあり、requireはモジュールを導入するために使用され、exportsおよびmoduleは導き出すために使用され、もちろん導出も直接return

を使用することができる.

は工場関数内部でrequireでモジュールを導入することができます.すべての依存性を頭に宣言する必要はなく、近い依存性を実現し、開発者に友好的です.
短所:近い依存性はテンプレートを解析してからどのモジュールをロードするかを知っていなければなりませんが、解析モジュールの時間は短くても無視できます.使用者:seaJs
ES 6 Module
エクスポート

//     ，   export,  exports
function addition(){}
export {addition}  //     
export const foo = 'Hello' //       
export default function(){} //         ，       ，        
export default class() //

導入する

import defaultModule from 'module-name' // export default  
import * as name from 'module-name' //       ，     name.add()  
import { add, del } from 'module-name' //   ，    
import from 'module-name' //

デート、Mathオブジェクト