ES6中的模塊化編程

爲何使用模塊化
ES6模塊化實現

爲何使用模塊化

歷史上，JavaScript 一直沒有模塊（module）體系，沒法將一個大程序拆分紅互相依賴的小文件，再用簡單的方法拼裝起來。其餘語言都有這項功能，好比 Ruby 的require、Python 的import，甚至就連 CSS 都有@import，可是 JavaScript 任何這方面的支持都沒有，這對開發大型的、複雜的項目造成了巨大障礙。javascript

<script src="area.js"></script>
<script src="len.js"></script>
<script src="people.js"></script>

上面是最原始的 JavaScript 文件加載方式，若是把每個文件看作是一個模塊，那麼他們的接口一般是暴露在全局做用域下，也就是定義在 window 對象中，不一樣模塊的接口調用都是一個做用域中，一些複雜的框架，會使用命名空間的概念來組織這些模塊的接口。html

這種原始的加載方式暴露了一些顯而易見的弊端:
一、全局做用域下容易形成變量衝突。
二、文件只能按照javaScripe的書寫順序進行加載。
三、開發人員必須主觀解決模塊和代碼庫的依賴關係。
四、在大型項目中各類資源難以管理，長期積累的問題致使代碼庫混亂不堪。

java

在 ES6 以前，社區制定了一些模塊加載方案，最主要的有 CommonJS 和 AMD 兩種。前者用於服務器，後者用於瀏覽器。編程

在 ES6 以後，ES6 在語言標準的層面上，實現了模塊功能，並且實現得至關簡單，徹底能夠取代 CommonJS 和 AMD 規範，成爲瀏覽器和服務器通用的模塊解決方案。瀏覽器

ES6模塊化實現

模塊功能主要由兩個命令構成：export和import。 export命令用於規定模塊的對外接口 import命令用於輸入其餘模塊提供的功能。服務器

export 命令

export let firstName = '牛哄哄的柯南';
export let lastName = 'Keafmd';
export let year = 1958;

上面代碼中，使用export命令對外部輸出了三個模塊。app

let firstName = '牛哄哄的柯南';
let lastName = 'Keafmd';
let year = 1958;
export {  
    firstName as f,   //可使用as關鍵字，重命名對外接口
    lastName, 
    year 
};

上面代碼是export命令的另一種寫法。在export命令後面，使用大括號指定所要輸出的一組變量。它與前一種寫法（直接放置在let語句前）是等價的，可是應該優先考慮使用這種寫法。由於這樣就能夠在腳本尾部，一眼看清楚輸出了哪些變量。框架

export function multiply(x, y) { 
    return x * y;
};
export class Point { 
    constructor(x, y) { 
        this.x = x;
        this.y = y;
    }
    toString() { 
        return this.x + ',' + this.y;
    }
};

export命令除了輸出變量，還能夠輸出函數、類（class）。模塊化

import命令

一、使用export命令定義模塊對外接口後，其餘 JS 文件就能夠經過import命令加載這個模塊。函數

import {  name, age, sex } from './module1.js‘
console.log(name + '\t' + age + '\t' + sex);

上面代碼的import命令，用於加載module1.js文件，並從中輸入變量。import命令接受一對大括號，裏面指定要從其餘模塊導入的變量名。大括號裏面的變量名，必須與被導入模塊（ module1.js）對外接口的名稱相同。

二、import命令可使用as關鍵字，將輸入的變量重命名。

import {  lastName as surname } from './profile.js';

三、import命令具備提高效果，會提高到整個模塊的頭部，首先執行。

foo();
import {  foo } from ‘./my_module.js';

上面的代碼不會報錯，由於import的執行早於foo的調用。這種行爲的本質是，import命令是編譯階段執行的，在代碼運行以前。

四、import是靜態執行，因此不能使用表達式和變量，這些只有在運行時才能獲得結果的語法結構。

// 報錯
import {  'f' + 'oo' } from ‘./my_module.js';
// 報錯
let module = ‘./my_module.js';
import {  foo } from module;

// 報錯
if (x === 1) { 
  import {  foo } from './module1.js';
} else { 
  import {  foo } from './module2.js';
}

五、若是屢次重複執行同一句import語句，那麼只會執行一次，而不會執行屢次。

import './lodash.js';
import './lodash.js';

上面代碼加載了兩次lodash，可是隻會執行一次。

六、import語句是 Singleton 模式。

import {  foo } from './my_module.js';
import {  bar } from './my_module.js';
// 等同於
import {  foo, bar } from './my_module.js';

上面代碼中，雖然foo和bar在兩個語句中加載，可是它們對應的是同一個my_module實例。也就是說，import語句是 Singleton 模式。

完整實例

profile.js文件：

export var firstName = '牛哄哄的柯南';
export var lastName = 'Keafmd';
export var year = 1958;
export function jia(x, y) { 
    return x + y;
}
export function jian(x, y) { 
    return x - y;
}
export class Point { 
    constructor(x, y) { 
        this.x = x;
        this.y = y;
    }
    toString() { 
        return this.x + '\t' + this.y;
    }
}

app.js文件：

import { firstName,lastName,year,jia,jian,Point} from './profile.js'

console.log(firstName + '\t' + lastName + '\t' + year);
console.log(jia(1,2));
console.log(jian(1,2));

let obj = new Point(1,2)
console.log(obj.toString());

注意： from ‘./profile.js’ 即便是在同一個文件夾中，也必需要寫 ./

index.html文件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/app.js" type="module"></script>
	</head>
	<body>
		
	</body>
</html>

效果截圖：

export default 命令

使用import命令的時候，用戶須要知道所要加載的變量名或函數名，不然沒法加載。可是，用戶確定但願快速上手，未必願意閱讀文檔，去了解模塊有哪些屬性和方法。

爲了給用戶提供方便，讓他們不用閱讀文檔就能加載模塊，就要用到export default命令，爲模塊指定默認輸出。

// export-default.js
export default function  () { 
    console.log('foo');
}

上面代碼是一個模塊文件export-default.js，它的默認輸出是一個函數。

// import-default.js
import customName from './export-default.js';
customName(); // 'foo'

上面代碼的import命令，能夠用任意名稱指向export-default.js輸出的方法，這時就不須要知道原模塊輸出的函數名。

注意：

一、一個js文件中，不能有兩個export default命令。
二、import命令後面，不使用大括號。由於只能寫一個模塊名。

export default命令用在非匿名函數前，也是能夠的：

// export-default.js
export default function foo() { 
    console.log('foo');
}
// 或者寫成
function foo() { 
    console.log('foo');
}
export default foo;

上面代碼中，foo函數的函數名foo，在模塊外部是無效的。加載的時候，視同匿名函數加載。

看完若是對你有幫助，感謝點贊支持！
若是你是電腦端的話，看到右下角的「一鍵三連」了嗎，沒錯點它[哈哈]

加油！

共同努力！

Keafmd