一、模块
模块化主要是指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
目的:实现单页面应用。
作用:代码的复用 / 简化编码,提高效率。
五、组件化
当整个应用的代码以组件的形式来编写,这个应用就是一个组件化应用。