如何在 DOM 对象上设置属性时避免无参数重新分配

javascript dom eslint

2022-08-30 02:44:03

我有一个方法，其主要目的是在DOM对象上设置属性

function (el) {
  el.expando = {};
}

我使用AirBnB的代码风格，这使得ESLint抛出一个错误：no-param-reassign

错误分配给函数参数 'el' 无参数重新分配

如何在符合AirBnB代码风格的同时操作作为参数传递的DOM对象？

有人建议使用引用另一个问题，但如果我没有记错的话，这适用于react，但不适用于本机DOM操作。/* eslint react/prop-types: 0 */

我也不认为改变代码风格是一个答案。我相信使用标准样式的好处之一是在项目之间拥有一致的代码，随意更改规则感觉就像是对AirBnB等主要代码样式的滥用。

为了记录在案，我在GitHub上询问了AirBnB，他们认为在第766期的这些情况下应该走什么路。

答案 1

正如@Mathletics建议的那样，您可以通过将以下内容添加到文件中来完全禁用该规则：.eslintrc.json

"rules": {
  "no-param-reassign": 0
}

或者，您可以专门为参数属性禁用该规则：

"rules": {
  "no-param-reassign": [2, { "props": false }]
}

或者，您可以禁用该函数的规则：

/* eslint-disable no-param-reassign */
function (el) {
  el.expando = {};
}
/* eslint-enable no-param-reassign */

或仅针对特定行：

function (el) {
  el.expando = {}; // eslint-disable-line no-param-reassign
}

答案 2

正如本文所解释的，此规则旨在避免改变参数对象。如果分配给某个参数，然后尝试通过该对象访问某些参数，则可能会导致意外的结果。arguments

您可以通过使用另一个变量获取对 DOM 元素的引用来保持规则不变并保持 AirBnB 样式，然后对其进行修改：

function (el) {
  var theElement = el;
  theElement.expando = {};
}

在JS中，对象（包括DOM节点）是通过引用传递的，所以这里和是对同一DOM节点的引用，但是修改不会改变对象，因为仍然只是对该DOM元素的引用。eltheElementtheElementargumentsarguments[0]

规则的文档中提示了此方法：

此规则的正确代码示例：

/*eslint no-param-reassign: "error"*/

function foo(bar) {
    var baz = bar;
}

就个人而言，我只使用提到的其他几个答案的方法。修改作为参数传递的对象的属性不会更改对象引用，因此它不应遇到此规则试图避免的各种问题。"no-param-reassign": ["error", { "props": false }]