【JavaScript】淺談前端模組化與元件化

一、模組

模組化主要是指JS模組化，一個JS檔案就是一個模組，向外提供特定功能的程式。
模組內部的資料是私有的，向外暴露一些介面與外部其他模組進行通訊。

二、模組化

當整個應用JS以模組來編寫，這個應用就是一個模組化應用。

三、ES6模組化

1、暴露

（1）預設暴露

只能有一個
本質：將整個模組以物件的形式暴露，物件中有default屬性，即：{default:{get…}}

export default{
  getCategorys1(){
  },
  getCategorys2(){  
  },
  getCategorys3(){
  }
}
------------------------------
// 暴露出去的樣子
{
  default:{}
}

// 引入預設暴露
import {default as XXX} from './m3'
// 簡寫
import m3 from  './m3'

（2）分別暴露

可以有多個
本質 ：將整個模組以物件的形式暴露，物件中有add和data屬性

// 函式分別暴露
export function add(a,b){
    return a+b;
}
// 物件分別暴露
export const data={
    name:'尚矽谷',
    age:15   
}
-------------------------------
{
  add,
  data
}

（3）統一暴露

可以有多個
本質: 將整個模組以物件的形式暴露, 物件中有yyy和zzz屬性,

function mul(a,b){
    return a*b;
}
function div(a,b){
    return a/b
}
//統一暴露 注意點：必須要使用物件簡化模式
export{
   mul,div
}
------------------------------
{
   mul
   div 
}

// 結構賦值
import {yyy, zzz} from './test'  

// 通用方式
// 把test中暴露的所有的東西打包成為一個物件
import * as API from './test'   

（4）匯入並匯出

引入並暴露預設暴露的東西

export {default as login} from './acl/login'
// {default: {}}
export {default as user} from './acl/user'

{
  login: {},
  user: {},
  role,
} 

四、元件

實現特定功能的程式碼塊，資源集合，可以包含HTML、CSS、JS
作用：程式碼的複用 / 簡化編碼，提高效率

五、元件化

當整個應用的程式碼已元件的形式來編寫，這個應用就是一個元件化應用。