到底什么是模块化、模块化开发呢?
事实上模块化开发最终的目的是将程序划分成一个个小的结构;
这个结构中编写属于自己的逻辑代码,有自己的作用域,定义变量名词时不会影响到其他的结构;
这个结构可以将自己希望暴露的变量、函数、对象等导出给其结构使用;
也可以通过某种方式,导入另外结构中的变量、函数、对象等;
上面说提到的结构,就是模块;按照这种结构划分开发程序的过程,就是模块化开发的过程;
无论你多么喜欢JavaScript,以及它现在发展的有多好,它都有很多的缺陷:
变量作用域问题;对于早期的JavaScript没有模块化来说,确确实实带来了很多的问题;
在网页开发的早期,Brendan Eich开发JavaScript仅仅作为一种脚本语言,做一些简单的表单验证或动画实现等,那个时候代码还是很少的:
标签中即可;只有一行。但是随着前端和JavaScript的快速发展,JavaScript代码变得越来越复杂了:
前后端开发分离,意味着后端返回数据后,我们需要通过JavaScript进行前端页面的渲染;前端路由、状态管理等等一系列复杂的需求需要通过JavaScript来实现;所以,模块化已经是JavaScript一个非常迫切的需求:
但是JavaScript本身,直到ES6(2015)才推出了自己的模块化方案;
在此之前,为了让JavaScript支持模块化,涌现出了很多不同的模块化规范:AMD、CMD、CommonJS等;
在我们的课程中,我将详细讲解JavaScript的模块化,尤其是CommonJS和ES6的模块化。
早期没有模块化带来了很多的问题:比如命名冲突的问题
当然,我们有办法可以解决上面的问题:立即函数调用表达式(IIFE)
但是,我们其实带来了新的问题:
返回对象的命名,才能在其他模块使用过程中正确的使用;混乱不堪,每个文件中的代码都需要包裹在一个匿名函数中来编写;任意命名、甚至出现模块名称相同的情况;所以,我们会发现,虽然实现了模块化,但是我们的实现过于简单,并且是没有规范的。
JavaScript社区为了解决上面的问题,涌现出一系列好用的规范,接下来我们就学习具有代表性的一些规范。
我们需要知道CommonJS是一个规范,最初提出来是在浏览器以外的地方使用,并且当时被命名为ServerJS,后来为了体现它的广泛性,修改为CommonJS,平时我们也会简称为CJS。
Node是CommonJS在服务器端一个具有代表性的实现;
Browserify是CommonJS在浏览器中的一种实现;
webpack打包工具具备对CommonJS的支持和转换;
所以,Node中对CommonJS进行了支持和实现,让我们在开发node的过程中可以方便的进行模块化开发:
在Node中每一个js文件都是一个单独的模块;
这个模块中包括CommonJS规范的核心变量:exports、module.exports、require;
我们可以使用这些变量来方便的进行模块化开发;
前面我们提到过模块化的核心是导出和导入,Node中对其进行了实现:
exports和module.exports可以负责对模块中的内容进行导出;require函数可以帮助我们导入其他模块(自定义模块、系统模块、第三方库模块)中的内容;我们来看下面这2个文件

