javascript模塊化怎么使用

這篇文章主要介紹“javascript模塊化怎么使用”，在日常操作中，相信很多人在javascript模塊化怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”javascript模塊化怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

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

 先來一段八股文

模塊化開發可以帶來以下好處：

• 提高代碼的復用性：模塊化可以將代碼劃分成可重用的部分，降低代碼的冗余和重復，提高代碼的復用性。

• 簡化代碼的維護和調試：當一個軟件系統變得越來越復雜時，進行模塊化開發可以使得每個模塊都相對獨立，這樣就可以方便地維護和調試每個模塊，而不必考慮整個系統的復雜性。

• 提高代碼的可讀性：模塊化可以使得代碼更加結構化，清晰明了，從而提高代碼的可讀性和可維護性。

• 提高開發效率：模塊化開發可以使得團隊成員在不同模塊上并行開發，從而提高開發效率。

• 降低項目的風險：模塊化開發可以使得開發人員更加關注模塊之間的接口和依賴關系，從而降低項目的風險。

總之，模塊化開發是一種有效的軟件開發模式，可以提高軟件開發的質量、效率和可維護性，特別是在大型軟件系統的開發中，模塊化更是必不可少的。

實際工作中如何使用

場景一：在前后端交互的ajax請求中，對不同的請求進行分類，每一個種類的業務放到一個模塊中，有用戶相關的、商品列表相關的、訂單相關的各種，為了使業務邏輯更加清晰，更改相關代碼的時候，只需要找到對應的文件，用戶相關的就去user.js修改，商品相關的就去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（模塊）都有自己的相關的代碼，代碼之間互不影響。

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

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

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

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

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

 附加幾種模塊化語法

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

1. CommonJS

CommonJS 是一種用于服務器端 JavaScript 的模塊化規范，使用 require 和 module.exports 導出和引入模塊。例如：

// 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 的模塊化規范，使用 define 定義模塊，通過 require 異步加載模塊。例如：

// math.js//define第一個參數表示當前模塊所依賴的模塊，可以是一個字符串數組，也可以是一個函數// 定義一個名為 "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;  }    // 導出模塊的功能  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 的官方模塊化規范，使用 import 和 export 導入和導出模塊。例如：

// 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，通用模塊定義）是一種支持多種模塊化規范的通用模塊化方案，它既支持 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;
}));

到此，關于“javascript模塊化怎么使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！