JS 模块

模块化开发

特点

延迟解析
默认严格模式

使用步骤

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里使用模块

在

动态按需加载模块

通过import方法实现（返回promise对象），举例：

注：
因为import语句只能放在最外层，不能放在内部，所以这里使用import方法