阅读 255

从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的实现,也可以看出,其实exportsmodule.exports最后被引用后其实是一个。最后暴露出来的都是module对象,而如果一个页面中同时存在exportsmodule.exports,最后一个引用都会覆盖掉掉前面所有的exports引用,所以这也是为什么上面的file()能执行成功,而file.wordundefined,因为前者覆盖了后者。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…

关注下面的标签,发现更多相似文章
评论