什么是 confusing-browser-globals?
confusing-browser-globals 是一个 npm 包，它旨在提供一个列表，列出了浏览器中常见的全局变量和函数，但名称容易混淆或潜在危险。该库包含超过 100 个这样的全局变量和函数。
该库背后的主要思想是帮助开发者避免在代码中无意中使用具有模糊造成问题的全局变量和函数。
如何使用 confusing-browser-globals?
首先，你需要安装 confusing-browser-globals：
npm install confusing-browser-globals
然后，在你的代码中，你可以引入并使用这个库：
-- -------------------- ---- ------- ----- ---------------- - ------------------------------------- -------- ------------ - ------------- --------- - -- -- ---------- ---------- -- --------------------------------------- --- --- - ------------------------ --------------- - -- -- ------ - -------- ---------- -- ----------------------------------- --- --- - -------------------- --------------- - -- ------------------------------------- --- --- - ---------------------- --------------- -展开代码
如上所示，你可以使用 indexOf 方法检查一个特定的全局变量或函数是否是混淆的。如果该函数返回 -1，则表示该全局变量或函数不在 confusing-browser-globals 的列表中。
如何将 confusing-browser-globals 集成到你的项目中？
在 TypeScript 项目中使用 confusing-browser-globals
如果你的项目使用 TypeScript，你可以将 confusing-browser-globals 的类型定义文件导入到你的代码中：
-- -------------------- ---- ------- ------ - -------------------- - ---- ---------------------------- -------- ------------ - ------------- --------- - -- -- ---------- ---------- -- ---------------------- -- ------------------------------- --- --- - ------------------------ --------------- -展开代码
注意：由于 confusing-browser-globals 并没有提供官方的类型定义文件，因此我们需要使用 any 类型来引用 ConfusingGlobalsList。但是，你也可以创建自己的类型定义文件，以便更好地集成 confusing-browser-globals 到你的 TypeScript 项目中。
在 ESLint 中使用 confusing-browser-globals
如果你使用 ESLint 进行代码检查，你可以使用 eslint-plugin-no-unsanitized 插件来集成 confusing-browser-globals：
首先，安装 eslint-plugin-no-unsanitized：
npm install eslint-plugin-no-unsanitized --save-dev
然后，在你的 .eslintrc 文件中添加以下配置：
-- -------------------- ---- ------- - ---------- ------------------- -------- - ------------------------- ------- -- ----------- - ----------------- - ----------------- -- - - -展开代码
注意：由于 confusing-browser-globals 并没有提供官方的 ESLint 插件，因此我们需要使用 eslint-plugin-no-unsanitized 插件，并在 settings 中将 allowedGlobals 设置为空数组。这将强制该插件检查所有全局变量和函数是否被定义。
结论
confusing-browser-globals 是一个非常有用的 npm 包，可以帮助开发者避免在代码中无意中使用具有模糊造成问题的全局变量和函数。通过简单地将其集成到你的项目中，你可以更好地保护你的代码，并减少调试时间和工作量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/46454
