快捷導(dǎo)航

關(guān)于什么是javascript模塊化以及為何使用模塊化開發(fā)

更新時間：2023年04月13日 09:26:13 作者：技術(shù)小張zz

這篇文章主要介紹了關(guān)于什么是javascript模塊化以及為何使用模塊化開發(fā),模塊化是一種軟件開發(fā)的設(shè)計模式，它將一個大型的軟件系統(tǒng)劃分成多個獨立的模塊，每個模塊都有自己的功能和接口,需要的朋友可以參考下

模塊化是一種軟件開發(fā)的設(shè)計模式，它將一個大型的軟件系統(tǒng)劃分成多個獨立的模塊，每個模塊都有自己的功能和接口，并且能夠與其他模塊獨立地工作。

先來一段八股文

模塊化開發(fā)可以帶來以下好處：

提高代碼的復(fù)用性：模塊化可以將代碼劃分成可重用的部分，降低代碼的冗余和重復(fù)，提高代碼的復(fù)用性。
簡化代碼的維護(hù)和調(diào)試：當(dāng)一個軟件系統(tǒng)變得越來越復(fù)雜時，進(jìn)行模塊化開發(fā)可以使得每個模塊都相對獨立，這樣就可以方便地維護(hù)和調(diào)試每個模塊，而不必考慮整個系統(tǒng)的復(fù)雜性。
提高代碼的可讀性：模塊化可以使得代碼更加結(jié)構(gòu)化，清晰明了，從而提高代碼的可讀性和可維護(hù)性。
提高開發(fā)效率：模塊化開發(fā)可以使得團(tuán)隊成員在不同模塊上并行開發(fā)，從而提高開發(fā)效率。
降低項目的風(fēng)險：模塊化開發(fā)可以使得開發(fā)人員更加關(guān)注模塊之間的接口和依賴關(guān)系，從而降低項目的風(fēng)險。

總之，模塊化開發(fā)是一種有效的軟件開發(fā)模式，可以提高軟件開發(fā)的質(zhì)量、效率和可維護(hù)性，特別是在大型軟件系統(tǒng)的開發(fā)中，模塊化更是必不可少的。

實際工作中如何使用

場景一：在前后端交互的ajax請求中，對不同的請求進(jìn)行分類，每一個種類的業(yè)務(wù)放到一個模塊中，有用戶相關(guān)的、商品列表相關(guān)的、訂單相關(guān)的各種，為了使業(yè)務(wù)邏輯更加清晰，更改相關(guān)代碼的時候，只需要找到對應(yīng)的文件，用戶相關(guān)的就去user.js修改，商品相關(guān)的就去goods.js修改等等，是不是清楚多了，這是不是好用多了？

來看看示例user.js

import axios from '../utils/request'
import md5 from 'md5'
 
// 登錄
export const login = async (params)=>{
  let {data} = await axios.post('users/login',{params})
  if(data.success){
    // 在瀏覽器緩存中存儲token
    sessionStorage.setItem('token',data.token)
  }
  return data
}
// 修改密碼
export const resetPwd = async (params)=>{
  // 要對密碼加密
  let {data} = await axios.post('users/resetPwd',params)
  return data
}
//...other business

示例，goods.js

export const getDetail = async (id)=> {
  let {data} =  axios.get(`/goods/detail/${id}`);
  return data
}
 
export const getCategory = async () =>{
  let {data} =  axios.get('/categories');
  return data
}
 
export const search = (params) =>{
  let {data} =  axios.get('/search', { params });
  return data
}

每個js（模塊）都有自己的相關(guān)的代碼，代碼之間互不影響。

如下代碼所示，所有的請求都放到一個文件中，不分模塊

import axios from '../utils/request'
import md5 from 'md5'
 
// 登錄
export const login = async (params)=>{
  let {data} = await axios.post('users/login',{params})
  if(data.success){
    // 在瀏覽器緩存中存儲token
    sessionStorage.setItem('token',data.token)
  }
  return data
}
//查詢商品
export const search = (params) =>{
  let {data} =  axios.get('/search', { params });
  return data
}
 
// 修改密碼
export const resetPwd = async (params)=>{
  // 要對密碼加密
  let {data} = await axios.post('users/resetPwd',params)
  return data
}
//商品詳情
export const getDetail = async (id)=> {
  let {data} =  axios.get(`/goods/detail/${id}`);
  return data
}
//獲取商品分類
export const getCategory = async () =>{
  let {data} =  axios.get('/categories');
  return data
}
 
