JS前端模組化規範

於是有了菜鳥解惑的搜嘍過程。。。。。。

// 匯入
require("module");
// 匯出
exports.getstoreinfo = function() {};
module.exports = somevalue;

參照commonjs模組代表node.js的模組系統

// 定義
define("module", ["dep1", "dep2"], function(d1, d2) );
// 載入模組

requirejs對模組的態度是預執行。由於 requirejs 是執行的 amd 規範, 因此所有的依賴模組都是先執行;即requirejs是預先把依賴的模組執行，相當於把require提前了

require函式檢查依賴的模組，根據配置檔案，獲取js檔案的實際路徑

根據js檔案實際路徑，在dom中插入script節點，並繫結onload事件來獲取該模組載入完成的通知。

依賴script全部載入完成後，呼叫**函式

define(function(require, exports, module) );

依賴就近，延遲執行

可以很容易在 node.js 中執行

依賴 spm 打包，模組的載入邏輯偏重

對於依賴的模組，amd 是提前執行，cmd 是延遲執行。不過 requirejs 從2.0開始，也改成了可以延遲執行（根據寫法不同，處理方式不同）。cmd 推崇 as lazy as possible.

amd推崇依賴前置；cmd推崇依賴就近，只有在用到某個模組的時候再去require。

// amd
define(['./a', './b'], function(a, b) );
// cmd
define(function(require, exports, module) );

(function (window, factory)  else if (typeof define === 'function' && define.amd)  else 
})(this, function () );

// 匯入
import react from 「react」;
import  from 「react」;
// 匯出
export function multiply() ;
export var year = 2018;
export default ...
...

容易進行靜態分析

面向未來的 ecmascript 標準

原生瀏覽器端還沒有實現該標準

全新的命令字，新版的 node.js才支援。

對於基本資料型別，屬於複製。即會被模組快取；同時，在另乙個模組可以對該模組輸出的變數重新賦值。

對於複雜資料型別，屬於淺拷貝。由於兩個模組引用的物件指向同乙個記憶體空間，因此對該模組的值做修改時會影響另乙個模組。

當使用require命令載入某個模組時，就會執行整個模組的**。

當使用require命令載入同乙個模組時，不會再執行該模組，而是取到快取之中的值。也就是說，commonjs模組無論載入多少次，都只會在第一次載入時執行一次，以後再載入，就返回第一次執行的結果，除非手動清除系統快取。

迴圈載入時，屬於載入時執行。即指令碼**在require的時候，就會全部執行。一旦出現某個模組被"迴圈載入"，就只輸出已經執行的部分，還未執行的部分不會輸出。

es6模組中的值屬於【動態唯讀引用】。

對於唯讀來說，即不允許修改引入變數的值，import的變數是唯讀的，不論是基本資料型別還是複雜資料型別。當模組遇到import命令時，就會生成乙個唯讀引用。等到指令碼真正執行時，再根據這個唯讀引用，到被載入的那個模組裡面去取值。

對於動態來說，原始值發生變化，import載入的值也會發生變化。不論是基本資料型別還是複雜資料型別。

迴圈載入時，es6模組是動態引用。只要兩個模組之間存在某個引用，**就能夠執行。