模塊化

模塊化

在模塊中實現特定業務邏輯或特定功能。模塊類似於JAVA的包進行導入導出，即插即用。

AMD——Require.js

異步模塊化定義（Asynchronous Module Definition）
主要實現爲RequireJS
前置依賴、提前執行、異步定義

• 解決依賴問題
• 解決JS腳本單線程等待的問題

// 定義模塊 myModule.js
define(['dependency'], function(){
    var name = 'Byron';
    function printName(){
        console.log(name);
    }

    return {
        printName: printName
    };
});

// 加載模塊
require(['myModule'], function (my){
　 my.printName();
});

1. 定義模塊define，

• define(id?,dependencies,factory)
• 參數含義：模塊ID、模塊依賴和模塊初始化的函數。

2. 加載模塊require

• require(dependencies,factory())
• 參數意義：模塊加載依賴與模塊執行後的回調函數。
• require是異步執行，使用回調函數可解決JS腳本等待以及依賴的問題。

CMD——Sea.js

通用模塊定義（Common Module Definition）
就近依賴，按需執行、異步定義
一個文件一個模塊

1. AMD VS CMD

• AMD，在define定義模塊之後，立即執行模塊。遇到require將模塊加載。
• CMD，define定義模塊後，按需加載模塊。
• AMD體驗性好、CMD性能好。

commonJS——Node.js/Webpack

1. 特點

• 模塊在獨立作用域中，不污染全局。
• 模塊可多次加載，只在首次執行並緩存。
• 模塊加載順序是按照代碼執行順序。

2. module

• module.exports
module.exports文件對外的接口，外部文件通過該變量讀取模塊內容。
• exports
  實際上var exports = moudle.exports
  可以爲其添加方法，但不能爲其賦值，否則將會切斷exports和module.exports的值。

3. require
require用於加載命令，讀入執行JS文件，並找到module.exports接口。
4. 模塊加載的機制
   模塊加載的是值的拷貝而非引用、加載多次也不會對模塊內部產生影響。

ES6的模塊化

1. module和import
2. ES6模塊化加載的是值的引用而非拷貝。

練習 對比ES6模塊化和commonJS

• ES6加載的爲引用的拷貝而comonJS則是值的拷貝
• ES6對外是靜態定義不是對象，在編譯階段就會解析代碼。commonJS對外暴露對象，腳本運行纔會執行。
• ES6默認採取嚴格模式，commonJS默認非嚴格模式