快捷導(dǎo)航

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

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

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

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

先來(lái)一段八股文

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

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

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

實(shí)際工作中如何使用

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

來(lái)看看示例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){
    // 在瀏覽器緩存中存儲(chǔ)token
    sessionStorage.setItem('token',data.token)
  }
  return data
}
// 修改密碼
export const resetPwd = async (params)=>{
  // 要對(duì)密碼加密
  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
}

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

如下代碼所示，所有的請(qǐng)求都放到一個(gè)文件中，不分模塊

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){
    // 在瀏覽器緩存中存儲(chǔ)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)=>{
  // 要對(duì)密碼加密
  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

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

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

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

附加幾種模塊化語(yǔ)法

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

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 定義模塊，通過(guò) require 異步加載模塊。例如：

// math.js//define第一個(gè)參數(shù)表示當(dāng)前模塊所依賴的模塊，可以是一個(gè)字符串?dāng)?shù)組，也可以是一個(gè)函數(shù)// 定義一個(gè)名為 "math" 的模塊，依賴于 "jquery" 和 "underscore" 兩個(gè)模塊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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: