从module的简单实现到模块化

前言

一直感觉模块化是一个很神秘的概念，因而也很感兴趣，有幸了解到了模块化的历史，尝试着了解了一下模块化的实现，发现了一个很有意思的东西，不知道为什么，会觉得很有成就感，记录一下。

模块化的实现

简单模拟一下CMD的module实现，在module.js中做以下处理

//module.js
exports.word = 'hello'
module.exports = function () {
  console.log(exports.word)
}
复制代码

然后在test.js界面引入该模块

//test.js
const file = require('./module.js')
file() // hello
console.log(file.word) //undefined
复制代码

不考虑为什么会有这样的结果，上面的这部分是通过require引用模块的常见写法。下面的超简化版本代码实现了超简化的require方法（下面的runner方法）

//require.js
const fs = require('fs')
const path = require('path')

function runner(file) {
  const code = fs.readFileSync(path.join(__dirname, file), 'utf-8')
  const module = { exports: {} }
  const fn = new Function('module', 'exports', code)
  fn(module, module.exports)
  return module.exports
}
复制代码

这里的fn整理出来就是下面这一段代码

function _fn(module, exports) {
  exports.word = 'hello'
  module.exports = function() {
    console.log(exports.word)
  }
}
复制代码

所以在执行fn(module, module.exports)时，就是对上面声明的const module = { exports: {} }进行赋值。当执行runner方法时，其实就是获取module.exports的值。而runner方法做的事，就是获取文件中的内容，识别module.exports，并把该值抛出来。转到require，其实主要做的也就是这部分工作。module和 export也就成了关键词，用来在读取模块的时候识别的标识。

runner方法已经实现了，现在来看一下为什么运行后是这样的结果。

export 与 module.export

通过上面runner的实现，也可以看出，其实exports和module.exports最后被引用后其实是一个。最后暴露出来的都是module对象，而如果一个页面中同时存在exports和module.exports，最后一个引用都会覆盖掉掉前面所有的exports引用，所以这也是为什么上面的file()能执行成功，而file.word为undefined，因为前者覆盖了后者。file已经被替换成了下面这个方法

function() {
    console.log(exports.word)
}
复制代码

模块化

那么什么叫模块化呢？我的理解有3点：

1. 引用的时候能按需调用
2. 外部调用无法修改内部参数
3. 没有全局变量的污染，方法名不冲突

因为看了模块化的历史，了解到模块化最最原始是从匿名闭包衍生出来的，再看看现在的module的实现，其实也是一个闭包。虽然之前看了很多闭包的概念，但因为使用上的局限性，一直把闭包误解为只有return出去的才是闭包。比如下面这段代码

function fo(){
    var a = 'aaa';
    return function(){
        console.log(a)
    }
}
var bar = fo();
复制代码

这次看到这个是真的有刷新我的认知，原来下面这样的也是闭包

var b = {
    a: {}
}
function fo(obj){
    let a = 'aaa';
    obj.a = function(){
        console.log(a)
    }
}
fo(b.a);
复制代码

把上面这个再扩展一下就成了下面这段代码，一段类似_fn的代码

var b = {
    a: {}
}
function fo(b, a){
    a = '111';
    b.a = function(){
        console.log(a)
    }
}
fo(b, b.a);
复制代码

重复一波闭包的概念：能够读取其他函数内部变量的函数。

所以这也是为什么上面的file()的结果是hello,这也是requireJS的模块化里面我暂时接触到的最有意思的地方。下次瞅一瞅es6的模块化

相关知识

模块化的历史：huangxuan.me/js-module-7…