什么是模块化开发
- 模块化顾名思义就是将原本没有规律,散乱的东西整合到一起
为什么要提出模块化开发
- 在前端开发中经常会在html中引入很多的js文件,这些文件若其中有相互的依赖关系,那么书写的顺序就显得很重要,可是这种依赖又不是那么的明显,若文件很多堆放起来又显得页面很臃肿,重要的是代码会变得难以维护
js模块化开发的发展
- js的模块化开发大概分为四个阶段
commonJS—》AMD(requireJS)—》CMD(seaJS)—》ES6模块化规范
commonJS
- 开始作为node的模块化规范,后来也可以在浏览器上运行
- 暴露变量 module.js
const getName1 = () => {
console.log("zh1");
}
//暴露,方法1,require接到的返回值为一个对象,
//使用该对象 .getName1 可调用这个函数,大括号中可以传入多个变量
module.exports = {
getName1
}
/**
* 方法二和方法三不常使用
*/
//暴露,方法2,返回值为一个方法可直接调用
// module.exports = getName1;
//暴露,方法3,返回值为一个对象,使用对象.方法名可调用该函数
// exports.getName1 = getName1;
- 引入其他模块 index.js,入口文件
/**
* require 中的path书写规范
* 1、当前目录需要在前面写./
* 2、后缀名为.json,.js,.node可以省略
* 3、核心模块和npm下载的模块,path可以直接写名称
*
* 模块分为3种
* 1、自定义模块
* 2、node.js的核心模块(node自带)
* 3、npm下载的模块
*/
let m1 = require('./module1');
console.log(m1.getName1());//zh1 undefined
AMD
- 定义与暴露,AMD中定义模块使用define方法,参数为一个函数,该函数的返回值就是暴露的模块,module1.js
//定义模块
define(function () {
function show1() {
console.log("module1 show1");
}
//返回show1可直接暴露模块
return show1;
})
- 配置,配置模块需要使用require.config方法,文件:main.js
// 配置模块
require.config({
baseurl: "./src/", //baseurl为moudule文件之前的目录
paths: { //目标文件名
'm1': 'module1',
'm2': 'module2'
}
});
//主模块,这里数组中的m1就是配置中的m1
require(['m1', 'm2'], function (m1, m2) {
m1();
m2();
})
- 使用,使用前需要引入require.min.js文件,使用cdn或者直接下载到本地https://requirejs.org/docs/download.html,之后再将其引入,并在后面加上data-main属性值为main文件的路径
<script type="text/javascript" src="./src/require.min.js" data-main="./src/main.js"></script>
CMD
- CMD吸收了commonJS和AMD的语法,操作比较简便
- 在CMD中无论是定义模块,还是暴露,还是引入都是在define方法里进行的
- module1.js
//定义模块
define(function (require, exports, module) {
function add(x, y) {
return x + y;
}
//暴露,调用形参module下面的exports并将add赋值
module.exports = add;
})
- main.js
define(function (require, exports, module) {
//引入module1
const result = require('./module1');
console.log(result());
})
- 使用CMD前需要引入sea.js
//index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script type="text/javascript" src="./src/sea.js"></script>
<script type="text/javascript">
//使用sea.js下的seajs对象的use方法调用main.js文件
seajs.use('./src/main.js');
</script>
</body>
</html>
ES6模块化规范
- ES6的模块化操作有些复杂,按照规定的语法写好后,需要使用babel(一种js编辑器)将代码转化为commonJS的代码,然后再使用commonJS的操作方法,将建立构建文件
- 相关配置
1、下载babel,使用npm下载,在项目目录下的cmd中打如下命令
npm install --save-dev @babel/core @babel/cli @babel/preset-env
2、配置babel,配置babel有三种方法,有兴趣的可以在babel官网研究一下,下面简单介绍一下最常用的方法,babel官网
首先在src文件夹外创建一个名字为空的.babelrc文件
文件内容为,
{
"presets": [
"@babel/preset-env"
]
}
3、使用,在项目目录下的cmd中打如下命令
npx babel src -d build
这个操作就是把当前文件代码转化为commonJS的代码
4、再按照commonJS的操作构建一个built.js的文件即可
5、ES6规范模块化的语法
暴露
1)分别暴露
export后接变量或方法的完整定义
2)统一暴露使用export对象
export{
.......(变量或方法名)
.......
}
引入
1、import {(方法名或变量名,可书写多个)} from ‘path’,适用于分别暴露和统一暴露
2、import 方法名或变量名 from ‘path’ ,适用于默认暴露