如何实现 JavaScript 工程代码覆盖率统计

实现原理

基于 AST 技术我们将前端项目的中的代码打桩（插入统计代码）

实现示例

例如 app.js 的代码如下

let App = function(){
  this.name_ = 'i am app';
};
App.prototype.sayHi = function(){
  alert(this.name_ + ',nice to meet you');
};

进行打桩统计的代码

window.logLine = function(fileName,fileLine){
   //记录已执行的文件以及具体代码行
    window.executeLogCodeMap = window.executeLogCodeMap || {};
   
   //对应文件
    window.executeLogCodeMap[fileName] = window.executeLogCodeMap[fileName] || {};
    
    //对应行
   window.executeLogCodeMap[fileName].push(fileLine)
}

app.js 经过打桩后

let App = function(){ logLine('app.js',1);
  this.name_ = 'i am app';logLine('app.js',2);
};logLine('app.js',3);
App.prototype.sayHi = function(){ logLine('app.js',4);
  alert(this.name_ + ',nice to meet you');logLine('app.js',5);
};logLine('app.js',6);

最后通过在网页运行脚本后， executeLogCodeMap 就是一个具体的日志文件

logLine('app.js',5); 完成这样的一次次执行收集

市面上的代码覆盖率原理大致如此，不过为了大规模在项目中使用，实际 logLIne 这样的代码会进行压缩设计，达到最佳的性能设计。