你对CommonJS规范了解多少？

写在前面

为什么会出现CommonJS规范？

因为JavaScript本身并没有模块的概念，不支持封闭的作用域和依赖管理，传统的文件引入方式又会污染变量，甚至文件引入的先后顺序都会影响整个项目的运行。同时也没有一个相对标准的文件引入规范和包管理系统，这个时候CommonJS规范就出现了。

CommonJS规范的优点有哪些？

  • 首先要说的就是它的封装功能，模块化可以隐藏私有的属性和方法，这样不需要别人在重新造轮子。
  • 第二就是它能够封装作用域，保证了命名空间不会出现命名冲突的问题。
  • 第三nodejs中npm包管理有20万以上的包并且被全球的开发人员不断更新维护，开发效率几何倍增。

模块化的定义

下面就是本文的重头戏部分了，通过手写一个CommonJS规范,更加清晰和认识模块化的含义及如何实现的。另外本文中的示例代码需要在node.js环境中方可正常运行，否则将出现错误。事实上ES6已经出现了模块规范，如果使用ES6的模块规范是无需node.js环境的。因此，需要将commonJS规范和ES6的模块规范区分开来。

1.自执行函数

我们先写一段简单的代码，在node环境下运行，来看看commonJS是如何处理的：

一段非常简单的函数，调用时候传递参数name，将一段字符串返回。但是通过断点调试我们发现在node环境下，node本身自动给sayHello函数加了一层外衣，就是下面的内容：

(function (exports, require, module, __filename, __dirname) {});

我们不难发现，其实这是一个自执行函数，那么为什么要加上这样一段看似多余的代码呐，这就是我们说得CommonJS规范一个好处，它将要执行的函数封装了起来，所有的变量和方法都可以理解为是私有的了，保证了命名空间。

2.文件导出

前面我们已经了解到在node中，每个文件都可以被看成是一个模块，那么node中对于模块的导出，都是使用的相同的方法module.exports。

var str=‘hello World‘;
module.exports=str;

3.文件导入

为了方便的使用模块，我们可以使用require方法对模块进行导入，类似于这样：

var a=require(‘./a.js‘);

值的注意的是：在文件引入的过程中，是否使用相对或者绝对路径，如果a.js前添加./或者../是证明是第三方模块，不写绝对和相对路径为内置模块，例如：fs。

分析commonJS规范源码

我们写一个简单的模块引入，通过断点，分析它的代码，并以此为来完善我们自己的commonJS规范

Module._load

首先我们能看到第一次进入是require方法中，分析代码:

  • assert方法用来进行断言，那么第一行代码的含义就是判断一下这个路径的参数path是否存在，如果不存在就报错
  • 同理第二行代码检查路径参数是不是一个字符串格式，如果不是也报错
  • 第三返回一个函数Module._load,从名字中可以看出这应该是一个加载的方法，此方法传递三个参数，第一个是路径，第二个是this的指向，第三个是一个布尔值，表示为是否为必要的。

Module._resolveFilename

断点继续运行，走到下一个方法Module._resolveFilename，这个方法是用来解析文件名称的，将相对路径解析成绝对路径。

var filename = Module._resolveFilename(request, parent, isMain);

Module._cache

node中会对已经加载过的模块进行缓存，供下次引入时候使用，这个方法就是：Module._cache

var cachedModule = Module._cache[filename];

new modal

没有缓存的时候，node会新建一个模块，用来存放这个正在加载的模块：

var module = new Module(filename, parent);
Module._cache[filename] = module;

tryModuleLoad

然后尝试加载这个模块

tryModuleLoad(module, filename);

Module._extensions

然后继续回到load方法中，执行下面的代码，对扩展名进行完善：

var extension = path.extname(filename) || ‘.js‘;
  if (!Module._extensions[extension]) extension = ‘.js‘;
  Module._extensions[extension](this, filename);

Module.wrap

有了文件名之后就就可以拿到对应的文件内容，下面就对文件内容进行处理，我们称这个方法为文件包裹方法：

var wrapper = Module.wrap(content);

进入这个方法之后你会看到我们熟悉的自执行函数，通过字符串拼接的形式进行包裹。

然后让这个函数执行

手写commonJS规范

初始化

首先得有一个方法或者类实现这样一个规范，然后这个方法接受一个参数path（路径）

let fs = require(‘fs‘);//文件模块，用来读取文件
let path = require(‘path‘);//用来完善文件路径
let vm=require(‘vm‘);//将字符串当作JavaScript执行
function req(path) { 

}
function module() { //模块相关

}

Module._load

第一步加载，传入参数路径，进入到方法中会有一个Module._resolveFilename,用来解析文件名，我们的代码就变成了：

