模塊化
模塊化是將一個(gè)復(fù)雜的系統(tǒng)分解為多個(gè)模塊以方便編碼。
以前開(kāi)發(fā)通過(guò)命名空間的方式來(lái)組織代碼，例如JQuery，放在window.$下，但是存在一些缺點(diǎn)：
- 命名空間沖突，例如Zepto也被放在window.$下
- 無(wú)法合理的管理項(xiàng)目的依賴(lài)和版本
- 無(wú)法方便地控制依賴(lài)的加載順序
CommonJS
CommonJS（http://www.commonjs.org）是一種廣泛使用的JS模塊化規(guī)范，使用方式如下：
// 導(dǎo)入
const moduleA = requre(./moduleA);
// 導(dǎo)出
module.exports = moduleA.someFunc;
優(yōu)點(diǎn)：
- 代碼可復(fù)用于Node.js環(huán)境下并運(yùn)行，例如做同構(gòu)應(yīng)用
- 通過(guò)NPM發(fā)布的很多第三方模塊都采用了CommonJS規(guī)范
缺點(diǎn)：
* 無(wú)法直接在瀏覽器環(huán)境下運(yùn)行，必須通過(guò)工具轉(zhuǎn)換成ES5
AMD
也是一種JS模塊化規(guī)范，與CommonJS不同在于，它采用了異步的方式去加載依賴(lài)的模塊。
// 定義一個(gè)模塊
define('module', ['dep'], function(dep){
return exports;
});
// 導(dǎo)入和使用
require(['module'], funciton(module){
});
優(yōu)點(diǎn)：
- 可在不轉(zhuǎn)換代碼的情況下直接在瀏覽器中運(yùn)行
- 可異步加載依賴(lài)
- 可并行加載多個(gè)依賴(lài)
- 代碼可運(yùn)行在瀏覽器環(huán)境和Node.js環(huán)境下
ES6 模塊化
它在語(yǔ)言層面上實(shí)現(xiàn)了模塊化。瀏覽器廠商和Node.js都宣布要原生支持該規(guī)范，它將逐漸取代CommonJS和AMD規(guī)范，成為瀏覽器和拂去起通用的模塊解決方案。
// 導(dǎo)入
import { readFile } from 'fs';
import React from 'react';
// 導(dǎo)出
export function hello() {};
export default {
// ...
};
缺點(diǎn):
目前無(wú)法直接運(yùn)行在大部分JS環(huán)境下，必須通過(guò)工具轉(zhuǎn)換成標(biāo)準(zhǔn)的ES5后才能正常運(yùn)行。
樣式中的模塊化
除了JS開(kāi)始進(jìn)行模塊化改造，前端開(kāi)發(fā)里的樣式文件也支持模塊化，例如SCSS、LESS等。
新框架
React、Vue、Angular
新語(yǔ)言
- ES6
- TS
- Flow（類(lèi)TS，但更靈活）
- SCSS、LESS
常見(jiàn)構(gòu)建工具
構(gòu)建工具的功能：
- 代碼轉(zhuǎn)換
- 文件優(yōu)化
- 代碼分割
- 模塊合并
- 自動(dòng)刷新
- 代碼校驗(yàn)
- 自動(dòng)發(fā)布
常見(jiàn)構(gòu)建工具：
- Npm Script
- Grunt
- Gulp
- Fis3
- Rollup
- webpack（隨著時(shí)代的發(fā)展，webpack目前已經(jīng)具有統(tǒng)治的地位，其他的就不介紹了）