注意:exports是一个对象,我们可以在这个对象中添加很多个属性,添加的属性会导出;
// bar.js
const name = "zhangsan"
const age = 18
function sayHello(name) {
console.log("hello " + name)
}
exports.name = name
exports.age = age
exports.sayHello = sayHello
另外一个文件中可以导入:
// main.js
const bar = require("./bar")
console.log(bar.name)
console.log(bar.age)
bar.sayHello(bar.name)
上面这行完成了什么操作呢?理解下面这句话,Node中的模块化一目了然
但是Node中我们经常导出东西的时候,又是通过module.exports导出的:
module.exports和exports有什么关系或者区别呢?我们追根溯源,通过维基百科中对CommonJS规范的解析:
CommonJS中是没有module.exports的概念的;
但是为了实现模块的导出,Node中使用的是Module的类,每一个模块都是Module的一个实例,也就是module;
所以在Node中真正用于导出的其实根本不是exports,而是module.exports;
因为module才是导出的真正实现者;
但是,为什么exports也可以导出呢?
引用;const name = "zhangsan"
const age = 18
function sayHello(name) {
console.log("hello " + name)
}
module.exports = {
name,
age,
sayHello
}
// 不生效,因为导出的时module.exports
// exports = {
// name,
// age,
// sayHello
// }
我们这里从几个方面来研究修改代码发生了什么?
在三者项目引用的情况下,修改exports中的name属性到底发生了什么?
导入方的值也会跟着一起修改
在三者引用的情况下,修改了main中的bar的name属性,在bar模块中会发生什么?
导出方的值也会一起修改
如果module.exports不再引用exports对象了,那么修改export还有意义吗?
没意义了
我们现在已经知道,require是一个函数,可以帮助我们引入一个文件(模块)中导出的对象。
那么,require的查找规则是怎么样的呢?
情况一:X是一个Node核心模块,比如path、http
require("path")
情况二:X是以 ./ 或 ../ 或 /(根目录)开头的
require("./abc/cba.js")
第一步:将X当做一个文件在对应的目录下查找;
第二步:没有找到对应的文件,将X作为一个目录
查找目录下面的index文件
情况三:直接是一个X(没有路径),并且X不是一个核心模块
// D:\\BaiduSyncdisk\\frontend\\code\\06JS_MODULE\\02模块化开发\\01CommonJs\main.js中编写
require('abc’)
[
'D:\\disk\\frontend\\code\\06JS_MODULE\\02模块化开发\\01CommonJs\\node_modules',
'D:\\disk\\frontend\\code\\06JS_MODULE\\02模块化开发\\node_modules',
'D:\\disk\\frontend\\code\\06JS_MODULE\\node_modules',
'D:\\disk\\frontend\\code\\node_modules',
'D:\\disk\\frontend\\node_modules',
'D:\\disk\\node_modules',
'D:\\node_modules'
]
如果上面的路径中都没有找到,那么报错:not found
结论一:模块在被第一次引入时,模块中的js代码会被运行一次
结论二:模块被多次引入时,会缓存,最终只加载(运行)一次
loaded。结论三:如果有循环引入,那么加载顺序是什么?
如果出现下图模块的引用关系,那么加载顺序是什么呢?
图结构;深度优先算法:main -> aaa -> ccc -> ddd -> eee ->bbb
CommonJS加载模块是同步的:
同步的意味着只有等到对应的模块加载完毕,当前模块中的内容才能被运行;
这个在服务器不会有什么问题,因为服务器加载的js文件都是本地文件,加载速度非常快;
如果将它应用于浏览器呢?
无法正常运行,即使是一些简单的DOM操作;所以在浏览器中,我们通常不使用CommonJS规范:
webpack中使用CommonJS是另外一回事;在早期为了可以在浏览器中使用模块化,通常会采用AMD或CMD:
ES Modules,另一方面借助于webpack等工具可以实现对CommonJS或者ES Module代码的转换;非常少了;AMD主要是应用于浏览器的一种模块化规范:
AMD是Asynchronous Module Definition(异步模块定义)的缩写;
它采用的是异步加载模块;
事实上AMD的规范还要早于CommonJS,但是CommonJS目前依然在被使用,而AMD使用的较少了;
我们提到过,规范只是定义代码的应该如何去编写,只有有了具体的实现才能被应用:
require.js和curl.js;第一步:下载require.js
第二步:定义HTML的script标签引入require.js和定义入口文件:
<script src="./lib/require.js" data-main="./index.js">script>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="./lib/require.js" data-main="./src/main.js"></script>
</body>
</html>
src/foo.js
define(function() {
const name = "abc"
const age = 18
function sum(num1, num2) {
return num1 + num2
}
return {
name,
age,
sum
}
})
src/bar.js
define(["foo"], function(foo) {
console.log("--------")
// require(["foo"], function(foo) {
// console.log("bar:", foo)
// })
console.log("bar:", foo)
})
src/main.js
require.config({
baseUrl: '',
paths: {
foo: "./src/foo",
bar: "./src/bar"
}
})
require(["foo", "bar"], function(foo) {
console.log("main:", foo)
})
CMD规范也是应用于浏览器的一种模块化规范:
异步加载模块,但是它将CommonJS的优点吸收了过来;CMD也有自己比较优秀的实现方案:
第一步:下载SeaJS
第二步:引入sea.js和使用主入口文件
index.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<script src="./lib/sea.js">script>
<script>
seajs.use("./src/main.js")
script>
body>
html>
src/foo.js
define(function(require, exports, module) {
const name = "mq"
const age = 18
function sum(num1, num2) {
return num1 + num2
}
// exports.name = name
// exports.age = age
module.exports = {
name,
age,
sum
}
});
src/main.js
define(function(require, exports, module) {
const foo = require("./foo")
console.log("main:", foo)
})
JavaScript没有模块化一直是它的痛点,所以才会产生我们前面学习的社区规范:CommonJS、AMD、CMD等,所以在ECMA推出自己的模块化系统时,大家也是兴奋异常。
ES Module和CommonJS的模块化有一些不同之处:
import和export关键字;静态分析,并且也加入了动态引用的方式;ES Module模块采用export和import关键字来实现模块化:
了解:采用ES Module将自动采用严格模式:use strict
这里我在浏览器中演示ES6的模块化开发:
<script type="module" src="main.js">script>
如果直接在浏览器中运行代码,会报如下错误:

这个在MDN上面有给出解释:
CORS 错误,因为Javascript 模块安全性需要;我这里使用的VSCode插件:Live Server
export关键字将一个模块中的变量、函数、类等导出;
我们希望将其他中内容全部导出,它可以有如下的方式:
{}里面不是ES6的对象字面量的增强写法,{}也不是表示一个对象的;export {name: name},是错误的写法;as关键字起别名// 3.导出方式三:
export const name = "mq"
export const age = 18
export function sayHello() {
console.log("sayHello")
}
export class Person {}
// console.log(name)
// 1.导出方式一:
// export {
// name,
// age,
// sayHello
// }
// 2.导出方式二: 导出时给标识符起一个别名
// export {
// name as fname,
// age,
// sayHello
// }
import关键字负责从另外一个模块中导入内容
导入内容的方式也有多种:
模块功能放到一个模块功能对象(a module object)上// 1.导入方式一:
// import { name, age, sayHello } from "./foo.js"
// 2.导入方式二: 导入时给标识符起别名
// import { name as fname, age, sayHello } from "./foo.js"
// 3.导入时可以给整个模块起别名
import * as foo from "./foo.js"
const name = "main"
console.log(name)
console.log(foo.name)
console.log(foo.age)
foo.sayHello()
补充:export和import可以结合使用
为什么要这样做呢?
统一的接口规范,也方便阅读;export和import结合使用;import { formatCount, formatDate } from './format.js'
import { parseLyric } from './parse.js'
export {
formatCount,
formatDate,
parseLyric
}
// 优化一:
// export { formatCount, formatDate } from './format.js'
// export { parseLyric } from './parse.js'
// 优化二:
// export * from './format.js'
// export * from './parse.js'
前面我们学习的导出功能都是有名字的导出(named exports):
还有一种导出叫做默认导出(default export)
注意:在一个模块中,只能有一个默认导出(default export);
// 1.默认的导出:
// // 1.1. 定义函数
// function parseLyric() {
// return ["歌词"]
// }
// const name = "aaaa"
// // export {
// // parseLyric,
// // name
// // }
// 1.2.默认导出
// export default parseLyric
// 2.定义标识符直接作为默认导出
export default function() {
return ["新歌词"]
}
// export default function() {
// return ["歌词"]
// }
// 注意事项: 一个模块只能有一个默认导出
// import { parseLyric } from "./parse_lyric.js"
import parseLyric from "./parse_lyric.js"
console.log(parseLyric())
通过import加载一个模块,是不可以在其放到逻辑代码中的,比如:
if (condition) {
import { age } from "./foo.js"
}
为什么会出现这个情况呢?
必须到运行时能确定path的值;但是某些情况下,我们确确实实希望动态的来加载某一个模块:
import() 函数来动态加载;
import { name, age, sayHello } from "./foo.js"
console.log(name, age)
// 2.import函数的使用
let flag = true
if (flag) {
// 不允许在逻辑代码中编写import导入声明语法, 只能写到js代码顶层
// import { name, age, sayHello } from "./foo.js"
// console.log(name, age)
// 如果确实是逻辑成立时, 才需要导入某个模块
// import函数
// const importPromise = import("./foo.js")
// importPromise.then(res => {
// console.log(res.name, res.age)
// })
import("./foo.js").then(res => {
console.log(res.name, res.age)
})
console.log("------")
}
import.meta是一个给JavaScript模块暴露特定上下文的元数据属性的对象。
URL;export const name = "foo"
export const age = 18
export function sayHello() {
console.log("sayHello")
}
console.log(import.meta)
ES Module是如何被浏览器解析并且让模块之间可以相互引用的呢?
ES Module的解析过程可以划分为三个阶段:
构建(Construction),根据地址查找js文件,并且下载,将其解析成模块记录(Module Record);实例化(Instantiation),对模块记录进行实例化,并且分配内存空间,解析模块的导入和导出语句,把模块指向对应的内存地址。运行(Evaluation),运行代码,计算值,并且将值填充到内存地址中;


