模块化开发
特点
- 延迟解析
- 默认严格模式
使用步骤
1.通过export导出成员
2.在另一个文件当中通过import接收成员
3.引用通过webpack编译后生成的bundle.js文件
举例：
- a.js
export let a = { name: "aaa" };
export const b = 111;
// 导出成员a和b
- b.js
import * as a from './a'
// 导入a.js里的所有成员，注意相对路径需要加`./`这样的定位符
console.log(a.a, a.b);
// 输出导入的成员
- webpack.config.js
module.exports = {
mode: 'development',
entry: './b.js',
output: {
filename: 'bundle.js',
path: __dirname + '/build'
}
}
导入webpack生成的文件后可以发现输出了a和b的值。
注：
注意相对路径需要加./这样的定位符，因为模块化需要在node环境下使用，如果不加定位符，则默认去依赖模块当中寻找，而不会去相对路径下找
默认成员default
在模块化当中还可以导出默认成员default，则通过导入模块成功语法时，只导入默认成员default的值，举例：
- a.js
export default "aaa";
// 导出默认成员"aaa"
- b.js
import a from './a'
// 导入默认成员default，并命名为a，相当于下面这个意思
// import default as a from './a'
console.log(a);
这种语法在vue的组件化工程当中很常见
导入成员语法
前面介绍了两种语法，一种是导入全部：
import * as xxx from './xxx'
还有导入默认默认成员语法：
import xxx from './xxx'
如果希望导入指定的成员也可以：
import {xxx, yyy as zzz} from './xxx'
// 导入./xxx文件里的xxx和yyy成员，并将yyy改名为zzz
还有导入如CSS文件、图片文件等模块时（在模块化开发下一些静态文件都称为模块），因为这些文件里可能不存在成员啥的，所以可以只导入，举例：
import './xxx'
还有异步引入，使用import方法，举例：
let x = import('./xxx')
// 当需要用到的时候引入，简化代码体积
// 传回来的是个Promise对象，需要使用await关键字等待
模块化导入路径问题
-
'xxx'：直接从npm依赖里寻找相关模块 -
'./xxx'/../xxx：从相对路径当中寻找相关模块 -
@/xxx：从src目录下寻找相关模块
其他
自定义实现模块管理
let myModule = (function() {
const moduleMap = {};
// 定义一个对象管理所有模块
function define(name, dependencies, action) {
// 定义模块方法，依次传入模块名、依赖的模块，以及对应的操作行为
dependencies.map((dependency, index) => {
// 获取当前模块依赖的模块
if (!(dependency in moduleMap)) throw Error(`模块：${dependency}不存在!`)
dependencies[index] = moduleMap[dependency];
})
moduleMap[name] = action(...dependencies);
// 执行模块行为
}
return {
define
}
})();
// 定义模块math，暴露出add和sub方法
myModule.define("math", [], function() {
return {
add(x, y) {
return x + y;
},
sub(x, y) {
return x - y;
}
};
})
myModule.define("utils", [], function() {
return {
toLower(val) {
return val.toLowerCase();
}
};
})
// 定义模块test，依赖math和utils模块，并使用这两个模块提供的方法
myModule.define("test", ["math", "utils"], function(math, utils) {
console.log(math.add(1, 2));
console.log(math.sub(1, 2));
console.log(utils.toLower("Me"));
})
html里使用模块
在<script>标签中设置属性type="module"即可，此时就可以用模块化相关的代码的，举例：
<script type="module">
import { Test } from "./test.js";
console.log(Test);
</script>
动态按需加载模块
通过import方法实现（返回promise对象），举例：
<script type="module">
let a = 1;
if (a === 1) {
import("./test.js").then(data => {
console.log(data.Test);
})
}
</script>
注：
因为import语句只能放在最外层，不能放在内部，所以这里使用import方法
