前端模塊化定義
前端的那模塊化，通過將代碼拆分為更小、獨立的單元，讓開發(fā)這可以更好管控代碼，提高可維護性、可重用性、可讀性
commonjs和es module區(qū)別
https://zhuanlan.zhihu.com/p/356526196
commonjs：
- 一般在服務(wù)器（node）中使用
- 導(dǎo)入require，導(dǎo)出：exports/module.exports
- 支持動態(tài)引入，即不用放在最上層，使用時引入即可；重復(fù)引入只加載一次
- require加載的是值的拷貝
- require（）方法同步，代碼會等待此處模塊加載完成后，再執(zhí)行
- 混合導(dǎo)出不會出現(xiàn)問題；導(dǎo)出引用對象時之前的導(dǎo)出就被覆蓋了
es module：
- 一般用在客戶端
- 導(dǎo)入import、導(dǎo)出export/export default
- 導(dǎo)入只能放在最上層（不可再函數(shù)、判斷語句中引用），不支持動態(tài)導(dǎo)入
- import加載的是值的引用
- import方法異步，代碼不會阻塞在關(guān)鍵字處，等待加載完成，而是在后臺異步加載，莫塊加載完成后執(zhí)行后面代碼
- 混合導(dǎo)出不會出現(xiàn)問題，但是導(dǎo)入時要先引用【默認導(dǎo)出】，后引用【單個導(dǎo)出】
值的拷貝：基本類型的值是按值傳遞的，每個變量存儲的都是該值的拷貝，修改其中一個變量不會影響其他變量
值的引用：引用類型的值是按引用傳遞的，每個變量存儲的是該值的引用，即指向同一個對象。修改其中一個變量會影響其他變量
module.exports與exports區(qū)別
http://www.lxweimin.com/p/2f8d097a681a
當(dāng)每個js文件在執(zhí)行或被require的時候，NodeJS其實創(chuàng)建了一個新的實例var module = new Module(),這個實例名叫module
var module = new Module();
var exports = module.exports;
exports是module.exports的引用(地址是一樣的)，module.exports初始值為{}
- require 引用模塊后，返回的是 module.exports 而不是 exports!!!!!
- exports.xxx 相當(dāng)于在導(dǎo)出對象上掛屬性，該屬性對調(diào)用模塊直接可見
exports = [0, 1];
console.log(exports === module.exports);// false
exports.arr = [0, 1];
console.log(exports === module.exports);// true
// require引入的模塊是一個對象值
let data = require("./index.js") // data是一個對象
export 與export default區(qū)別
- 都可以導(dǎo)出變量、函數(shù)、文件等
- 一個文件中export可以存在多個，export default只能存在一個
- export導(dǎo)出的文件在引入時需要加上{}，export default不需要
require和import區(qū)別
https://zhuanlan.zhihu.com/p/121770261
- require是commonjs規(guī)范，用在服務(wù)器端；import是es module規(guī)范用在客戶端
- require運行時動態(tài)加載，import是靜態(tài)編譯
- require加載的是值的拷貝，import加載的是值的引用
- require引入的值，不可以被提前使用，ES6 模塊可以在import之前使用import的值
- require可以在判斷語句、函數(shù)中引用，import不可以
- require默認不使用嚴格模式，import/export導(dǎo)出的模塊默認使用嚴格模式
AMD（預(yù)加載）和CMD（懶加載）區(qū)別
- 對于依賴的模塊，AMD 是提前執(zhí)行，CMD 是延遲執(zhí)行
- AMD依賴前置，CMD就近依賴
// AMD 默認推薦的是
define(['./a', './b'], function(a, b) { // 依賴必須一開始就寫好
a.doSomething()
// 此處略去 100 行
b.doSomething() ...})
// CMD
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此處略去 100 行
var b = require('./b')
// 依賴可以就近書寫
b.doSomething() // ... })
