JS 模塊化

為什麼要有這一篇？ Import & Export 不是很簡單嘛？你為什麼要騙一篇？(後面這句話才真的在騙字數)

欸不是，我就不知道什麼時候要加{}，然後有加跟不加到底哪一個好啊？

據說，很久很久以前，JS還是個小瘦子，代碼超少超輕量，根本不需要什麼整包輸出，但隨著歲月增長，JS也胖到一個需要把它移駕到另一個文件的程度...

欸不是，模塊除了可以把代碼分類，簡潔並且方便重複使用之外還可以：

1. 重複使用
2. 避免變量洩漏
3. 避免變量命名汙染

ES6出來後，就有了模塊的用法，而Node.js又採用Common js的風格

環遊非洲第02天：Q

南非有哪些國家？
A. 納米比亞、津巴布韋、博茨瓦納、萊索托、史瓦帝尼...
B. 衣索比亞、索馬利亞、肯亞、盧安達...
C. 埃及、利比亞、阿爾及利亞、突尼西亞、摩洛哥...
D. 納米比亞、肯亞、盧安達、史瓦帝尼...

Node JS Require 動態加載

我還沒有準備好跟Node.js親密接觸...

不過還是先來了解一下他的用法，也是我們常常看到&用到的

//1.導出
//myMoudule.js
function getMyCountry() {
    return '';
}
//寫法-1
exports.getMyCountry = getMyCountry;

//寫法-2
module.exports.getMyCountry = getMyCountry;

//寫法-3
module.exports = {
    getMyCountry: getMyCountry
};

//2.導出
//index.js
//模塊myModule的後綴.js可以省略
let myModule = require('./myModule');
myModule.getMyCountry();

Node會將核心模塊編入引擎，導入時 Node會直接查找核心模块字典。

而第三方模塊的導入，模塊的查找方式就有點不同:

1.先在專案裡的node_modules找-->

2.接着去父目錄中查找-->

3.到根目錄還沒找到的話就返回失敗

引用改寫自：深入理解Javascript之Module

ES6 Module 靜態加載

來看三種常用的模組用法：

1. Default輸出導入
2. 命名輸出導入
3. 命名輸出整體導入
4. Default & 命名混用

Default輸出導入

Default的用法讓ES6可以兼容CommonJS and AMD的 default export
參見：ES6 In Depth: Modules

// 1.輸出 myModule.js
// 1-a. 有命名的function
 function getMyCountry(){
    return '';
}
export default randomSquare;

// 1-b.或直接不要命名輸出
export default function(){
    return '';
}

// 注意不用{}，也可以自由命名
//其實相當於 import {default as randomName} from "./myModule.js";
import randomName from './myModule.js';

命名輸出導入

基本用法

// 1.輸出 myModule.js
// 1-a.分別輸出
export function getMyCountry(){
    return '';
}

export const countryNane = '';

// 1-b.整體輸出
function getMyCountry(){
    return '';
}

const countryNane = '';

export {getMyCountry, countryNane};

//2.輸入 index.js
import {getMyCountry, countryNane} from './myModule.js';

或是可以重新命名

// 1.輸出 myModule.js
// 1-a.分別輸出
export function getMyCountry(){
    return '';
}

export const countryNane = '';

// 1-b.整體輸出
function getMyCountry(){
    return '';
}

const countryNane = '';

export {getMyCountry as myNewName, countryName};

//2.輸入 index.js
import {getMyCountry, countryName as myNewCountry} from './myModule.js';

命名輸出整體導入

// 1.輸出 myModule.js
function getMyCountry(){
    return '';
}

const countryNane = '';

export {getMyCountry, countryNane};

//2.輸入 index.js
import * as countryModule from './myModule.js';

//直接使用
countryModule.getMyCountry();
let thisAfricaCountry = countryNane;

Default和命名混用

//myModule.js
export default function (){
    //...
}
export function myCapital (obj, iterator, context){
    //...
}
//index.js
import myCountry, { myCapital } from './myModule.js';

靜態加載的 Nono

和NodeJS模塊不同的是，ES6 的模塊是靜態的，只能讀取不能修改，

而NodeJS 中的模块，是動態加載。

靜態加載在編譯時就已經先執行了Import，

並限制導入語法中不能含有動態的語法結構(如變量、IF)

// 错误，导出值1，模块中没有对应
export 1;

// 错误，实际上也是导出1，模块中没有对应
var m = 1;
export m;

// 可以这样来导出，导出的m与模块中的变量m对应
export var m = 1;

// 可以这样导出
//代码不会报错，因为import的执行早于foo的调用。这种行为的本质是，import命令是编译阶段执行的，在代码运行之前。
var m = 1;
export {m};

// main.js
import * as m from './myModule';

// 錯誤，靜態執行不能改變模組的東西
m.name = 'darjun';
m.func = function () {};


// 报错
import { 'f' + 'oo' } from 'my_module';

// 报错
let module = 'my_module';
import { foo } from module;

// 报错
if (x === 1) {
import { foo } from 'module1';
} else {
import { foo } from 'module2';
}

ES6模塊重要用法整理

所以到底要匿名還是命名呢？

目前找到比較能說服我說法的是卡斯柏老師的文章

主要還是推薦 命名 匯入

方便維護、和閱讀，增加開發的嚴謹性，因為 命名須完全一致，也能確認該模組內是否有特定變數
。

以上！

環遊非洲第02天 A

南非有哪些國家？

以上皆非啦！因為南非是一個國家！
通常講區域時會說南部非洲，而A的國家的確都在南非，
B是東非，C是北非，D我亂寫的。
說南非的時候就是指這個國家！包辦了非洲大陸的最南端從西到東的區域，是名副其實的「南」非呀！

參考

• JavaScript modules
• 【深入JS】js模块化
• 深入理解Javascript之Module
• 很全很全的JavaScript的模块讲解
• 完全解析 JavaScript import、export