let fs = require(‘fs‘);//文件模块，用来读取文件
let path = require(‘path‘);//用来完善文件路径
let vm=require(‘vm‘);//将字符串当作JavaScript执行
function req(path) {
    module._load(path);//尝试加载模块
}
function module() { //模块相关

}
module._load = function (path) { //
    let fileName=module._resolveFilename(path)//解析文件名
}
module._resolveFilename = function (path) { 

}

在进入这个_resolveFilename方法的时候，传入的参数可能没有后缀，可能是一个相对路径，继续完善module._resolveFilename方法：

module._resolveFilename

我们利用正则表达式来对文件名后缀进行分析，这里只考虑是js文件还是json文件，然后利用path模块完善文件后缀

module._resolveFilename = function (p) {
    if ((/\.js$|\.json$/).test(p)) {
        // 以js或者json结尾的
        return path.resolve(__dirname, p);
    }else{
        // 没有后后缀  自动拼后缀
    }
}

如果没有文件后缀名，我们需要补全后缀名，就调用了Module._extensions

Module._extensions

module._extensions = {
    ‘.js‘:function (module) {},
    ‘.json‘:function (module) {}
  }

module._resolveFilename方法中对_extensions这个对象进行遍历，然后将后缀名加上继续尝试，然后通过fs模块的accessSync方法对拼接好的路径进行判断，代码如下：

Module._resolveFilename = function (p) {
   if((/\.js$|\.json$/).test(p)){
     // 以js或者json结尾的
     return path.resolve(__dirname, p);
   }else{
    // 没有后后缀  自动拼后缀
     let exts = Object.keys(Module._extensions);
     let realPath;
       for (let i = 0; i < exts.length; i++) {
         let temp = path.resolve(__dirname, p + exts[i]);
         try {
           fs.accessSync(temp); // 存在的
           realPath = temp
           break;
         } catch (e) {
         }
       }
       if(!realPath){
        throw new Error(‘module not exists‘);
       }
       return realPath
   }
}

到现在我们已经可以拿到完整的绝对路径和后缀名了，根据上面的分析，我们就要去缓存中查看是否有缓存，如果有，就是用缓存的，如果没有，加入缓存中。

Module._cache

首先去Module._cache这个对象中查找是否有，如果有就直接返回模块中的exports，也就是cache.exports，如果没有，就新创建一个模块。并将模块的绝对路径作为module的id属性

Module._cache = {};
Module._load = function (p) { // 相对路径,可能这个文件没有后缀，尝试加后缀
  let filename = Module._resolveFilename(p); // 获取到绝对路径
  let cache = Module._cache[filename];
  if(cache){ // 第一次没有缓存 不会进来

  }
  let module = new Module(filename); // 没有模块就创建模块
  Module._cache[filename] = module;// 每个模块都有exports对象 {}

  //尝试加载模块
  tryModuleLoad(module);
  return module.exports
}

下面就开始尝试加载这个模块，并将module.exports返回。

tryModuleLoad

通过模块的id我们可以很方便的拿到文件的扩展名，然后利用path.extname方法来获取文件的扩展名，并调用对应扩展名下面的处理方法：

function tryModuleLoad(module){
  let ext = path.extname(module.id);//扩展名
  // 如果扩展名是js,调用js处理器.如果是json,调用json处理器
  Module._extensions[ext](module);
}

完善Module._extensions

如果这个文件是一个json文件。因为读文件返回的是一个字符串，所以要用JSON.parse转换读到的文件，至此对于json文件的引入就全部搞定了，所以要将module.exports赋值，这样外面return才有内容。

如果是一个js文件，用获取到的绝对路径也就是 module的id属性进行文件读取，然后调用Module.wrap对文件内容进行包裹，也就是加在对应的自执行函数，然后执行这个函数。

Module._extensions完善如下：

Module._extensions = {
  ‘.js‘:function (module) {
    let content = fs.readFileSync(module.id, ‘utf8‘);
    let funcStr = Module.wrap(content);
    let fn = vm.runInThisContext(funcStr);
    fn.call(module.exports,module.exports,req,module);
  },
  ‘.json‘:function (module) {
    module.exports = JSON.parse(fs.readFileSync(module.id, ‘utf8‘));
  }
}

Module.wrap

我们用俩个字符串将文件内容进行包裹并返回新的字符串

Module.wrapper = [
  "(function (exports, require, module, __filename, __dirname) {",
  "})"
]
Module.wrap = function (script) {
  return Module.wrapper[0] + script+ Module.wrapper[1];
}

小细节处理

到现在我们的代码已经基本完成了，但是现在出现的问题是每次require的代码都会被执行，我们希望的是有这个模块的时候要直接使用exports中的值，所以代码可以这样完善：

