爲何JavaScript須要模塊化開發？

時間 2019-12-04

標籤爲何 javascript 須要模塊化開發欄目 JavaScript 简体版

原文原文鏈接

爲何須要模塊化開發？css

隨着代碼複雜程度的提升, 項目也變得愈來愈難維護, JavaScript模塊化 也所以油然而生, 這應該是你們最熟悉的一種加載方式, 可是缺點也比較明顯html

全部的模塊都處於全局做用域下, 容易形成命名衝突
依賴關係不明顯, 好比 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>
複製代碼

CommonJsvue

一個文件就是一個模塊, 其內部定義的變量, 方法都處於該模塊內, 不會對外暴露.node

主要語法:jquery

使用 require 來加載模塊使用 exports 或者 module.exports 暴露模塊中的內容webpack

demoios

新建 a.js, 導出 name 和 sayHelloweb

// 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 環境下.vuex

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，快速升職加薪，走上人生巔峯。