前言
在前端开发中，我们经常需要监控某个变量的变化情况，以便进一步发现问题或进行优化。而使用 console.log 进行输出很容易淹没在大量的日志中，不方便查看。这时候可以使用 observ-varlist 这个 npm 包，它可以帮助我们更方便地监控变量的变化。
observ-varlist 简介
observ-varlist 是一个简单的工具，它可以监视变量的变化，并将变化记录在一个列表中。它提供了一个监听函数 observVarList(list, options?)，其中 list 是一个需要监视的变量列表，options 则是一些可选的配置项。
安装
可以通过 npm 进行安装：
npm install observ-varlist --save
使用说明
在使用 observ-varlist 之前，需要先导入它。可用以下方式导入：
// CommonJS 格式
const observVarList = require('observ-varlist')
// ES6 格式
import {observVarList} from 'observ-varlist'在导入成功后，就可以使用 observVarList 进行变量的监听了。下面我们通过一个示例来详细说明 observVarList 的使用。
示例
我们定义一个 person 对象，其中包含了姓名、性别、年龄三个属性，并且我们需要对这三个属性进行监听：
-- -------------------- ---- ------- ----- ------ - - ----- ------ ------- ------- ---- -- - ----- -------- ------ - ----------------- ----- ------ -------- - ------------------- ----- -------- ---------- - --------------------- ----- ----- ------- - ------------------ ----- ---- - ------ ------- ---- ----- --- - ------------------- ------------ -- - ------------------- -- ---------------- ------------------- ----------
输出结果如下所示：
[ { type: 'update', object: 'Tom', value: 'Jerry' } ]
[ { type: 'update', object: 'male', value: 'female' } ]
[ { type: 'update', object: 18, value: 20 } ]在上面的示例中，我们首先使用了 observ 方法定义了三个变量 name、gender 和 age，这三个变量会通过 observVarList(list) 方法进行监视。然后我们定义了一个监听函数，当 name、gender 或 age 发生变化时，监听函数会输出一条日志，其中 type 字段指定操作类型，object 字段指定变量的原值，value 字段指定变量的新值。
注意第 8 行的 list 变量，它是一个数组，包含了需要监视的变量。如果需要监视的变量较多，也可以使用对象的方式进行注册，例如：
const list = {
name,
gender,
age
}
const ovl = observVarList(list)总结
通过 observ-varlist 这个 npm 包，我们可以方便地监视变量的变化情况，并输出到一个列表中，便于查看。这项技术不仅适用于前端开发，也可以用于服务端开发中，非常实用。在使用时需要注意监听函数的参数。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f9d3d1de16d83a66fc2