node并不是一门新的编程语言,他只是javascript的运行时,运行时你可以简单地理解为运行javascript的环境。在大多数情况下我们会在浏览器中去运行javascript,有了node的出现,我们可以在node中去运行javascript,这意味着哪里安装了node或者浏览器,我们就可以在哪里运行javascript
node模块化的实现
目前流行的js模块化规范有CommonJS、AMD、CMD以及ES6的模块系统
- CommonJS 模块是在运行时同步加载。模块的顶层this指向当前模块,它输出的是一个值的拷贝。
- AMD(Asynchronous Module Definition)规范采用异步方式加载模块,模块的加载不影响它后面语句的运行,但是不能按需加载,必须提前加载所需依赖。
- CMD(Common Module Definition)是另一种js模块化方案,它与AMD很类似,不同点在于:AMD推崇依赖前置、提前执行,CMD推崇依赖就近、延迟执行。
- ES6 在语言标准的层面上,实现了模块功能,成为浏览器和服务器通用的模块解决方案,es6模块自动采用严格模式,它输出的是值的引用。
node中是自带模块化机制的,每个文件就是一个单独的模块,并且它遵循的是CommonJS规范。也就是使用require的方式导入模块,通过module.exports的方式导出模块。 node模块的运行机制其实就是在每一个模块外层包裹了一层自执行的匿名函数来实现代码间的作用域隔离。 可能我们在写代码的时候会发现并没有包裹函数,因为他是node自动给我们加上的。 在node全局变量里面是没有window的,那全局变量里是什么?是global 比如我们在node中打印window。
console.log(window);
通过node执行该文件,会发现报错信息如下。
(function (exports, require, module, __filename, __dirname) { console.log(window);
ReferenceError: window is not defined
at Object.<anonymous> (/Users/choice/Desktop/node/main.js:1:75)
at Module._compile (internal/modules/cjs/loader.js:689:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
at Module.load (internal/modules/cjs/loader.js:599:32)
at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
at Function.Module._load (internal/modules/cjs/loader.js:530:3)
at Function.Module.runMain (internal/modules/cjs/loader.js:742:12)
at startup (internal/bootstrap/node.js:279:19)
at bootstrapNodeJSCore (internal/bootstrap/node.js:752:3)
可以看到报错的顶层有一个自执行的匿名函数, 函数中包含exports, require, module, filename, dirname这些我们常用的全局变量。
自执行函数也是前端模块化的实现方案之一,在早期前端没有模块化系统的时代,自执行函数可以很好的解决命名空间的问题. 在模块系统中,每个文件就是一个模块,每个模块外面会自动套一个函数,并且定义了导出方式 module.exports或者exports,同时也定义了导入方式require。
let moduleA = (function() {
module.exports = Promise;
return module.exports;
})();
require加载模块
require依赖node中的fs模块来加载模块文件,fs.readFile读取到的是一个字符串。 在javascrpt中我们可以通过eval或者new Function的方式来将一个字符串转换成js代码来运行。
eval
const name = '张三';
const str = 'const a = 123; console.log(name)';
eval(str); // 张三;
new Function
const b = 3;
const str = 'let a = 1; return a + b';
const fun = new Function('b', str);
console.log(fun(b)); // 4
可以看到eval和Function实例化都可以用来执行javascript字符串,似乎他们都可以来实现require模块加载。不过在node中并没有选用他们来实现模块化,原因也很简单因为他们都有一个致命的问题,就是都容易被不属于他们的变量所影响。 如下str字符串中并没有定义a,但是可以使用传入a的变量,被外界值所影响这显然是不对的,在模块化机制中,str字符串应该具有自身独立的运行空间,自身不存在的变量是不可以直接使用的。
const a = 1;
const str = 'console.log(a)';
eval(str);
const func = new Function('a',str);
func(a);
node存在一个vm虚拟环境的概念,用来运行额外的js文件,他可以保证javascript执行的独立性,不会被外部所影响。
// 引入vm模块, 不需要安装,node 自建模块
const vm = require('vm');
const name = '张三';
const str = 'console.log(name)';
vm.runInThisContext(str); // 报错
所以node执行javascript模块时可以采用vm来实现。就可以保证模块的独立性了。
require代码实现
介绍require代码实现之前先来看一下两个node模块的用法,因为下面会用得到。
path模块
用于处理文件路径。
- basename: 基础路径, 有文件路径就不是基础路径,基础路径是1.js
- extname: 获取扩展名
- dirname: 父级路径
- join: 拼接路径
- resolve: 当前文件夹的绝对路径(注意使用的时候不要在结尾添加/)
- __dirname: 当前文件所在文件夹的路径
- __filename: 当前文件的绝对路径
const path = require('path');
console.log(path.basename('1.js'));
console.log(path.extname('2.txt'));
console.log(path.dirname('2.txt'));
console.log(path.join('a/b/c', 'd/e/f')); // a/b/c/d/e/
console.log(path.resolve('2.txt'));
fs模块
用于操作文件或者文件夹,比如文件的读写,新增,删除等。常用方法有readFile和readFileSync,分别是异步读取文件和同步读取文件。
const fs = require('fs');
const text = fs.readFileSync('text.js','utf-8'); // 如果不传入编码,出来的是二进制
console.log(text);
fs.access: 判断是否存在。
const fs = require('fs');
try {
fs.accessSync('text.js');
console.log('存在')
} catch(e) {
console.log('不存在')
}
手动实现require模块加载器
首先导入依赖的模块path,fs, vm, 并且创建一个Require函数,这个函数接收一个modulePath参数,表示要导入的文件路径。
// 导入依赖
const path = require('path'); // 路径操作
const fs = require('fs'); // 文件读取
const vm = require('vm'); // 文件执行
// 定义导入类,参数为模块路径
function Require(modulePath) {
...
}
在Require中获取到模块的绝对路径,使用fs加载模块,这里读取模块内容我们使用new Module来抽象,使用tryModuleLoad来加载模块内容。
// 定义导入类,参数为模块路径
function Require(modulePath) {
// 获取当前要加载的绝对路径
let pathName = path.resolve(__dirname, modulePath);
// 创建模块,新建Module实例
const module = new Module(pathName);
// 加载当前模块
tryModuleLoad(module);
// 返回exports对象
return module.exports;
}
Module的实现很简单,就是给模块创建一个exports对象,tryModuleLoad执行的时候将内容加入到exports中,id就是模块的绝对路径。
// 定义模块, 添加文件id标识和exports属性
function Module(id) {
this.id = id;
// 读取到的文件内容会放在exports中
this.exports = {};
}
之前我们说过node模块是运行在一个函数中,这里我们给Module挂载静态属性wrapper,里面定义一下这个函数的字符串,wrapper是一个数组,数组的第一个元素就是函数的参数部分,其中有exports,module. Require,dirname, filename, 都是我们模块中常用的全局变量。注意这里传入的Require参数是我们自己定义的Require。
第二个参数就是函数的结束部分。两部分都是字符串,使用的时候我们将他们包裹在模块的字符串外部就可以了。
Module.wrapper = [
"(function(exports, module, Require, __dirname, __filename) {",
"})"
]
_extensions用于针对不同的模块扩展名使用不同的加载方式,比如JSON和javascript加载方式肯定是不同的。JSON使用JSON.parse来运行。
javascript使用vm.runInThisContext来运行,可以看到fs.readFileSync传入的是module.id也就是我们Module定义时候id存储的是模块的绝对路径,读取到的content是一个字符串,我们使用Module.wrapper来包裹一下就相当于在这个模块外部又包裹了一个函数,也就实现了私有作用域。
使用call来执行fn函数,第一个参数改变运行的this我们传入module.exports,后面的参数就是函数外面包裹参数exports, module, Require, dirname, filename
Module._extensions = {
'.js'(module) {
const content = fs.readFileSync(module.id, 'utf8');
const fnStr = Module.wrapper[0] + content + Module.wrapper[1];
const fn = vm.runInThisContext(fnStr);
fn.call(module.exports, module.exports, module, Require,__filename,__dirname);
},
'.json'(module) {
const json = fs.readFileSync(module.id, 'utf8');
module.exports = JSON.parse(json); // 把文件的结果放在exports属性上
}
}
tryModuleLoad函数接收的是模块对象,通过path.extname来获取模块的后缀名,然后使用Module._extensions来加载模块。
// 定义模块加载方法
function tryModuleLoad(module) {
// 获取扩展名
const extension = path.extname(module.id);
// 通过后缀加载当前模块
Module._extensions[extension](module);
}
至此Require加载机制我们基本就写完了,我们来重新看一下。Require加载模块的时候传入模块名称,在Require方法中使用path.resolve(__dirname, modulePath)获取到文件的绝对路径。然后通过new Module实例化的方式创建module对象,将模块的绝对路径存储在module的id属性中,在module中创建exports属性为一个json对象。
使用tryModuleLoad方法去加载模块,tryModuleLoad中使用path.extname获取到文件的扩展名,然后根据扩展名来执行对应的模块加载机制。
最终将加载到的模块挂载module.exports中。tryModuleLoad执行完毕之后module.exports已经存在了,直接返回就可以了。
// 导入依赖
const path = require('path'); // 路径操作
const fs = require('fs'); // 文件读取
const vm = require('vm'); // 文件执行
// 定义导入类,参数为模块路径
function Require(modulePath) {
// 获取当前要加载的绝对路径
let absPathname = path.resolve(__dirname, modulePath);
// 创建模块,新建Module实例
const module = new Module(absPathname);
// 加载当前模块
tryModuleLoad(module);
// 返回exports对象
return module.exports;
}
// 定义模块, 添加文件id标识和exports属性
function Module(id) {
this.id = id;
// 读取到的文件内容会放在exports中
this.exports = {};
}
// 定义包裹模块内容的函数
Module.wrapper = [
"(function(exports, module, Require, __dirname, __filename) {",
"})"
]
// 定义扩展名,不同的扩展名,加载方式不同,实现js和json
Module._extensions = {
'.js'(module) {
const content = fs.readFileSync(module.id, 'utf8');
const fnStr = Module.wrapper[0] + content + Module.wrapper[1];
const fn = vm.runInThisContext(fnStr);
fn.call(module.exports, module.exports, module, Require,_filename,_dirname);
},
'.json'(module) {
const json = fs.readFileSync(module.id, 'utf8');
module.exports = JSON.parse(json); // 把文件的结果放在exports属性上
}
}
// 定义模块加载方法
function tryModuleLoad(module) {
// 获取扩展名
const extension = path.extname(module.id);
// 通过后缀加载当前模块
Module._extensions[extension](module);
}
给模块添加缓存
添加缓存就是文件加载的时候将文件放入缓存在,再去加载模块时先看缓存中是否存在,如果存在直接使用,如果不存在再去重新加载,加载之后再放入缓存。
// 定义导入类,参数为模块路径
function Require(modulePath) {
// 获取当前要加载的绝对路径
let pathName = path.resolve(__dirname, modulePath);
// 创建模块,新建Module实例
if (Module._cache[pathName]) {
// 尝试加载当前模块
tryModuleLoad(Module._cache[pathName]);
return Module._cache[pathName].exports;
}
const module = new Module(pathName);
Module._cache[pathName] = module;
// 加载当前模块
tryModuleLoad(module);
// 返回exports对象
return module.exports;
}
Module._cache = {
}
自动补全路径
// 定义导入类,参数为模块路径
function Require(modulePath) {
// 获取当前要加载的绝对路径
let pathName = path.resolve(__dirname, modulePath);
const extNames = Object.keys(Module._extensions);
let index = 0;
// 存储原始文件路径
const oldPath = pathName;
function findExt(pathName) {
if (index >= extNames.length) {
throw new Error('文件不存在');
}
try {
fs.accessSync(pathName);
return pathName;
} catch (e) {
const ext = extNames[index++];
return findExt(oldPath + ext);
}
}
// 递归追加后缀名,判断文件是否存在
pathName = findExt(pathName);
// 创建模块,新建Module实例
if (Module._cache[pathName]) {
// 尝试加载当前模块
tryModuleLoad(Module._cache[pathName]);
return Module._cache[pathName].exports;
}
const module = new Module(pathName);
Module._cache[pathName] = module;
// 加载当前模块
tryModuleLoad(module);
// 返回exports对象
return module.exports;
}
实现步骤总结
- 导入相关模块,创建一个Require方法。
- path.resolve(__dirname, modulePath) 根据相对路径,转换成绝对路径。
- 缓存模块 Module._cache,同一个模块不要重复加载,提升性能。
- 创建模块 this.id = 路径,this.exports = 用于存放内容 。
- 利用tryModuleLoad(module)加载模块。
- Module._extensions使用读取文件。
- Module.wrapper: 把读取到的js包裹一个函数。
- 将拿到的字符串使用vm.runInThisContext运行字符串。
- 让字符串执行用call将this改变成exports