提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
- 前言
- 一、模块是什么？
- 二、模块化规范
-
-
-
- 主流的规范有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
-
-
- 2.2.浏览器端使用CommonJS模块化
- 2.3ES6模块化
-
前言
提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。
提示：以下是本篇文章正文内容，下面案例可供参考
一、模块是什么？
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';
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/163338.html
