【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
目的：实现单页面应用。
作用：代码的复用 / 简化编码，提高效率。

五、组件化

当整个应用的代码以组件的形式来编写，这个应用就是一个组件化应用。