if(cache){ // 第一次没有缓存 不会进来
    return cache.exports;
  }

写在最后

上面的代码很多情况的处理我并没有给出，比如path的处理等等。和真正的commonJS规范代码还是有很多不足的地方，但是我希望通过这样的方式可以加深你对commonJS规范的理解和使用，特此说明。

原文地址：https://www.cnblogs.com/hanqingtao/p/9791239.html

时间： 2024-07-31 14:04:30

你对CommonJS规范了解多少？的相关文章

commonjs 规范

CommonJS规范 1. 概述 Node程序由许多个模块组成,每个模块就是一个文件.Node模块采用了CommonJS规范. 根据CommonJS规范,一个单独的文件就是一个模块.每一个模块都是一个单独的作用域,也就是说,在一个文件定义的变量(还包括函数和类),都是私有的,对其他文件是不可见的. //example.jsvar x = 5;var addX = function(value) {    return value + x;}在上述代码中,变量x和addX, 是当前文件exampl

CommonJS规范(转)

概述 CommonJS是服务器端模块的规范,Node.js采用了这个规范. 根据CommonJS规范,一个单独的文件就是一个模块.加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部的exports对象.下面就是一个简单的模块文件example.js. console.log("evaluating example.js"); var invisible = function () { console.log("invisible"); } e

该如何理解AMD ，CMD，CommonJS规范--javascript模块化加载学习总结

是一篇关于javascript模块化AMD,CMD,CommonJS的学习总结,作为记录也给同样对三种方式有疑问的童鞋们,有不对或者偏差之处,望各位大神指出,不胜感激. 本篇默认读者大概知道require,seajs的用法(AMD,CMD用法),所以没有加入使用语法. 1.为何而生: 这三个规范都是为javascript模块化加载而生的,都是在用到或者预计要用到某些模块时候加载该模块,使得大量的系统巨大的庞杂的代码得以很好的组织和管理.模块化使得我们在使用和管理代码的时候不那么混乱,而且也方便了

node之CommonJS规范

模块加载机制被称为CommonJS规范.在这个规范下,每个.js文件都是一个模块,它们内部各自使用的变量名和函数名都互不冲突,例如,hello.js和main.js都申明了全局变量var s = 'xxx',但互不影响. 一个模块想要对外暴露变量(函数也是变量),可以用module.exports = variable;,一个模块要引用其他模块暴露的变量,用var ref = require('module_name');就拿到了引用模块的变量. 总结: 要在模块中对外输出变量,用: modul

CommonJS规范 by ranyifeng

1,概述 CommonJS是服务器端模块的规范,Node.js采用了这个规范. 根据CommonJS规范,一个单独的文件就是一个模块.加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部的exports对象.下面就是一个简单的模块文件example.js. console.log("evaluating example.js"); var invisible = function () { console.log("invisible"); }

【转】Commonjs规范及Node模块实现

前言: Node在实现中并非完全按照CommonJS规范实现,而是对模块规范进行了一定的取舍,同时也增加了少许自身需要的特性.本文将详细介绍NodeJS的模块实现 引入 nodejs是区别于javascript的,在javascript中的顶层对象是window,而在node中的顶层对象是global [注意]实际上,javascript也存在global对象,只是其并不对外访问,而使用window对象指向global对象而已 在javascript中,通过var a = 100:是可以通过wi

内置模块加载器(commonjs规范)的使用

index9.html <html> <head> <title>模块加载器</title> <script src="jquery-1.7.2.min.js"></script> <script src="groot.js"></script> </head> <body> <div gt-view="myview"&g

AMD、CMD和CommonJS规范（转）

CommonJS规范 CommonJS是在浏览器环境之外构建JavaScript生态系统为目标产生的项目,比如服务器和桌面环境中.CommonJS规范是为了解决JavaScript的作用域问题而定义的模块形式, 可以使每个模块在它自身的命名空间中执行.该规范的主要内容是:模块必须通过  module.exports导出对外的变量或接口,通过require()来导入其他模块的输出到当前模块. 例子: // moduleA.js module.exports = function( value ){

Node.js相关——CommonJS规范

1. CommonJS规范产生背景 在后端,JavaScript的规范远远落后并且有很多缺陷,这使得难以使用JavaScript开发大型应用.比如: 没有模块系统 标准库较少 没有标准接口 缺乏包管理系统 CommonJS规范 的提出,主要是为了弥补JavaScript没有标准的缺陷.CommonJS API将通过定义处理许多常见应用程序需求的API来填补这一空白,最终提供与Python,Ruby和Java一样丰富的标准库.以达到像Python.Ruby和Java那样具备开发大型应用的基础能力,