模块化（CommonJS、ES6中的模块化）

一、模块化入门

什么是模块

将一个复杂的程序依据一定的规则拆分成单个文件， 这些拆分的文件就是模块，模块内部数据是私有的，只是向外部暴露一些方法与外部其他模块通信，并将模块按照需要最终组合在一起 --> 简单来说就是包括一些拆或者合的js文件

模块化的功能

• 降低复杂度，提高解耦行（程序代码的编写应该 => 高内聚，低耦合：相同功能点配合的越紧密越好，不同功能点之间把影响降到最低）
• 避免命名冲突（在各自的模块写代码，不导出的内容，外面拿不到）
• 更好的分离，按需加载（需要哪个功能就引入哪个功能）
• 更高复用性，高可维护性（同一功能点只写一次，可以在多个页面使用）

二、模块化规范

一个大的项目必定会使用模块化技术，使用模块化就会使用相应的模块化规范，现在比较流行的模块化规范有：CommonJS（可以在服务端+浏览器端运行）、ES6（只能在浏览器端运行）

CommonJS

1. 运行环境

CommonJS既可以运行在服务端，也可以运行在浏览器端

2. 基本语法

暴露语法

（希望别人可以用到的内容就暴露，不希望的不暴露，预防了命名冲突）

第一种方式：module.exports = value   (value为暴露的内容）

第二种方法：exports.XXX = value  XXX为暴露内容的名字

引入语法

引入第三方模块：require(XXX)，XXX为模块名

引入自定义模块：require(XXX)，XXX为模块文件路径

内置关系

① export和modult.exporst指向的是一个对象：我们可以通过exports.name = value和modult.exports.name = value，向这个对象中添加一个属性名为name，值为value的内容
② 当我们module.exports = value这样写时：使module.exports指向了value,而不是原来的对象
③ 暴露的本质是module.exports的内容：module.exports和exports不能混用，若混用了，以module.exports为主

// 一个文件中暴露
module.exports = {
  show1() {
    console.log(1)    =>   最终呈现的是{show1() {console.log(1)}},不会呈现x:100
  }
}
export.x = 100 // 不能与module.exports混用（将不会生效）
// 另一个文件中引入
const show = require('暴露的文件地址')
show.show1()

ES6模块化规范

1.运行环境

只能在浏览器端运行

2.基本语法

暴露模块

1. 分别暴露：export 暴露内容
2. 统一暴露：export {暴露内容1，暴露内容2}
3. 默认暴露：export defalut 暴露内容

引入模块

1. 方法1：import {xxx,yyy} from './module'
2. 方法2：import module from './module'

使用

① 分别暴露

暴露

// 文件名为module
export const data = 'fsdf'
export const msg = 'sdfs'
export function show () {
   console.log(1)
}
//下面这样写不对，声明与暴露必须在一起
function show1 () {
   console.log(2)
}
export show1

引入分别暴露

• 引入
  import {data,msg,show} from './module.js' ==》 注意这不是解构赋值，解构赋值的形式为 const {a} = {},右边为对象，中间为等号，有const
• 引入+重命名
  imgport {data as data2} from './module.js' // 将data重新命名为data2
• 引入+打包引入
  import * as module from './module.js' //将所有引入内容都放在名字为module的对象中

②统一暴露

暴露

// 文件名为module
const data = 'fsdf'
const msg = 'sdfs'
function show () {
	console.log(1)
}
// 统一暴露（精简版）--用的多
export {data,msg,show}
// 统一暴露（完整版 -- 有重命名）
export {data as a,msg as b,show as c}

引入统一暴露与分别暴露的三种方式相同

③ 默认暴露（一个文件只能使用一次，只暴露一个数据）

暴露

// 文件名为module
// 方法1
export default {
  name:'sdfs',
  age: 5 
}
// 方法2
// const a = {
//  name:'sdfs',
//  age: 5 
//}
//export default a

引入统一暴露只有一种方法
import module from './module'

④ 多种暴露方式写在一起

暴露

export default {
  name:'sdfs',
  age: 5 
}

const data = 'fsdf'
const msg = 'sdfs'
function show () {
	console.log(1)
}
export {data,msg,show}

export function show1 () {
	console.log(2)
}
export const asd = 'fsdf'

引入多种暴露
import module,{data,msg,show,show1,asd} from './module'