前端模块化的全面总结_前端模块化编程-CSDN博客

<div class="rich_media_content js_underline_content " id="js_content" style="visibility: visible;"> <p style="box-sizing: border-box; line-height: inherit; margin-top: 22px; margin-bottom: 22px; font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: 16px; text-align: start; white-space: normal; background-color: rgb(255, 255, 255); visibility: visible;"><img class="rich_pages wxw-img" data-ratio="0.5625" data-src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/EtoFrfgkjD0qWTJNsLAwu2s8EBDvyyD11KJCWKUa1xbcqANPgN8BDpLxMd4o90avZIyMughM0TmRkm4LBHHiacw/640?wx_fmt=jpeg" data-type="jpeg" data-w="1920" style="box-sizing: border-box; border-style: none; width: 677px !important; height: auto !important; visibility: visible !important;" data-index="1" src="https://mmbiz.qpic.cn/sz_mmbiz_jpg/EtoFrfgkjD0qWTJNsLAwu2s8EBDvyyD11KJCWKUa1xbcqANPgN8BDpLxMd4o90avZIyMughM0TmRkm4LBHHiacw/640?wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1" _width="677px" crossorigin="anonymous" alt="图片" data-fail="0"><h2 style="box-sizing: border-box; line-height: 1.5; margin-top: 35px; margin-bottom: 10px; padding-bottom: 12px; font-size: 20px; border-bottom: 1px solid rgb(236, 236, 236); font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; text-align: start; white-space: normal; background-color: rgb(255, 255, 255); visibility: visible;">背景</h2><p style="box-sizing: border-box; line-height: inherit; margin-top: 22px; margin-bottom: 22px; font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; font-size: 16px; text-align: start; white-space: normal; background-color: rgb(255, 255, 255); visibility: visible;">随着前端功能越来越复杂，前端代码日益膨胀，为了减少维护成本，提高代码的可复用性，前端模块化势在必行。<p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">所有js文件都在一个html中引入，造成以下不良影响：<ol style="padding-left: 28px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);" class="list-paddingleft-2"><li style="box-sizing: border-box;list-style: inherit;padding-left: 6px;">请求过多。首先我们要依赖多个模块，那样就会发送多个请求，导致请求过多</li><li style="box-sizing: border-box;list-style: inherit;padding-left: 6px;">依赖模糊。我们不知道他们的具体依赖关系是什么，也就是说很容易因为不了解他们之间的依赖关系导致加载先后顺序出错。</li><li style="box-sizing: border-box;list-style: inherit;padding-left: 6px;">难以维护。以上两种原因就导致了很难维护，很可能出现牵一发而动全身的情况导致项目出现严重的问题。</li></ol><h2 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 12px;font-size: 20px;border-bottom: 1px solid rgb(236, 236, 236);font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">模块的概念</h2><p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">webpack中是这样定义的：<blockquote style="box-sizing: border-box;color: rgb(102, 102, 102);padding: 1px 23px;margin-top: 22px;margin-bottom: 22px;border-left-width: 4px;border-left-color: rgb(203, 203, 203);background-color: rgb(248, 248, 248);font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;">在模块化编程中，开发者将程序分解成离散功能块(discrete chunks of functionality)，并称之为模块。每个模块具有比完整程序更小的接触面，使得校验、调试、测试轻而易举。精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。</blockquote><p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">模块应该是职责单一、相互独立、低耦合的、高度内聚且可替换的离散功能块。<h2 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 12px;font-size: 20px;border-bottom: 1px solid rgb(236, 236, 236);font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">模块化的概念</h2><blockquote style="box-sizing: border-box;color: rgb(102, 102, 102);padding: 1px 23px;margin-top: 22px;margin-bottom: 22px;border-left-width: 4px;border-left-color: rgb(203, 203, 203);background-color: rgb(248, 248, 248);font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;">模块化是一种处理复杂系统分解成为更好的可管理模块的方式，它可以把系统代码划分为一系列职责单一，高度解耦且可替换的模块，系统中某一部分的变化将如何影响其它部分就会变得显而易见，系统的可维护性更加简单易得。</blockquote><p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">模块化是一种分治的思想，通过分解复杂系统为独立的模块实现细粒度的精细控制，对于复杂系统的维护和管理十分有益。模块化也是组件化的基石，是构成现在色彩斑斓的前端世界的前提条件。<h2 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 12px;font-size: 20px;border-bottom: 1px solid rgb(236, 236, 236);font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">为什么需要模块化</h2><p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">前端开发和其他开发工作的主要区别，首先是前端是基于多语言、多层次的编码和组织工作，其次前端产品的交付是基于浏览器，这些资源是通过增量加载的方式运行到浏览器端，如何在开发环境组织好这些碎片化的代码和资源，并且保证他们在浏览器端快速、优雅的加载和更新，就需要一个模块化系统。<h2 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 12px;font-size: 20px;border-bottom: 1px solid rgb(236, 236, 236);font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">模块化的好处</h2><ol style="padding-left: 28px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);" class="list-paddingleft-2"><li style="box-sizing: border-box;list-style: inherit;padding-left: 6px;">可维护性。 因为模块是独立的，一个设计良好的模块会让外面的代码对自己的依赖越少越好，这样自己就可以独立去更新和改进。</li><li style="box-sizing: border-box;list-style: inherit;padding-left: 6px;">命名空间。 在 JavaScript 里面，如果一个变量在最顶级的函数之外声明，它就直接变成全局可用。因此，常常不小心出现命名冲突的情况。使用模块化开发来封装变量，可以避免污染全局环境。</li><li style="box-sizing: border-box;list-style: inherit;padding-left: 6px;">重用代码。 我们有时候会喜欢从之前写过的项目中拷贝代码到新的项目，这没有问题，但是更好的方法是，通过模块引用的方式，来避免重复的代码库。我们可以在更新了模块之后，让引用了该模块的所有项目都同步更新，还能指定版本号，避免 API 变更带来的麻烦。</li></ol><h2 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 12px;font-size: 20px;border-bottom: 1px solid rgb(236, 236, 236);font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">模块化简史</h2><h3 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;font-size: 18px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">1. 最简单粗暴的方式</h3><pre style=" box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 16px;overflow: auto; line-height: 1.75;background: rgb(248, 248, 248);text-align: start; "><code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 12px;word-break: normal;border-radius: 2px;overflow-x: auto;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;padding: 15px 12px;display: block;">function fn1(){ // ... } function fn2(){ // ... } </code></pre><p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">通过 script 标签引入文件，调用相关的函数。这样需要手动去管理依赖顺序，容易造成命名冲突，污染全局，随着项目的复杂度增加维护成本也越来越高。<h3 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;font-size: 18px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">2. 用对象来模拟命名空间</h3><pre style=" box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 16px;overflow: auto; line-height: 1.75;background: rgb(248, 248, 248);text-align: start; "><code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 12px;word-break: normal;border-radius: 2px;overflow-x: auto;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;padding: 15px 12px;display: block;">var output = { _count: 0, fn1: function(){ // ... } } </code></pre><p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">这样可以解决上面的全局污染的问题，有那么点命名空间的意思，但是随着项目复杂度增加需要越来越多的这样的对象需要维护，不说别的，取名字都是个问题。最关键的还是内部的属性还是可以被直接访问和修改。<h3 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;font-size: 18px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">3. 闭包</h3><pre style=" box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 16px;overflow: auto; line-height: 1.75;background: rgb(248, 248, 248);text-align: start; "><code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 12px;word-break: normal;border-radius: 2px;overflow-x: auto;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;padding: 15px 12px;display: block;">var module = (function(){ var _count = 0; var fn1 = function (){ // ... } var fn2 = function fn2(){ // ... } return { fn1: fn1, fn2: fn2 } })() module.fn1(); module._count; // undefined </code></pre><p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">这样就拥有独立的词法作用域，内存中只会存在一份 copy。这不仅避免了外界访问此 <code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">IIFE</code> 中的变量，而且又不会污染全局作用域，通过 <code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">return</code> 暴露出公共接口供外界调用。这其实就是现代模块化实现的基础。<h3 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;font-size: 18px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">4. 更多</h3><p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">还有基于闭包实现的松耦合拓展、紧耦合拓展、继承、子模块、跨文件共享私有对象、基于 new 构造的各种方式，这种方式在现在看来都不再优雅。<pre style=" box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 16px;overflow: auto; line-height: 1.75;background: rgb(248, 248, 248);text-align: start; "><code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 12px;word-break: normal;border-radius: 2px;overflow-x: auto;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;padding: 15px 12px;display: block;">// 松耦合拓展 // 这种方式使得可以在不同的文件中以相同结构共同实现一个功能块，且不用考虑在引入这些文件时候的顺序问题。 // 缺点是没办法重写你的一些属性或者函数，也不能在初始化的时候就是用module的属性。 var module = (function(my){ // ... return my })(module || {}) // 紧耦合拓展（没有传默认参数） // 加载顺序不再自由，但是可以重载 var module = (function(my){ var old = my.someOldFunc my.someOldFunc = function(){ // 重载方法，依然可通过old调用旧的方法... } return my })(module) </code></pre><h2 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 12px;font-size: 20px;border-bottom: 1px solid rgb(236, 236, 236);font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">实现模块化的方案规范总览</h2><p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的<code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">require</code>、Python 的<code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">import</code>，甚至就连 CSS 都有<code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">@import</code>，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。<p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。<p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。<p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">目前实现模块化的规范主要有：<ul style="padding-left: 28px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);" class="list-paddingleft-2"><li style="box-sizing: border-box;list-style: inherit;">CommonJS</li><li style="box-sizing: border-box;list-style: inherit;">CMD</li><li style="box-sizing: border-box;list-style: inherit;">AMD</li><li style="box-sizing: border-box;list-style: inherit;">ES6模块</li></ul><h2 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 12px;font-size: 20px;border-bottom: 1px solid rgb(236, 236, 236);font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">CommonJS（）</h2><p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">CommonJS 是以在浏览器环境之外构建 JavaScript 生态系统为目标而产生的项目，比如在服务器和桌面环境中。<p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">采用同步加载模块的方式，也就是说只有加载完成，才能执行后面的操作。CommonJS 代表：Node 应用中的模块，通俗的说就是你用 npm 安装的模块。<p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">它使用 require 引用和加载模块，exports 定义和导出模块，module 标识模块。使用 require 时需要去读取并执行该文件，然后返回 exports 导出的内容。<pre style=" box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 16px;overflow: auto; line-height: 1.75;background: rgb(248, 248, 248);text-align: start; "><code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 12px;word-break: normal;border-radius: 2px;overflow-x: auto;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;padding: 15px 12px;display: block;">//定义模块 math.js var random=Math.random()*10; function printRandom(){ console.log(random) } function printIntRandom(){ console.log(Math.floor(random)) } //模块输出 module.exports={ printRandom:printRandom, printIntRandom:printIntRandom } //加载模块 math.js var math=require('math') //调用模块提供的方法 math.printIntRandom() math.printRandom() </code></pre><h3 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;font-size: 18px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">CommonJS主要用于服务端的模块化，不适用于前端模块化的原因在于：</h3><ul style="padding-left: 28px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);" class="list-paddingleft-2"><li style="box-sizing: border-box;list-style: inherit;">服务端加载一个模块，直接就从硬盘或者内存中读取了，消耗时间可以忽略不计</li><li style="box-sizing: border-box;list-style: inherit;">浏览器需要从服务端下载这个文件，所以说如果用CommonJS的require方式加载模块，需要等代码模块下载完毕，并运行之后才能得到所需要的API。</li><li style="box-sizing: border-box;list-style: inherit;">如果我们在某个代码模块里使用CommonJS的方法require了一个模块，而这个模块需要通过http请求从服务器去取，如果网速很慢，而CommonJS又是同步的，所以将阻塞后面代码的执行，从而阻塞浏览器渲染页面，使得页面出现假死状态。</li></ul><h3 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;font-size: 18px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">CommonJS在浏览器端实现的步骤：</h3><h4 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 5px;font-size: 20px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">1. 创建项目结构</h4><pre style=" box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 16px;overflow: auto; line-height: 1.75;background: rgb(248, 248, 248);text-align: start; "><code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 12px;word-break: normal;border-radius: 2px;overflow-x: auto;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;padding: 15px 12px;display: block;">|-js |-dist //打包生成文件的目录 |-src //源码所在的目录 |-module1.js |-module2.js |-module3.js |-app.js //应用主源文件 |-index.html //运行于浏览器上 |-package.json { "name": "browserify-test", "version": "1.0.0" } </code></pre><h4 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 5px;font-size: 20px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">2. 下载browserify</h4><ul style="padding-left: 28px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);" class="list-paddingleft-2"><li style="box-sizing: border-box;list-style: inherit;">全局: npm install browserify -g</li><li style="box-sizing: border-box;list-style: inherit;">局部: npm install browserify --save-dev</li></ul><h4 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 5px;font-size: 20px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">3. 定义模块代码(同服务器端)</h4><p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">注意：<code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">index.html</code>文件要运行在浏览器上，需要借助browserify将<code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">app.js</code>文件打包编译，如果直接在<code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">index.html</code>引入<code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">app.js</code>就会报错！<h4 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 5px;font-size: 20px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">4. 打包处理js</h4><p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">根目录下运行<code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">browserify js/src/app.js -o js/dist/bundle.js</code><h4 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 5px;font-size: 20px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">5. 页面使用引入</h4><p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">在index.html文件中引入<code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;"><script type="text/javascript" src="js/dist/bundle.js"></script></code><h2 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 12px;font-size: 20px;border-bottom: 1px solid rgb(236, 236, 236);font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">AMD（Asynchronous Module Definition）</h2><p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">异步模块定义，所谓异步是指模块和模块的依赖可以被异步加载，他们的加载不会影响它后面语句的运行。有效避免了采用同步加载方式中导致的页面假死现象。AMD代表：RequireJS。<p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">AMD一开始是CommonJS规范中的一个草案，全称是Asynchronous Module Definition，即异步模块加载机制。后来由该草案的作者以RequireJS实现了AMD规范，所以一般说AMD也是指RequireJS。<p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">RequireJS是一个工具库，主要用于客户端的模块管理。它的模块管理遵守AMD规范，RequireJS的基本思想是，通过define方法，将代码定义为模块；通过require方法，实现代码的模块加载。<p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">它主要有两个接口：define 和 require。define 是模块开发者关注的方法，而 require 则是模块使用者关注的方法。<h3 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;font-size: 18px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">define() 函数：</h3><pre style=" box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 16px;overflow: auto; line-height: 1.75;background: rgb(248, 248, 248);text-align: start; "><code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 12px;word-break: normal;border-radius: 2px;overflow-x: auto;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;padding: 15px 12px;display: block;">define(id?, dependencies?, factory); //id ：可选参数，它指的是模块的名字。 //dependencies：可选参数，定义中模块所依赖模块的数组。 //factory：模块初始化要执行的函数或对象 </code></pre><p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">需要注意的是，dependencies有多少个元素，factory就有多少个传参，位置一一对应。使用栗子：<pre style=" box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 16px;overflow: auto; line-height: 1.75;background: rgb(248, 248, 248);text-align: start; "><code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 12px;word-break: normal;border-radius: 2px;overflow-x: auto;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;padding: 15px 12px;display: block;">define("alpha", ["require", "exports", "beta"], function (require, exports, beta) { exports.verb = function() { return beta.verb(); //Or: //return require("beta").verb(); } }); </code></pre><h3 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;font-size: 18px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">require() 函数</h3><pre style=" box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 16px;overflow: auto; line-height: 1.75;background: rgb(248, 248, 248);text-align: start; "><code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 12px;word-break: normal;border-radius: 2px;overflow-x: auto;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;padding: 15px 12px;display: block;">require([module], callback); //module：一个数组，里面的成员就是要加载的模块. //callback：模块加载成功之后的回调函数。 </code></pre><p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">需要注意的是，module 有多少个元素，callback 就有多少个传参，位置一一对应。<pre style=" box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 16px;overflow: auto; line-height: 1.75;background: rgb(248, 248, 248);text-align: start; "><code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 12px;word-break: normal;border-radius: 2px;overflow-x: auto;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;padding: 15px 12px;display: block;">require(["a","b","c"],function(a,b,c){ //code here }); </code></pre><h3 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;font-size: 18px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">AMD的优缺点</h3><p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">AMD 运行时核心思想是「Early Executing」，也就是提前执行依赖 AMD 的这个特性有好有坏：<ul style="padding-left: 28px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);" class="list-paddingleft-2"><li style="box-sizing: border-box;list-style: inherit;">首先，尽早执行依赖可以尽早发现错误。　　</li><li style="box-sizing: border-box;list-style: inherit;">另外，尽早执行依赖通常可以带来更好的用户体验，也容易产生浪费。</li><li style="box-sizing: border-box;list-style: inherit;">引用AMD的Javscript库：目前，主要有两个Javascript库实现了AMD规范：require.js和curl.js</li><li style="box-sizing: border-box;list-style: inherit;">在浏览器环境中异步加载模块；并行加载多个模块；</li><li style="box-sizing: border-box;list-style: inherit;">开发成本高，代码的阅读和书写比较困难，模块定义方式的语义不顺畅；不符合通用的模块化思维方式，是一种妥协的实现。</li></ul><h3 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;font-size: 18px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">AMD在浏览器端的实现步骤</h3><h4 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 5px;font-size: 20px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">1. 下载require.js, 并引入</h4><ul style="padding-left: 28px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);" class="list-paddingleft-2"><li style="box-sizing: border-box;list-style: inherit;">官网: <code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">http://www.requirejs.cn/</code></li><li style="box-sizing: border-box;list-style: inherit;">github : <code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">https://github.com/requirejs/requirejs</code></li></ul><p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">然后将require.js导入项目: js/libs/require.js<h4 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 5px;font-size: 20px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">2. 创建项目结构</h4><pre style=" box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 16px;overflow: auto; line-height: 1.75;background: rgb(248, 248, 248);text-align: start; "><code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 12px;word-break: normal;border-radius: 2px;overflow-x: auto;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;padding: 15px 12px;display: block;">|-js |-libs |-require.js |-modules |-alerter.js |-dataService.js |-main.js |-index.html </code></pre><h4 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 5px;font-size: 20px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">3. 定义require.js的模块</h4><pre style=" box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 16px;overflow: auto; line-height: 1.75;background: rgb(248, 248, 248);text-align: start; "><code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 12px;word-break: normal;border-radius: 2px;overflow-x: auto;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;padding: 15px 12px;display: block;">// dataService.js文件 // 定义没有依赖的模块 define(function() { let msg = 'www.baidu.com' function getMsg() { return msg.toUpperCase() } return { getMsg } // 暴露模块 }); //alerter.js文件 // 定义有依赖的模块 define(['dataService'], function(dataService) { let name = 'Tom' function showMsg() { alert(dataService.getMsg() + ', ' + name) } // 暴露模块 return { showMsg } }); // main.js文件 (function() { require.config({ baseUrl: 'js/', //基本路径出发点在根目录下 paths: { //映射: 模块标识名: 路径 alerter: './modules/alerter', //此处不能写成alerter.js,会报错 dataService: './modules/dataService' } }); require(['alerter'], function(alerter) { alerter.showMsg() }); })(); // index.html文件 <!DOCTYPE html> <html> <head> <title>Modular Demo</title> </head> <body>  <script data-main="js/main" src="js/libs/require.js"></script> </body> </html> </code></pre><h4 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 5px;font-size: 20px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">4. 页面引入require.js模块:</h4><p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">在index.html引入 <code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;"><script data-main="js/main" src="js/libs/require.js"></script></code><p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">此外在项目中如何引入第三方库？只需在上面代码的基础稍作修改：<pre style=" box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 16px;overflow: auto; line-height: 1.75;background: rgb(248, 248, 248);text-align: start; "><code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 12px;word-break: normal;border-radius: 2px;overflow-x: auto;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;padding: 15px 12px;display: block;">// alerter.js文件 define(['dataService', 'jquery'], function(dataService, $) { let name = 'Tom' function showMsg() { alert(dataService.getMsg() + ', ' + name) } $('body').css('background', 'green') // 暴露模块 return { showMsg } }); // main.js文件 (function() { require.config({ baseUrl: 'js/', //基本路径出发点在根目录下 paths: { //自定义模块 alerter: './modules/alerter', //此处不能写成alerter.js,会报错 dataService: './modules/dataService', // 第三方库模块 jquery: './libs/jquery-1.10.1' //注意：写成jQuery会报错 } }) require(['alerter'], function(alerter) { alerter.showMsg() }) })() </code></pre><p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">上例是在alerter.js文件中引入jQuery第三方库，main.js文件也要有相应的路径配置。 小结：通过两者的比较，可以得出AMD模块定义的方法非常清晰，不会污染全局环境，能够清楚地显示依赖关系。AMD模式可以用于浏览器环境，并且允许非同步加载模块，也可以根据需要动态加载模块。<h2 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 12px;font-size: 20px;border-bottom: 1px solid rgb(236, 236, 236);font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">UMD规范</h2><h2 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 12px;font-size: 20px;border-bottom: 1px solid rgb(236, 236, 236);font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">CMD（Common Module Definition）</h2><p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">CMD是SeaJS在推广过程中生产的对模块定义的规范，在Web浏览器端的模块加载器中，SeaJS与RequireJS并称，SeaJS作者为阿里的玉伯。<p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">CMD规范专门用于浏览器端，模块的加载是异步的，模块使用时才会加载执行。CMD规范整合了CommonJS和AMD规范的特点。在 Sea.js 中，所有 JavaScript 模块都遵循 CMD模块定义规范。<h3 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;font-size: 18px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">CMD语法</h3><h4 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 5px;font-size: 20px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">定义暴露模块：</h4><pre style=" box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 16px;overflow: auto; line-height: 1.75;background: rgb(248, 248, 248);text-align: start; "><code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 12px;word-break: normal;border-radius: 2px;overflow-x: auto;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;padding: 15px 12px;display: block;">//定义没有依赖的模块 define(function(require, exports, module){ exports.xxx = value module.exports = value }) //定义有依赖的模块 define(function(require, exports, module){ //引入依赖模块(同步) var module2 = require('./module2') //引入依赖模块(异步) require.async('./module3', function (m3) { }) //暴露模块 exports.xxx = value }) </code></pre><h4 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 5px;font-size: 20px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">引入使用模块：</h4><pre style=" box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 16px;overflow: auto; line-height: 1.75;background: rgb(248, 248, 248);text-align: start; "><code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 12px;word-break: normal;border-radius: 2px;overflow-x: auto;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;padding: 15px 12px;display: block;">define(function (require) { var m1 = require('./module1') var m4 = require('./module4') m1.show() m4.show() }) </code></pre><h3 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;font-size: 18px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">CMD的优缺点</h3><ul style="padding-left: 28px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);" class="list-paddingleft-2"><li style="box-sizing: border-box;list-style: inherit;">优点：依赖就近，延迟执行可以很容易在 Node.js 中运行；</li><li style="box-sizing: border-box;list-style: inherit;">缺点：依赖 SPM 打包，模块的加载逻辑偏重；</li></ul><h3 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;font-size: 18px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">sea.js使用步骤</h3><h4 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 5px;font-size: 20px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">1. 下载sea.js, 并引入</h4><ul style="padding-left: 28px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);" class="list-paddingleft-2"><li style="box-sizing: border-box;list-style: inherit;">官网: seajs.org/</li><li style="box-sizing: border-box;list-style: inherit;">github : github.com/seajs/seajs</li></ul><p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">然后将sea.js导入项目: js/libs/sea.js<h4 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 5px;font-size: 20px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">2. 创建项目结构</h4><pre style=" box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 16px;overflow: auto; line-height: 1.75;background: rgb(248, 248, 248);text-align: start; "><code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 12px;word-break: normal;border-radius: 2px;overflow-x: auto;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;padding: 15px 12px;display: block;">|-js |-libs |-sea.js |-modules |-module1.js |-module2.js |-module3.js |-module4.js |-main.js |-index.html </code></pre><h4 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 5px;font-size: 20px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">3. 定义sea.js的模块代码</h4><pre style=" box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 16px;overflow: auto; line-height: 1.75;background: rgb(248, 248, 248);text-align: start; "><code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 12px;word-break: normal;border-radius: 2px;overflow-x: auto;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;padding: 15px 12px;display: block;">// module1.js文件 define(function (require, exports, module) { //内部变量数据 var data = 'atguigu.com' //内部函数 function show() { console.log('module1 show() ' + data) } //向外暴露 exports.show = show }); // module2.js文件 define(function (require, exports, module) { module.exports = { msg: 'I Will Back' } }); // module3.js文件 define(function(require, exports, module) { const API_KEY = 'abc123' exports.API_KEY = API_KEY }); // module4.js文件 define(function (require, exports, module) { //引入依赖模块(同步) var module2 = require('./module2') function show() { console.log('module4 show() ' + module2.msg) } exports.show = show //引入依赖模块(异步) require.async('./module3', function (m3) { console.log('异步引入依赖模块3 ' + m3.API_KEY) }) }); // main.js文件 define(function (require) { var m1 = require('./module1') var m4 = require('./module4') m1.show() m4.show() }) </code></pre><h4 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 5px;font-size: 20px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">4. 在index.html中引入</h4><pre style=" box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 16px;overflow: auto; line-height: 1.75;background: rgb(248, 248, 248);text-align: start; "><code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 12px;word-break: normal;border-radius: 2px;overflow-x: auto;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;padding: 15px 12px;display: block;"><script type="text/javascript" src="js/libs/sea.js"></script> <script type="text/javascript"> seajs.use('./js/modules/main') </script> </code></pre><h2 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 12px;font-size: 20px;border-bottom: 1px solid rgb(236, 236, 236);font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">ES6模块化（==重点介绍==）</h2><p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">ES6模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。所以说ES6是编译时加载，不同于CommonJS的运行时加载(实际加载的是一整个对象)，ES6模块不是对象，而是通过export命令显式指定输出的代码，输入时也采用静态命令的形式。<p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">ES6 的模块自动采用严格模式，不管你有没有在模块头部加上<code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">"use strict";</code>。<p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">严格模式主要有以下限制。<ul style="padding-left: 28px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);" class="list-paddingleft-2"><li style="box-sizing: border-box;list-style: inherit;">变量必须声明后再使用</li><li style="box-sizing: border-box;list-style: inherit;">函数的参数不能有同名属性，否则报错</li><li style="box-sizing: border-box;list-style: inherit;">不能使用<code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">with</code>语句</li><li style="box-sizing: border-box;list-style: inherit;">不能对只读属性赋值，否则报错</li><li style="box-sizing: border-box;list-style: inherit;">不能使用前缀 0 表示八进制数，否则报错</li><li style="box-sizing: border-box;list-style: inherit;">不能删除不可删除的属性，否则报错</li><li style="box-sizing: border-box;list-style: inherit;">不能删除变量<code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">delete prop</code>，会报错，只能删除属性<code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">delete global[prop]</code></li><li style="box-sizing: border-box;list-style: inherit;"><code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">eval</code>不会在它的外层作用域引入变量</li><li style="box-sizing: border-box;list-style: inherit;"><code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">eval</code>和<code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">arguments</code>不能被重新赋值</li><li style="box-sizing: border-box;list-style: inherit;"><code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">arguments</code>不会自动反映函数参数的变化</li><li style="box-sizing: border-box;list-style: inherit;">不能使用<code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">arguments.callee</code></li><li style="box-sizing: border-box;list-style: inherit;">不能使用<code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">arguments.caller</code></li><li style="box-sizing: border-box;list-style: inherit;">禁止<code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">this</code>指向全局对象</li><li style="box-sizing: border-box;list-style: inherit;">不能使用<code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">fn.caller</code>和<code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">fn.arguments</code>获取函数调用的堆栈</li><li style="box-sizing: border-box;list-style: inherit;">增加了保留字（比如<code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">protected</code>、<code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">static</code>和<code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">interface</code>）</li></ul><p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">上面这些限制，模块都必须遵守。由于严格模式是 ES5 引入的，不属于 ES6，所以请参阅相关 ES5 书籍，本书不再详细介绍了。<p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">其中，尤其需要注意<code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">this</code>的限制。ES6 模块之中，顶层的<code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">this</code>指向<code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">undefined</code>，即不应该在顶层代码使用<code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">this</code>。<h3 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;font-size: 18px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">语法</h3><p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。<h4 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 5px;font-size: 20px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">export</h4><p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量。下面是一个 JS 文件，里面使用export命令输出变量。<pre style=" box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 16px;overflow: auto; line-height: 1.75;background: rgb(248, 248, 248);text-align: start; "><code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 12px;word-break: normal;border-radius: 2px;overflow-x: auto;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;padding: 15px 12px;display: block;">function cUl(){ let ulEle = document.createElement("ul"); for(let i = 0; i < 5; i++){ let liEle = document.createElement("li"); liEle.innerHTML = "无序列表" + i; ulEle.appendChild(liEle); } return ulEle; } let ul = cUl(); export {ul}; </code></pre><h4 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;padding-bottom: 5px;font-size: 20px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">import</h4><p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">使用<code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">export</code>命令定义了模块的对外接口以后，其他 JS 文件就可以通过<code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 0.87em;word-break: break-word;border-radius: 2px;overflow-x: auto;background-color: rgb(255, 245, 245);color: rgb(255, 80, 44);padding: 0.065em 0.4em;">import</code>命令加载这个模块。<pre style=" box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 16px;overflow: auto; line-height: 1.75;background: rgb(248, 248, 248);text-align: start; "><code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 12px;word-break: normal;border-radius: 2px;overflow-x: auto;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;padding: 15px 12px;display: block;">import {table} from "../test/test_table.js"; import {div} from "../test/test_div.js" ; import {ul} from "../test/test_ul.js" ; export {table, div, ul}; </code></pre><h3 style="box-sizing: border-box;line-height: 1.5;margin-top: 35px;margin-bottom: 10px;font-size: 18px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">ES6 模块与 CommonJS 模块的差异</h3><p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">它们有两个重大差异：<p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">1. CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用。<p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">2. CommonJS 模块是运行时加载，ES6 模块是编译时输出接口。<p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">第二个差异是因为 CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。<p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">下面重点解释第一个差异，我们还是举上面那个CommonJS模块的加载机制例子:<pre style=" box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 16px;overflow: auto; line-height: 1.75;background: rgb(248, 248, 248);text-align: start; "><code style="box-sizing: border-box;font-family: Menlo, Monaco, Consolas, "Courier New", monospace;font-size: 12px;word-break: normal;border-radius: 2px;overflow-x: auto;background-image: initial;background-position: initial;background-size: initial;background-repeat: initial;background-attachment: initial;background-origin: initial;background-clip: initial;padding: 15px 12px;display: block;">// lib.js export let counter = 3; export function incCounter() { counter++; } // main.js import { counter, incCounter } from './lib'; console.log(counter); // 3 incCounter(); console.log(counter); // 4 </code></pre><p style="box-sizing: border-box;line-height: inherit;margin-top: 22px;margin-bottom: 22px;font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;background-color: rgb(255, 255, 255);">ES6 模块的运行机制与 CommonJS 不一样。ES6 模块是动态引用，并且不会缓存值，模块里面的变量绑定其所在的模块。<blockquote style="box-sizing: border-box;color: rgb(102, 102, 102);padding: 1px 23px;margin-top: 22px;margin-bottom: 22px;border-left-width: 4px;border-left-color: rgb(203, 203, 203);background-color: rgb(248, 248, 248);font-family: -apple-system, "system-ui", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";font-size: 16px;text-align: start;white-space: normal;">学习有趣的知识，结识有趣的朋友，塑造有趣的灵魂！大家好，我是〖编程三昧〗的作者 隐逸王，我的公众号是『编程三昧』，欢迎关注，希望大家多多指教！</blockquote></div>