从模块流可以看出，这个NodeWatchFileSystem模块非常深，这里暂时不会深入到chokidar模块，有点太偏离本系列文章了，从WatcherManager开始讲解。
流程如图：
源码非常简单，包括一个工厂函数与两个原型方法，整理如下：
var path = require("path");
class WatcherManager {
constructor() {
// 监视容器
this.directoryWatchers = {};
};
getDirectoryWatcher(directory, options) {
var DirectoryWatcher = require("./DirectoryWatcher");
options = options || {};
// 目录路径拼接参数 这个有够厉害的
// 假设directory为lib options不传 拼接后为'lib {}'
var key = directory + " " + JSON.stringify(options);
if (!this.directoryWatchers[key]) {
// 根据监视路径生成一个DirectoryWatcher实例
this.directoryWatchers[key] = new DirectoryWatcher(directory, options);
// 监听监视关闭事件
this.directoryWatchers[key].on("closed", function() {
delete this.directoryWatchers[key];
}.bind(this));
}
// 返回对应的实体类
return this.directoryWatchers[key];
};
// 路径 参数 开始事件
watchFile(p, options, startTime) {
// 返回目录名作为根目录
// lib/newFile.js => lib
var directory = path.dirname(p);
// 生成实例并调用watch方法
// 由于上面返回的是实体类 这里可以进行链式调用
return this.getDirectoryWatcher(directory, options).watch(p, startTime);
};
watchDirectory(directory, options, startTime) {
return this.getDirectoryWatcher(directory, options).watch(directory, startTime);
};
}
module.exports = new WatcherManager();
包含一个容器类和三个实例方法，每一次调用watchFile或watchDirectory方法时会在容器中添加一个目录监视信息，在关闭监视事会删除对应的信息。
主流方法还是引用的DirectoryWatcher模块，从构造函数开始详细看源码：
function DirectoryWatcher(directoryPath, options) {
// 继承EventEmitter
EventEmitter.call(this);
// 获取配置
this.options = options;
// 根目录
this.path = directoryPath;
// 根目录下的文件信息
this.files = Object.create(null);
// 根目录下的文件夹信息
this.directories = Object.create(null);
// 目录下的文件所有监听器容器
this.watchers = Object.create(null);
// 初始化监视器 跳过
this.watcher = chokidar.watch(directoryPath, { /*options*/ });
// 事件监听
this.watcher.on("add", this.onFileAdded.bind(this));
this.watcher.on("addDir", this.onDirectoryAdded.bind(this));
this.watcher.on("change", this.onChange.bind(this));
this.watcher.on("unlink", this.onFileUnlinked.bind(this));
this.watcher.on("unlinkDir", this.onDirectoryUnlinked.bind(this));
this.watcher.on("error", this.onWatcherError.bind(this));
// 初次扫描标记
this.initialScan = true;
// 对整个文件夹进行监视 仅在传入监视路径为文件夹时置true
this.nestedWatching = false;
this.initialScanRemoved = [];
// 初始化扫描
this.doInitialScan();
// 记录watchers中监听器数量
this.refs = 0;
}
这里可以分为几块内容：
1、继承nodejs的事件模块
2、获取传进来的路径与配置参数
3、根据参数初始化一个watcher对象，并对文件操作做事件监听
4、初始化扫描
watcher对象的生成过程暂时不考虑，太深入会偏离主线任务。
初始化扫描
在构造函数中会对传进来的路径进行扫描，源码如下：
DirectoryWatcher.prototype.doInitialScan = function doInitialScan() {
// 读取根目录
fs.readdir(this.path, function(err, items) {
// 即使报错仍然置initialScan标记为false
if (err) {
this.initialScan = false;
return;
}
// items为到根目录下所有文件的文件名组成的数组
// 同时包含文件与文件夹
async.forEach(items, function(item, callback) {
// 将路径与文件名进行拼接获取完整路径
var itemPath = path.join(this.path, item);
// 获取文件信息
fs.stat(itemPath, function(err2, stat) {
// 该方法仅支持初次扫描
if (!this.initialScan) return;
if (err2) {
callback();
return;
}
// 处理文件
if (stat.isFile()) {
if (!this.files[itemPath])
this.setFileTime(itemPath, +stat.mtime, true);
}
// 处理文件夹
else if (stat.isDirectory()) {
if (!this.directories[itemPath])
this.setDirectory(itemPath, true, true);
}
callback();
}.bind(this));
}.bind(this), function() {
// 回调函数中处理标记initialScan标记
this.initialScan = false;
this.initialScanRemoved = null;
}.bind(this));
}.bind(this));
};
代码十分易懂，基本上都是fs模块的方法，主要分为以下几步：
1、读取指定根目录下所有文件
2、将文件名与当前路径进行拼接获取完整路径，然后尝试获取文件信息
3、分别处理文件与文件夹
这里的流程可以用一个案例测试，首先目录如图：
a.js是执行JS文件，lib是用来测试的文件夹，包含几个js文件和一个空文件夹。
测试代码如下：
// a.js
const fs = require('fs');
const async = require('async');
const path = require('path'); // 读取文件夹
fs.readdir('./lib', (err, items) => {
// 这里没有传路径 所以用process.cwd()模拟
// 这里需要拼接一下路径
const absPath = path.join(process.cwd(), 'lib');
// items => ['DirectoryWatcher.js','fileDirectory',...,'watchpack.js']
async.forEach(items, (item, callback) => {
// 第一个元素拼接后为d:\workspace\doc\lib\DirectoryWatcher.js
const itemPath = path.join(absPath, item);
fs.stat(itemPath, (err2, stat) => {
// 处理文件
if (stat.isFile()) {
console.log('Find file,the name is: ' + item);
}
// 处理文件夹
else if (stat.isDirectory()) {
console.log('Find directory,the name is: ' + item);
}
});
});
});
执行JS文件后输出如图：
可以看到，通过该方法可以区别开文件与文件夹，然后分类处理。
下面看两种处理方法。
setFileTime
// this.setFileTime(itemPath, +stat.mtime, true);
// itemPath => 路径
// +stat.mtime => 修改时间
// 是否初始化 => true
DirectoryWatcher.prototype.setFileTime = function setFileTime(filePath, mtime, initial, type) {
// 获取当前时间
var now = Date.now();
var old = this.files[filePath];
// 初始化取文件修改时间与当前时间的较小值
// 否则files = {path:[now,mtime]}
// 键为文件路径 值为数组 包含当前时间与上一次修改时间
this.files[filePath] = [initial ? Math.min(now, mtime) : now, mtime];
// 这里的FS_ACCURACY是假设操作可能的运行时间
// 尝试通过加一点点来更精确修改时间
if (mtime)
mtime = mtime + FS_ACCURACY;
if (!old) {
if (mtime) {
if (this.watchers[withoutCase(filePath)]) { /**/ }
}
} else if (!initial && mtime && type !== "add") {
/**/
} else if (!initial && !mtime) { /**/ }
// 初始化不会有watchers
if (this.watchers[withoutCase(this.path)]) { /**/ }
};
从名字也能看出这个方法的作用就是设置时间，在初始化的情况下，会在files容器中注册，键为文件路径，值为当前时间与修改时间。
由于watchers对象此时为null，所以后面的代码并不会进入，后面再讨论。
setDirectory
// this.setDirectory(itemPath, true, true);
DirectoryWatcher.prototype.setDirectory = function setDirectory(directoryPath, exist, initial, type) {
if (directoryPath === this.path) {
if (!initial && this.watchers[withoutCase(this.path)]) { /**/ }
} else {
var old = this.directories[directoryPath];
// 初次扫描
if (!old) {
if (exist) {
// 默认为false
if (this.nestedWatching) {
this.createNestedWatcher(directoryPath);
} else {
// 根目录在监听器容器中的值默认设置为true
this.directories[directoryPath] = true;
}
if (!initial && this.watchers[withoutCase(this.path)]) { /**/ }
}
} else { /**/ }
}
};
在初始化的扫描中，根目录下所有的文件夹也会在对应的容器中注册一个键，值为true。
其余代码在初始化并不会执行，后面再讲。
在经过doInitialScan初始化之后，files、directories容器会被填充进对应的键值对，存储文件与文件夹的路径信息。
watch
无论是watchFile还是watchDirectory都在初始化后直接调用了watch方法对具体文件进行了监视，这里分析该处源码：
DirectoryWatcher.prototype.watch = function watch(filePath, startTime) {
// 将路径小写
// 第一次监视指定路径会初始化一个空数组
this.watchers[withoutCase(filePath)] = this.watchers[withoutCase(filePath)] || [];
// 记数
this.refs++;
// 生成一个内部辅助类
var watcher = new Watcher(this, filePath, startTime);
// 监听closed事件
watcher.on("closed", function() {
// 删除对应的watcher
var idx = this.watchers[withoutCase(filePath)].indexOf(watcher);
this.watchers[withoutCase(filePath)].splice(idx, 1);
// 当对应watcher数组为空时直接删除该键
if (this.watchers[withoutCase(filePath)].length === 0) {
delete this.watchers[withoutCase(filePath)];
// 如果触发了文件夹的closed事件 关闭文件夹的监视
if (this.path === filePath)
this.setNestedWatching(false);
}
// 当watchers为空时调用类的close方法
if (--this.refs <= 0)
this.close();
}.bind(this));
// 加进去
this.watchers[withoutCase(filePath)].push(watcher);
var data;
// 当监视文件路径为一个文件夹时
// 文件夹的修改时间应该为内部文件中修改时间最新的
if (filePath === this.path) {
this.setNestedWatching(true);
data = false;
// 取出所有文件的时间信息中最新的
Object.keys(this.files).forEach(function(file) {
var d = this.files[file];
if (!data)
data = d;
else
data = [Math.max(data[0], d[0]), Math.max(data[1], d[1])];
}, this);
}
// 取对应文件信息
else {
data = this.files[filePath];
}
// node中的异步函数
process.nextTick(function() {
if (data) {
// 相等说明是初始化阶段 修正时间
var ts = data[0] === data[1] ? data[0] + FS_ACCURACY : data[0];
if (ts >= startTime)
watcher.emit("change", data[1]);
}
// 监视的文件路径之前被移除过
else if (this.initialScan && this.initialScanRemoved.indexOf(filePath) >= 0) {
watcher.emit("remove");
}
}.bind(this));
return watcher;
};
class Watcher {
constructor() {
EventEmitter.call(this);
this.directoryWatcher = directoryWatcher;
this.path = filePath;
this.startTime = startTime && +startTime;
this.data = 0;
};
// 也不知道检测啥的
checkStartTime(mtime, initial) {
if (typeof this.startTime !== "number") return !initial;
var startTime = this.startTime;
return startTime <= mtime;
};
// 此方法触发closed事件
close() {
this.emit("closed");
};
}
内部的Watcher对象负责对应路径文件的操作事件响应。
watch有两种情形，一种是普通的文件监视，一种是对文件夹的监视。
如果是普通的文件监视，直接生成一个Watcher监听器，然后将该监听器加入已有目录监视容器对应的watchers容器中。
如果是传入的是文件夹，会对根目录下所有的文件夹再次调用watchDirectory收集目录信息，代码如下：
DirectoryWatcher.prototype.setNestedWatching = function(flag) {
if (this.nestedWatching !== !!flag) {
this.nestedWatching = !!flag;
if (this.nestedWatching) {
Object.keys(this.directories).forEach(function(directory) {
// 对根目录下所有文件夹路径调用该方法
this.createNestedWatcher(directory);
}, this);
} else {
// 关闭文件夹监视
Object.keys(this.directories).forEach(function(directory) {
this.directories[directory].close();
this.directories[directory] = true;
}, this);
}
}
};
DirectoryWatcher.prototype.createNestedWatcher = function(directoryPath) {
// 文件夹信息容器的值设为一个DirectoryWatcher实例
// startTime设为1
this.directories[directoryPath] = watcherManager.watchDirectory(directoryPath, this.options, 1);
// 实例监听change事件
this.directories[directoryPath].on("change", function(filePath, mtime, type) {
// 文件夹改变时触发对应的监听器
if (this.watchers[withoutCase(this.path)]) {
this.watchers[withoutCase(this.path)].forEach(function(w) {
if (w.checkStartTime(mtime, false)) {
w.emit("change", filePath, mtime, type);
}
});
}
}.bind(this));
};
fs.watch
下面开始讲解文件操时作触发的事件处理，其中包括文件与文件夹的操作。
先简要介绍下nodejs原生的watch系统，官方文档：https://nodejs.org/dist/latest-v8.x/docs/api/fs.html#fs_fs_watch_filename_options_listener。
通过引入nodejs中的fs模块，通过调用fs.watch方法可以对文件进行监视，具体的api如下：
const fs = reqire('fs');
fs.watch(filename /*文件名*/ , options /*配置参数 可忽略*/ , listener /*监听器*/ )
这里的filename可以是文件，也可以是一个目录。
options有三个可选参数：
persistent：文件如果在被监视，进程是否应该继续进行，默认为true
recursive：是否监视所有子目录，默认为false
encoding：指定传给监听器文件名的字符编码，默认为'uft-8'
监听器则是一个函数，有两个参数，分别为事件类型与对应的文件名。
这里用了小案例来进行演示，代码如下：
const fs = require('fs');
fs.watch('./lib', ((event, filename) => {
console.log('event type is: ' + event);
console.log('the relative filename is: ' + filename);
}));
目录结构可参考上图，执行node指令后终端会被挂起，等待变化。
此时新建一个文件，如图：
在新建成功的时候，会发现监听器被触发，打印信息如图：
修改文件内容，打印信息如图：
根据官方文档，事件只有rename与change两种，无论是添加、删除、重命名都会触发rename事件，而修改文件内容会触发change事件。
所以很明显，框架内部对事件类型进行了细粒度更大的划分，将rename分解为增加文件/文件夹，删除文件/文件夹四种情况。
实现的原理根据上面的代码也很容易想到，可以根据文件名与files、directories容器中的键做比对，区分文件与文件夹，根据修改时间，区分是新建还是删除。
下面可以看构造函数中对特殊文件操作的监听器。
add
// 增加文件时触发的事件
this.watcher.on("add", this.onFileAdded.bind(this)); DirectoryWatcher.prototype.onFileAdded = function onFileAdded(filePath, stat) {
// filePath => 文件路径
// stat => fs.stat(...)
// 检测文件是否在监视目录中
if (filePath.indexOf(this.path) !== 0) return;
if (/[\\\/]/.test(filePath.substr(this.path.length + 1))) return;
// 设置文件修改时间信息
this.setFileTime(filePath, +stat.mtime, false, "add");
};
可以看出，进行简单的文件合法性检测后，还是进入了setFileTime函数，不过这一次的init标记为false，并且有对应的eventType。
这一次setFileTime的流程如下：
DirectoryWatcher.prototype.setFileTime = function setFileTime(filePath, mtime, initial, type) {
var now = Date.now();
// 初始化的值会被获取
var old = this.files[filePath];
// initial是false 所以值为[now,mtime]
this.files[filePath] = [initial ? Math.min(now, mtime) : now, mtime];
// ...
};
一句话概括就是，add情况下，只会在files容器中注册该文件的信息。
addDir => 在directories容器中注册该文件夹
change
DirectoryWatcher.prototype.onChange = function onChange(filePath, stat) {
// ...
// 会根据mtime值修改FS_ACCURACY
ensureFsAccuracy(mtime);
// 仍然进入此函数
this.setFileTime(filePath, mtime, false, "change");
};
function ensureFsAccuracy(mtime) {
if (!mtime) return;
// 当mtime为小数时才会跳过
if (FS_ACCURACY > 1 && mtime % 1 !== 0)
FS_ACCURACY = 1;
// 0-9或非10的倍数
else if (FS_ACCURACY > 10 && mtime % 10 !== 0)
FS_ACCURACY = 10;
// 0-99或非100倍数
else if (FS_ACCURACY > 100 && mtime % 100 !== 0)
FS_ACCURACY = 100;
else if (FS_ACCURACY > 1000 && mtime % 1000 !== 0)
FS_ACCURACY = 1000;
else if (FS_ACCURACY > 2000 && mtime % 2000 !== 0)
FS_ACCURACY = 2000;
}
DirectoryWatcher.prototype.setFileTime = function setFileTime(filePath, mtime, initial, type) {
// ...
if (!old) { /*...*/ }
// change
else if (!initial && mtime && type !== "add") {
if (this.watchers[withoutCase(filePath)]) {
this.watchers[withoutCase(filePath)].forEach(function(w) {
w.emit("change", mtime, type);
});
}
}
// remove
else if (!initial && !mtime) { /*...*/ }
// 如果监视了根目录
if (this.watchers[withoutCase(this.path)]) {
this.watchers[withoutCase(this.path)].forEach(function(w) {
// 根目录触发change事件
if (!initial || w.checkStartTime(mtime, initial)) {
w.emit("change", filePath, mtime, initial ? "initial" : type);
}
});
}
};
这里有一个ensureFsAccuracy函数，这里默认的FS_ACCURACY为10000，而mtime一般都是很大的整数，所以这个函数的作用有待研究。
可以看到change事件除了设置文件的时间信息，同时也对watchers中每个监听器触发了change事件。
最后，如果根目录设置了监视，由于监视文件在根目录中，所以根目录必定也发生了改变，所以根目录的所有监视器也会同时触发change事件。
unlink
DirectoryWatcher.prototype.onFileUnlinked = function onFileUnlinked(filePath) {
// ...
// 注意第二个参数mtime为null
this.setFileTime(filePath, null, false, "unlink");
// 记录被删除的文件路径
if (this.initialScan) {
this.initialScanRemoved.push(filePath);
}
};
DirectoryWatcher.prototype.setFileTime = function setFileTime(filePath, mtime, initial, type) {
// ...
if (!old) { /**/ }
// 触发remove事件
else if (!initial && mtime && type !== "add") {
if (this.watchers[withoutCase(filePath)]) {
this.watchers[withoutCase(filePath)].forEach(function(w) {
w.emit("change", mtime, type);
});
}
} else if (!initial && !mtime) { /**/ }
if (this.watchers[withoutCase(this.path)]) { /**/ }
};
当删除文件时，传入的mtime会置null，所以会对所有的watcher触发remove。
另外，这里被删除的文件路径会被记录到initialScan中。
unlinkDir
DirectoryWatcher.prototype.onDirectoryUnlinked = function onDirectoryUnlinked(directoryPath) {
// ...
// 这里调用文件夹的删除
this.setDirectory(directoryPath, false, false, "unlink");
if (this.initialScan) {
this.initialScanRemoved.push(directoryPath);
}
};
DirectoryWatcher.prototype.setDirectory = function setDirectory(directoryPath, exist, initial, type) {
if (directoryPath === this.path) { /**/ }
// 删除文件夹
else {
var old = this.directories[directoryPath];
if (!old) { /**/ }
else {
if (!exist) {
if (this.nestedWatching)
this.directories[directoryPath].close();
// 删除容器中的文件夹信息
delete this.directories[directoryPath];
if (!initial && this.watchers[withoutCase(this.path)]) { /*...*/ }
}
}
}
};
在nestedWatching参数为false的情况下，这里是直接从文件夹信息容器中删除对应信息，否则会调用watcher对应的close方法。
error
DirectoryWatcher.prototype.onWatcherError = function onWatcherError( /* err */ ) {};
源码中，这个事件监听器并没有任何内容，需要自定义。
由于这节内容比较多，这里做一个简单的内容总结，也帮助自己复习：
watcherManager模块
1、有一个directoryWatchers容器保存已监视目录信息
2、getDirectoryWatcher方法会根据监视路径与options参数生成容器键，如果存在对应的值直接返回，否则新建一个DirectoryWatcher实体类注册到容器中，并监听closed事件，触发时自动删除该键
3、WatchFile、WatchDirectory分别处理文件、文件夹的监视，会同时调用getDirectoryWatcher方法与返回实体类的watch方法
4、在WatchFile中，监视文件所在的文件夹会作为根目录传入实例化的参数中，且只会监视根目录的该文件
5、若传入文件夹，则该文件夹目录下所有文件夹会被嵌套调用watchDirectory并将数据传入directories容器中，键为路径，值为一个新的DirectoryWatcher对象
DirectoryWatcher模块
1、包含多个容器，分别为：
files：保存根目录下所有文件信息
directories：保存根目录下所有文件夹信息
initialScanRemoved：记录已被删除的文件或文件夹路径
watchers：指定目录下监听器容器，其中键为监视文件的路径，值为监听器
2、内部细分了原生nodejs的rename、change事件，分别为add、addDir、change、unlink、unlinkDir
3、触发了对应路径文件的事件，会依次触发watchers中对应路径数组中所有监听器
完结！