為什麼JavaScript需要模組化開發？

前端攻城小牛發表於2018-12-31
JavaScript

為什麼需要模組化開發？

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')
 }
}
複製程式碼

瞭解更多 本次給大家推薦一個免費的學習群，裡面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。 對web開發技術感興趣的同學，歡迎加入Q群：864305860，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視訊資料。 最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峰。

相關文章