工作上接觸到的模組化都是比較主流的ESM和commonJS

CSS上通用的是BEM

這裡主要是總結給自己看的

ESM（ES6 Module）

一個檔案一個模組

基本是webpack結合vue最常用的東西了

引入import，暴露用export

import request from '@/utils/request'

// 今日交易列表
export function getTodayTradeList(params) {
    return request({
        url: '/merchant.OrderTradeAH.queryTodayTrade',
        method: 'get',
        params
    })
}
 

使用的時候可以解構或者別的，這樣匯入後你就可以用這個方法了

 import {getTodayTradeList} from '@/api/account'

UMD（Universal Module Definition)

打包的時候出現，先判斷是否支援AMD，再判斷是否支援CommonJS

都不支援，使用全域性變數

也沒用過，不大清楚

CommonJS

同步執行，本地載入

一個檔案一個模組，通過require引入模組，通過module.exports暴露模組介面

形如

const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  BASE_API: '"/api/"',
})
 

然後用的時候會以這樣的形式出現，我們拿來當API拼接了

 excelUrl: process.env.BASE_API + '/merchant.OrderTradeAH...

AMD(Async Module Definition)

非同步，使用require載入，使用define定義模組

依賴前置，提前執行

常用RequireJS(這算是個外掛？

沒用過，程式碼自己google吧

CMD（Common Module Definition）

一個檔案一個模組,懶執行（用到了才執行）

使用require定義模組，使用require載入模組，常用SeaJS

BEM（Block Elment Modifier)

這是CSS的模組化概念，我不知道別人怎麼寫，我用這個感覺很費腦子- -

一般都會根據UI圖寫模組

如果是塊，比如頭部，頂部，寫法不是駝峰法而是單橫線 形如 main-top

如果main有子元素search，則main-top__search

如果這個search有狀態，比如點選後或者hover，你可以寫main-top__search--hover

寫法看個人~