这篇文章将为大家详细讲解有关JavaScript高级语法中的模块化怎么理解，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。
创新互联建站专注于通榆企业网站建设,响应式网站设计,商城网站开发。通榆网站建设公司,为通榆等地区提供建站服务。全流程按需网站制作，专业设计，全程项目跟踪，创新互联建站专业和态度为您提供的服务
到底什么是模块化、模块化开发呢？
事实上模块化开发最终的目的是将程序划分成一个个小的结构。
这个结构中编写属于自己的逻辑代码，有自己的作用域，不会影响到其他的结构。
这个结构可以将自己希望暴露的变量、函数、对象等导出给其结构使用。
也可以通过某种方式，导入另外结构中的变量、函数、对象等。
上面说提到的结构，就是模块；按照这种结构划分开发程序的过程，就是模块化开发的过程。
在网页开发的早期，Brendan Eich开发JavaScript仅仅作为一种脚本语言，做一些简单的表单验证或动画实现等，那个时候代码还是很少的：
这个时候我们只需要讲JavaScript代码写到
并没有必要放到多个文件中来编写。
但是随着前端和JavaScript的快速发展，JavaScript代码变得越来越复杂了：
ajax的出现，前后端开发分离，意味着后端返回数据后，我们需要通过JavaScript进行前端页面的渲染。
SPA的出现，前端页面变得更加复杂：包括前端路由、状态管理等等一系列复杂的需求需要通过JavaScript来实现。
包括Node的实现，JavaScript编写复杂的后端程序，没有模块化是致命的硬伤。
所以，模块化已经是JavaScript一个非常迫切的需求。所以ES6（2015）才推出了自己的模块化方案。
在此之前，为了让JavaScript支持模块化，涌现出了很多不同的模块化规范：AMD、CMD、CommonJS等。
比如命名冲突的问题。
通过立即函数调用表达式（IIFE）来解决上面的问题。因为函数有自己的作用域，不会造成不同文件命名冲突。
// a.js
var moduleA = (function() {
var name = "llm"
var age = 22
var isFlag = true
return {
name: name,
isFlag: isFlag
}
})() // b.js
var moduleB = (function() {
var name = "zh"
var isFlag = false
return {
name: name,
isFlag: isFlag
}
})()// 使用 moduleA.name moduleB.name
但是，我们其实带来了新的问题：
我必须记得每一个模块中返回对象的命名，才能在其他模块使用过程中正确的使用。
代码写起来混乱不堪，每个文件中的代码都需要包裹在一个匿名函数中来编写。
在没有合适的规范情况下，每个人、每个公司都可能会任意命名、甚至出现模块名称相同的情况。
所以，我们会发现，虽然实现了模块化，但是我们的实现过于简单，并且是没有规范的。
我们需要制定一定的规范来约束每个人都按照这个规范去编写模块化的代码。这个规范中应该包括核心功能：模块本身可以导出暴露的属性，模块又可以导入自己需要的属性。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函数可以帮助我们导入其他模块（自定义模块、系统模块、第三方库模块）中的内容。
Node中对CommonJS进行了支持和实现，让我们在开发node的过程中可以方便的进行模块化开发：
在Node中每一个js文件都是一个单独的模块。
这个模块中包括CommonJS规范的核心变量：exports、module.exports、require。
exports和module.exports可以负责对模块中的内容进行导出。
require函数可以帮助我们导入其他模块（自定义模块、系统模块、第三方库模块）中的内容。
下面我们将来介绍exports、module.exports、require的使用。
exports是一个对象，我们可以在这个对象中添加很多个属性，添加的属性会导出。
我们也可以通过module.exports直接导出一个对象。
我们通过require()函数导入一个文件。并且该文件导出的变量。
下面来详细介绍一个module.exports。
CommonJS中是没有module.exports的概念的。
但是为了实现模块的导出，Node中使用的是Module的类，每一个模块都是Module的一个实例，也就是module。
所以在Node中真正用于导出的其实根本不是exports，而是module.exports。
因为module才是导出的真正实现者。
并且内部将exports赋值给module.exports。
该方式的导入导出有以下特点：
Node中的文件都运行在一个函数中。可以通过打印console.log(arguments.callee + "")来验证。
导入导出是值的引用，如果导出的是一个基本数据类型值，那么导出文件改变该值，然后导入文件该变量的值也不会变。
// a.js
const obj = require("./b.js")
console.log(obj)
setTimeout(() => {
obj.name = "llm"
}, 1000) // b.js
const info = {
name: "zh",
age: 22,
foo: function() {
console.log("foo函数~")
}
}
setTimeout(() => {
console.log(info.name) // llm
}, 2000)
module.exports = info他是通过require 函数来导入的，只有在执行js代码才会知道模块的依赖关系。
代码是同步执行的。
模块多次引入，只会加载一次。每个module内部会存在一个loaded来确定是否被加载过。
代码循环引入的时候，深度优先来加载模块。然后再广度优先。
我们现在已经知道，require是一个函数，可以帮助我们引入一个文件（模块）中导出的对象。
那么，require的查找规则是怎么样的呢？
详细查找规则，请访问这里
这里我总结比较常见的查找规则：导入格式如下：require(X)
模块在被第一次引入时，模块中的js代码会被运行一次
模块被多次引入时，会缓存，最终只加载（运行）一次
为什么只会加载运行一次呢？
这是因为每个模块对象module都有一个属性：loaded。为false表示还没有加载，为true表示已经加载。
如果有循环引入，那么加载顺序是什么？
如上图，Node采用的是深度优先算法：main -> aaa -> ccc -> ddd -> eee ->bbb
CommonJS加载模块是同步的：
同步的意味着只有等到对应的模块加载完毕，当前模块中的内容才能被运行。
这个在服务器不会有什么问题，因为服务器加载的js文件都是本地文件，加载速度非常快。
如果将它应用于浏览器呢？
浏览器加载js文件需要先从服务器将文件下载下来，之后再加载运行。
那么采用同步的就意味着后续的js代码都无法正常运行，即使是一些简单的DOM操作。所以在浏览器中，我们通常不使用CommonJS规范。当然在webpack中使用CommonJS是另外一回事。因为它会将我们的代码转成浏览器可以直接执行的代码。
在早期为了可以在浏览器中使用模块化，通常会采用AMD或CMD。但是目前一方面现代的浏览器已经支持ES Modules，另一方面借助于webpack等工具可以实现对CommonJS或者ES Module代码的转换。AMD和CMD已经使用非常少了，所以这里我们进行简单的演练。
AMD主要是应用于浏览器的一种模块化规范：
AMD是Asynchronous Module Definition（异步模块定义）的缩写。它采用的是异步加载模块。
我们提到过，规范只是定义代码的应该如何去编写，只有有了具体的实现才能被应用。
AMD实现的比较常用的库是require.js和curl.js。
require.js的使用
定义HTML的script标签引入require.js和定义入口文件。data-main属性的作用是在加载完src的文件后会加载执行该文件
// index.html
//main.js
require.config({
baseUrl: '', // 默认是main.js的文件夹路径
paths: {
foo: "./foo"
}
})
require(["foo"], function(foo) {
console.log("main:", foo)
}) // foo.js
define(function() {
const name = "zh"
const age = 22
function sum(num1, num2) {
return num1 + num2
}
return {
name,
age,
sum
}
})CMD规范也是应用于浏览器的一种模块化规范：
CMD 是Common Module Definition（通用模块定义）的缩写。它也采用了异步加载模块，但是它将CommonJS的优点吸收了过来。
AMD实现的比较常用的库是SeaJS。
SeaJS的使用
引入sea.js和使用主入口文件。
