前端模块化，有这一篇就够了(上)

题记

内容来源

文章内容输出来源：拉勾教育大前端高薪训练营一期

当前阶段的学习心得

我算是一个工作年限比较久的前端了，刚毕业时从事销售工作，后来在2015年想要从事脚踏实地的工作，便选择转行互联网。当时转行时我和我同学选择了不同的道路，她选择参加ios培训而我选择自学。刚入行时因为没有经验，所以拿着月薪1.5K的薪水做着很繁杂的工作，前端、php、测试、产品、需求都ok。但没有一个是我最擅长。忙碌的生活让我逐渐意识到我或许走的不会很长久，我在2017年惊醒便放弃了天津的2K薪资来到了北京。北京公司是个小公司，倒是成长很快但技术方面没有什么提升。在2018年进入目前这家公司之后，因为机缘巧合的原因带了小团队，但我越发恐慌，我好想并不能带给她们什么，也不能带领她们走向某一个方向，当我觉得自己’技’不配位的时候恰巧看到了拉勾的宣传，莫名的缘分让我成为了拉勾教育大前端高薪训练营一期的学员。

成为学员之后，刚开始还蛮焦虑的。早已习惯懒散的生活和规律的生活因为加入了拉勾而变得异常充实和快乐，每次看视频、听直播、看群内分享的时候就可以感知到原来自己太局限，我一个工作5年经验的人竟然还在做初级工程师的工作。以上种种让我很羡慕班里那些工作一年的小伙伴，她们的前途一片光明。虽然我也是。

从加入大前端高薪训练营到现在快3个月了，我对拉勾的课程质量绝对是非常满意了。之前也在其他网站陆续买过一些课程，从我的认知中拉勾是最全面的、最细致的一家。很多工作中我们不曾深入了解的工具、概念、实践，老师都会在课程中带领我们实践一次，真乃实践出真知呀。课程体系划分合理、课程内容充实且全面、老师知识储备超级丰富、讲解够细致，我想一定是经过了很长时间的打磨才会有如此多的好评。

授课的主讲老师是汪磊，我github唯一关注的粉丝（其实说明我太菜了），我这几年的工作经历也算见过一些大场面，但还是被汪老师的博学多识、幽默帅气所吸引。之前还特意关注过汪老师的微博，发现汪老师一直从事互联网教育培训方向，想来他的经验、学识、学习能力之所以如此优秀也是有原因的。持续深耕方可有今天的细致与宽广。

我们的班主任，一个细心且温柔且负责任的美少女，其实很多时候我都要作业要不明天再写吧（原谅我经常想偷懒），但老师常常会按时敲门来督促我们学习。我有想过，如果没人监督没人督促，我可能1个月都无法坚持。我的班主任总是晚上2点睡早晨6-7点起床，或许是我太不给力了。这些都是很细碎的点，但也正因为有她的陪伴、支持、鼓励，我才发现我现在可以逐渐摆脱之前不好的习惯，如果每天不学习我甚至会觉得她能感知到。现在真的变成了每天都要学习、每天都要记笔记的好习惯。

我们的助教老师熊熊老师和小北老师，常常在深夜或很早的时候就会回复我们的问题，每次的作业批改绝对是一丝不苟，我为什么会有这样的感触？因为有一次我的作业漏写了一道题老师还很认真的评价及解答^_。

总体来说，对主讲老师汪磊，心存敬意，因为尊敬也让我更加认真的对待每一节视频、每一次直播。对班主任，心存感恩，希望自己更自律可以让她早点休息。对助教老师心存感激与敬佩，他们对待工作的态度也是我这个职场老人应该学习的。

最后，再来说一下故事开头中我那位女同学的发展之路，在我持续3年拿月薪2K的时候，她早已月薪20K。其实我想说，成长有很多条路，真正走过（浪费）了这几年之后我才发现我在最开始入行的时候应该选择最快捷的那条路。不过现在的我已经在路上了，希望不会太晚。同时也希望各位小伙伴可以找到适合自己的学习方法。

以下这篇博客内容会比较多，建议大家重点关注前言、CommonJs、ES Module即可。后续还会有系列文章，欢迎大家多多捧场~

前言

1.1 模块化是什么？

模块化是一种思想，是一种解决问题的思路。
随着业务的发展我们的系统可能越来越复杂，那我们如何保证在复杂系统中代码可以方便维护、功能可以复用呢？模块化思想可以解决这个问题呀，可以将我们的复杂系统分解为可管理的模块、每个模块完成一个特定的子功能，所有的模块按某种方法组装起来，成为一个整体，完成整个系统所要求的功能。
我们

模块化只是一种思想

1.2 为什么会有模块化？

1.2.1 没有模块化，前端代码会怎样

• 变量和方法不易维护，容易污染全局作用域。如要遵循一定的命名约定才不会产生重复命名
• 我们加载资源的是通过script标签从上至下引入，还要注意引入时的依赖关系和前后顺序，如果先后顺序不对会无法启动项目
• 大型项目资源越加难以维护、多人合作的情况下资源的引入会让人崩溃
  那么既然没有模块化会存在以上问题，我们应该如何解决呢？

1.2.2 模块化的演变

早期在没有工具和规范的情况下对模块化的落地方式：

• 基于文件划分模块：早期的js文件，每个文件都是一个模块，但他们事实上都在全局工作。模块外部可以访问，会导致全局污染，并且会存在命名冲突
• 每个模块只暴露一个全局对象，所有模块成员都挂载到这个全局对象上。缺点：没有私有空间，外部可以修改内部
• 使用立即执行函数表达式IIFE,为模块提供私有空间

以上模块化方式都是通过scrip手动t引入模块。模块的引入与否取决于人也就是不受代码控制，如果我们引入了模块但未使用、使用了但模块被删除等都会对程序产生影响。
如何通过代码自动加载模块？需要一个模块化标准和自动加载模块的基础库

1.3 模块化的实现有哪几种

CommonJs,AMD,CMD,ES Module这四种

CommonJs

首先登场的是commonJS,commonJS是一套规范、它约定实现模块化要遵守的规范，它是nodejs在服务端遵守的规范。

2.1 概述

简单的描述就是：

• 约定每个文件就是一个模块。
• 每个模块都有单独的作用域，文件内的变量、函数、类都是私有的，对其他文件不可见。
• 通过module.exports导出成员，
• 通过require引入模块。

2.2 module对象

每个文件就是一个模块，每个模块都有一个module对象，代表当前模块。它有以下属性：

• module.id 模块的识别符，通常是带有绝对路径的模块文件名。
• module.filename 模块的文件名，带有绝对路径。
• module.loaded 返回一个布尔值&#x