Javascript模块化和Node模块化

1、什么是模块化

• 到底什么是模块化呢？
  • 事实上模块化开发最终的目的是将程序划分成一个个小结构
  • 这个结构编写属于自己的逻辑代码，有自己的作用域，不会影响别人的结构；
  • 该结构可以将自己希望暴露的变量，函数对象等导出给其他结构使用。
  • 也可以通过某种方式，导入另外结构中的变量、函数、对象等；
• 上面说提到的结构，就模块；按照这种结构划分开发程序的过程，就是模块化开发的过程

• 无论你多么喜欢JavaScript，以及它现在发展的有多好，我们都需要承认在 Brendan Eich 用了10天写出JavaScript的时候，
  它都有很多的缺陷：
  • 比如var定义的变量作用域问题；
  • 比如JavaScript的面向对象并不能像常规面向对象语言一样使用class；
  • 比如JavaScript没有模块化的问题；

2、没有模块化带来很多的问题

• 早期没有模块化带来了很多的问题：比如命名冲突的问题

  • 命名冲突

• 当然，我们有办法可以解决上面的问题：立即函数调用表达式（IIFE）

      // 立即执行函数  
      (function() {
          
      })();
  

  ---

• 但是，我们其实带来了新的问题：

  • 第一，我必须记得每一个模块中返回对象的命名，才能在其他模块使用过程中正确的使用；
  • 第二，代码写起来混乱不堪，每个文件中的代码都需要包裹在一个匿名函数中来编写；
  • 第三，在没有合适的规范情况下，每个人、每个公司都可能会任意命名、甚至出现模块名称相同的情况；

• 所以，我们会发现，虽然实现了模块化，但是我们的实现过于简单，并且是没有规范的。

  • 我们需要制定一定的规范来约束每个人都按照这个规范去编写模块化的代码；
  • 这个规范中应该包括核心功能：模块本身可以导出暴露的属性，模块又可以导入自己需要的属性；
  • JavaScript社区为了解决上面的问题，涌现出一系列好用的规范，接下来我们就学习具有代表性的一些规范。

3、CommonJS和Node

• 我们需要知道CommonJS是一个规范，最初提出来是在浏览器以外的地方使用，并且当时被命名为ServerJS，后来为了
  体现它的广泛性，修改为CommonJS，平时我们也会简称为CJS。
  • Node是CommonJS在服务器端一个具有代表性的实现；
  • Browserify是CommonJS在浏览器中的一种实现；
  • webpack打包工具具备对CommonJS的支持和转换；
• 所以，Node中对CommonJS进行了支持和实现，让我们在开发node的过程中可以方便的进行模块化开发：
  • 在Node中每一个js文件都是一个单独的模块；
  • 这个模块中包括CommonJS规范的核心变量：<font color=red>exports、module.exports、require</font>；
  • 我们可以使用这些变量来方便的进行模块化开发；
• 前面我们提到过模块化的核心是导出和导入，Node中对其进行了实现：
  • exports和module.exports可以负责对模块中的内容进行导出；
  • require函数可以帮助我们导入其他模块（自定义模块、系统模块、第三方库模块）中的内容；

4、案例设定

• 我们来看一下两个文件：

  
  两个文件之间互相引用

5、exports导出

• 注意：exports是一个对象，我们可以在这个对象中添加很多个属性，添加的属性会导出；

  • exports导出一个对象，导出的内容均为exports的属性

• 另外一个文件中可以导入：

  • 引入

• 上面这行完成了什么操作呢？理解下面这句话，Node中的模块化一目了然

  • 意味着main中的bar变量等于exports对象；
  • 也就是require通过各种查找方式，最终找到了exports这个对象；
  • 并且将这个exports对象赋值给了bar变量；
  • bar变量就是exports对象了；

  5.1 理解对象的引用赋值

  • 对象引用赋值

  5.2 画图解析赋值的过程

  • 对象引用指向共同的堆栈

  5.3 它们实际上是一个浅层拷贝

  • 为了进一步论证，bar和exports是同一个对象：
    • 所以，bar对象是exports对象的浅拷贝（引用赋值）；

    • 浅拷贝的本质就是一种引用的赋值而已；

      
      浅层拷贝

6、module.exports又是什么？

• 但是Node中我们经常导出东西的时候，又是通过module.exports导出的：
  • <font color=red>module.exports和exports有什么关系或者区别呢？</font>
• 我们追根溯源，通过维基百科中对CommonJS规范的解析：
  • CommonJS中是没有module.exports的概念的；
  • 但是为了实现模块的导出，Node中使用的是Module的类，每一个模块都是Module的一个实例，也就是
    module；
  • 所以在Node中真正用于导出的其实根本不是exports，而是module.exports；
  • 因为<font color=red>module才是导出的真正实现者</font>；
• 但是，为什么exports也可以导出呢？
  • 这是因为module对象的exports属性是exports对象的一个引用；
  • 在node源码内部做了一个处理，module.exports = exports；
  • 也就是说 module.exports = exports = main中的bar；

  6.1 画图解析赋值的过程

  • 对象引用
  • module.exports赋值成对象，重新开辟一块空间