//...other business

是不是很亂，這只是一點點業(yè)務(wù)，如果大一點業(yè)務(wù)系統(tǒng)，里面有百十個接口，如果不能按照模塊劃分，代碼就會是一座屎山，多人協(xié)作會出問題、代碼維護(hù)無從下手

場景二：大家都知道單頁面應(yīng)用程序，他的最大優(yōu)勢就是不用切換頁面，對用戶體驗極好。例如vue常見的頁面是頭、尾、菜單不動，只有內(nèi)容區(qū)域動，在dom中扣去一塊舊的，換一塊新的，這樣看來，每一塊都應(yīng)該是獨立存在的，也就是咱們常見的.vue文件，使用webpack將.vue文件轉(zhuǎn)為.js文件，這個js就是一個模塊化的文件，通過路由把頁面和名字進(jìn)行關(guān)聯(lián)，扣掉和換上新的都需要操作路由來完成

總結(jié)一下，模塊化其實就是分門別類。

附加幾種模塊化語法

不管哪種語法，只是一種固定的寫法，重點了解兩個概念，一個導(dǎo)出（暴露當(dāng)前模塊），一個導(dǎo)入(用那個模塊)

1. CommonJS

CommonJS 是一種用于服務(wù)器端 JavaScript 的模塊化規(guī)范，使用 require 和 module.exports 導(dǎo)出和引入模塊。例如：

// math.js
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
const hello = () => '千鋒，你好';
 
module.exports = {
  add,
  subtract,
  hello
};
 
// app.js
const math = require('./math');
 
console.log(math.add(2, 3)); // 輸出 5
console.log(math.subtract(3, 2)); // 輸出 1
console.log(math.hello); // 輸出千鋒，你好

2. AMD

AMD（Asynchronous Module Definition，異步模塊定義）是用于瀏覽器端 JavaScript 的模塊化規(guī)范，使用 define 定義模塊，通過 require 異步加載模塊。例如：

// math.js//define第一個參數(shù)表示當(dāng)前模塊所依賴的模塊，可以是一個字符串?dāng)?shù)組，也可以是一個函數(shù)// 定義一個名為 "math" 的模塊，依賴于 "jquery" 和 "underscore" 兩個模塊define(['jquery', 'underscore'], function($, _) {  // 定義模塊的功能  const add = function(a, b) {    return a + b;  };  const multiply = function(a, b) {    return a * b;  };  const test = ()=>{    var arr = ['foo', 'bar', 'qfedu'];    var arrUpper = _.map(arr, function(str) {      return str.toUpperCase();    });    return  arrUpper;  }    // 導(dǎo)出模塊的功能  return {    add: add,    multiply: multiply,    test:test  };});// app.jsrequire(['./math'], function(math) {  console.log(math.add(2, 3)); // 輸出 5  console.log(math.subtract(3, 2)); // 輸出 1  console.log(math.test())//輸出 ["FOO", "BAR", "QFEDU"]});

3. ES6 模塊

ES6 模塊是 JavaScript 的官方模塊化規(guī)范，使用 import 和 export 導(dǎo)入和導(dǎo)出模塊。例如：

// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
 
// app.js
import { add, subtract } from './math';
 
console.log(add(2, 3)); // 輸出 5
console.log(subtract(3, 2)); // 輸出 1

4. UMD

UMD（Universal Module Definition，通用模塊定義）是一種支持多種模塊化規(guī)范的通用模塊化方案，它既支持 CommonJS，又支持 AMD 和全局變量。例如：

(function (root, factory) {
  if (typeof define === 'function' && define.amd) {
    define(['exports'], factory);
  } else if (typeof module === 'object' && module.exports) {
    factory(module.exports);
  } else {
    factory((root.myModule = {}));
  }
}(typeof self !== 'undefined' ? self : this, function (exports) {
  const add = (a, b) => a + b;
  const subtract = (a, b) => a - b;
 
  exports.add = add;
  exports.subtract = subtract;
}));

到此這篇關(guān)于關(guān)于什么是javascript模塊化以及為何使用模塊化開發(fā)的文章就介紹到這了,更多相關(guān)什么是模塊化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: