【前端工程】Javascript之模塊化

什麼是模塊化

模塊總類

• commonjs

  require/module.export

• amd
• cmd
• umd
• system

模塊與命名空間

模塊具備其本身的做用域，而且只有導出的聲明纔會在模塊外部可見。 記住這點，命名空間在使用模塊時幾乎沒什麼價值。

模塊對比

Es6模塊化

導出模塊: export,只能導出一個接口，不能直接導出一個變量。
導入模塊: import。

一、導出導入單個變量

導出：

a)  export var a = 1
 b)  var a = 1
      export {a}  

導入：

import {a} from '文件名'

二、導出導入多個變量

導出:

var firstName \= 'Michael'; 
var lastName \= 'Jackson'; 
var year \= 1958; 
export { firstName, lastName, year };

導入:

import {firstName, lastName, year} from '文件名'
 
 import * as all from '文件名' 
 
 all.firstName //'Michael'

三、導出導入函數  
導出

export function a () { 
  return 1 
} 
或 
function a () {  
  return 1 
} 
export {a}

導入

import {a} from 'index.js' a()

default默認導出

export default function () { 
    return 2 
}

//默認導出函數時，導入時能夠取任意名字讀取函數
import fun from '文件名' 
fun() //2

持續更新...

參考資料：

模塊化發展歷程
 模塊化歷史
 模塊化指北