深入解析JavaScript 的模組化
為什麼需要模組化開發？
隨著程式碼複雜程度的提高, 專案也變得越來越難維護, JavaScript模組化 也因此油然而生, 這應該是大家最熟悉的一種載入方式, 但是缺點也比較明顯
- 所有的模組都處於全域性作用域下, 容易造成命名衝突
- 依賴關係不明顯, 比如 main.js 中有使用 jquery, 那麼 jquery 就一定要先載入,
- 但是從引入方式中我們無法直觀的察覺依賴關係, 不利於維護
<script src="jquery.js"></script> <script src="jquery_scroller.js"></script> <script src="bootstarp.js"></script> <script src="main.js"></script>
CommonJs
一個檔案就是一個模組, 其內部定義的變數, 方法都處於該模組內, 不會對外暴露.
主要語法:
使用 require 來載入模組
使用 exports 或者 module.exports 暴露模組中的內容
demo
新建 a.js, 匯出 name 和 sayHello
// a.js const name = 'Bob' function sayHello(name) { console.log(`Hello ${name}`) } module.exports.name = name module.exports.sayHello = sayHello
在 b.js 中引入 a 並呼叫
// b.js
const a = require('./a')
const name = a.name
console.log(name) // Bob
a.sayHello(name) // Hello Bob
由於 CommonJs 是同步載入的模組的, 在服務端(node), 檔案都在硬碟上, 所以同步載入也無所謂, 但是在瀏覽器端, 同步載入就體驗不好了. 所以 CommonJs 主要使用於 node 環境下.
AMD
AMD 全稱為 Asynchromous Module Definition(非同步模組定義), 實現了非同步載入模組. require.js 實現了 AMD 規範
主要語法:
require([module], callback) // 匯入
define(id, [depends], callback) // 匯出模組
新建 a.js, 輸入以下內容
define(function() {
let alertName = function(str) {
alert('I am ' + str)
}
let alertAge = function(num) {
alert('I am ' + num + ' years old')
}
return {
alertName: alertName,
alertAge: alertAge
}
})
在 test.html 中呼叫 a 模組
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="./require.js"></script>
<script>
require(['a'], function (alert) {
alert.alertName('JohnZhu')
alert.alertAge(21)
})
</script>
</body>
</html>
CMD
CMD規範 是阿里的玉伯提出, sea.js 實現。 實現了按需載入
與 AMD 的區別:
對於依賴的模組 AMD 提前執行，而 CMD 是延遲執行
CMD 推崇依賴就近, AMD 推崇依賴前置
//AMD2.0之前
require(['./a', './b'], function(a, b) {
a.doSomething();
b.doSomething();
})
// AMD2.0之後
define(['./a', './b'], function(a, b) {
a.doSomething();
b.doSomething();
})
// CMD
define(function(require, exports, module) {
var a = require('./a');
a.doSomething();
var b = require('./b');
b.doSomething();
})
ES6
ES6 模組化方案是最規範的方案, 未來也是主流, 對於我們來說也是經常使用與熟悉的. 不過現在的瀏覽器還不相容, 使用需要 babel 轉碼
使用 export 匯出模組
使用 import 匯入模組
import Vue from 'vue'
import axios from 'axios'
import { mapState, mapMutations, mapActions } from 'vuex'
export default {
created() {
console.log('Hello World')
}
}
為了學習工作與休閒娛樂互不衝突，現新建圈【碼農茶水鋪】用於程式設計師生活，愛好，交友，求職招聘，吐槽等話題交流，希望各位大神工作之餘到茶水鋪來喝茶聊天。群號:582735936