前言
对前端模块化规范做的一点笔记
什么是模块化？
或根据功能、或根据数据、或根据业务，将一个大程序拆分成互相依赖的小文件，再用简单的方式拼装起来。
模块化要解决的问题：
- 如何包装一个模块的的代码，使之不污染模块外的代码；
- 如何唯一标识一个模块；
- 如何在不增加全局变量的情况下将模块的 API 暴露出去；
AMD
- JS 的模块化规范，也主要应用于浏览器端
- 异步模块规范
- AMD 是
RequireJS在的推广和普及过程中被创造出来 - 运行时加载，即脚本代码在 require 的时候，会全部执行，确定模块之间的依赖关系。
- 采用require()语句加载模块，但是不同于CommonJS，它要求两个参数。(第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功之后的回调函数。)
require(['./math', './utils'], function (math, utils) {
math.add(2, 3);
utils.request();
});
CMD
- JS 的模块化规范，也主要应用于浏览器端
- 同步模块规范
- CMD 是
SeaJS在的推广和普及过程中被创造出来 - 运行时加载，即脚本代码在 require 的时候，会全部执行，确定模块之间的依赖关系。
- 与AMD比较两者的区别：CMD 推崇依赖就近，AMD 推崇依赖前置
// AMD
// 依赖必须一开始就写好
// AMD 也支持依赖就近，但 RequireJS 作者和官方文档都是优先推荐依赖前置写法。
define(['./utils'], function(utils) {
utils.request();
});
// CMD
define(function(require) {
// 依赖可以就近书写
var utils = require('./utils');
utils.request();
});
CommonJS
前面说了， AMD、CMD 主要用于浏览器端，随着 node 诞生，服务器端的模块规范 CommonJS 被创建出来。
- node 的模块化规范，也主要应用于服务器端
- 同步模块规范
- 使用
module.exports来暴露模块，使用require()来引用模块 - 运行时加载，即脚本代码在 require 的时候，会全部执行，确定模块之间的依赖关系。
// 暴露模块：
const students = {};
const teachers = {};
module.exports = {
students,
teachers
};
// 引用模块：
// 引用的整个模块会初始化为一个Module对象；
const { teachers } = require('./info.js');
模块内 module、exports、module.exports、require() 的含义:
-
module是在模块内指向模块对象本身的一个引用； -
module.exports是 module 一个属性；属性值包含的是模块对外输出的值； -
exports是指向 module.exports 的一个变量； -
require()是用来加载模块的函数；返回的就是被加载模块的 module.exports；
require() 引用模块的原理:1. require 命令第一次加载脚本文件，会执行整个脚本文件，然后在内存中生成一个对象；2.以后再次使用到这个模块时，会从缓存中找到第一次生成的那个对象；
ESM（ES6 module）
AMD 、 CMD 等都是在原有JS语法的基础上二次封装的一些方法来解决模块化的方案，ES6 module（在很多地方被简写为 ESM）是语言层面的规范，ES6 module 旨在为浏览器和服务器提供通用的模块解决方案。长远来看，未来无论是基于 JS 的 WEB 端，还是基于 node 的服务器端或桌面应用，模块规范都会统一使用 ES6 module。
- 编译时加载或叫做（“静态加载”），即是在编译时（import()是运行时加载）处理模块依赖关系
- 利用编译时加载，可以对代码做很多之前无法完成的优化：
1. 在开发阶段就可以做导入和导出模块相关的代码检查。
2. 结合 Webpack、Babel 等工具可以在打包阶段移除上下文中未引用的代码（dead-code），这种技术被称作“tree shaking”，可以极大的减小代码体积、缩短程序运行时间、提升程序性能。 - 导出接口使用
export关键字，导入接口使用import关键字。
// 导出
// config.js
const prefix = 'https://github.com';
const api = `${prefix}/ronffy`;
export {
prefix,
api,
}
// 导入
import { api as myApi } from './config.js';
使用import()实现按需加载：
function foo() {
import('./config.js')
.then(({ api }) => {
});
}
const modulePath = './utils' + '/api.js';
import(modulePath);
参考文献：
https://fe.ecool.fun/topic/8ecafda7-0ae6-40bd-b8c6-385d02fa7165?orderBy=updateTime&order=desc&tagId=10
https://juejin.cn/post/7003285499628486670
网友评论