01-模块化基础

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、模块是什么？

1.1：理解什么是模块

1. 将一个复杂的程序依据一定的规则拆分成单个文件,并最终组合在一起

2. 这些拆分的文件就是模块，模块内部数据是私有的，只是向外暴露一些方法与外部其他模块通信

1.2.原因：

1.降低复杂度，提高解耦性

2.避免命名冲突，按需加载 更高复用性高可维护性

二、模块化规范

主流的规范有2种：CommonJS、ES6

2.1CommonJS

2.1.1.规范

1.官网：http://wiki.commonjs.org/wiki/Modules

2.每个文件都是一个模块

3.CommonJS模块化的代码即可在服务端运行 也可在浏览器端运行

4.服务器端：模块化的代码可直接运行

5.浏览器端：模块化的代码要经过Browserify 编译

2.1.2.基本语法

1.暴露语法：第一种方式：module.exports = value;第二种方式：exports.xxx = value

2.引入语法：引入第三方模块：require(xxx),xxx为模块名；引入自定义模块：require(xxx),xxx我模块文件路径

3.内置关系：

4.新建文件夹 xxxx在x文件夹中新建yyyyy

y文件夹中 新建app.js module1.js module2.js
app.js中
代码如下（示例）：

// console.log(exports === module.exports);//true
// 暴露的本质是 module.exports的内容 引入的内容 取决于暴露的内容
const module1 = require('./module1')
const {showData,showMsg} = require('./module1')//第二种 引入的同时 进行解构赋值

module1.js中

const data = '我是数据'
const msg = '我是msg'
// module1使用 module.exports.xxx = {value} 去暴露 value就是暴露的内容
module.exports ={
    showData(){
        console.log(data);
    },
    showMsg(){
        console.log(msg);
    }
}

2.2.浏览器端使用CommonJS模块化

2.2.1 把整个commonJS文件复制一个使用

新建 index.html文件 引入app.js
此时 浏览器识别不了 require关键字 需要安装 一个解释器 npm i browserify -g
当前文件 集成终端中 执行 browserify ./app.js -o ./build.js 生成 build.js编译后的文件
index.html引入build.js 此时 输出正常

2.3ES6模块化

2.3.1规范：同样是每个文件是一个模块；另外要借助Babel和Browserify依次编码代码,

2.3.2基本语法：

暴露语法：分别暴露：export 暴露内容 统一暴露：export{暴露内容1,暴露内容2};默认暴露：export default 暴露内容
引入语法：关键字 import module1 from ‘./module1’
分别暴露：关键字 export xxx

export function show(){
 console.log('打印')
]
export function hide(){
	console.log('打印2')
}

引入语法：

import {show,hide} from './xxxx' //注意：{}这里不是解构赋值
// 如果有变量 重命名
import {xxx as xxx2} from './...'
// 打包引入
import * as xxx from './...'
// 引入 【统一暴露】的模块 【和分别暴露的引入方式同理】
import {huahua,xiaoyuan,getx} from './module3'
// 引入 【默认暴露】的模块 不可使用上面两种引入的方式 只能用变量接收
import module4 from './module4';