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

Question

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

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

我使用AirBnB的代码样式使ESLint抛出no-param-reassign错误:

错误赋值函数参数'el'no-param-reassign

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

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

我也不认为改变代码风格是一个答案.我相信使用标准样式的好处之一是在项目中使用一致的代码,并且随意更改规则就像滥用像AirBnB这样的主要代码样式.

为了记录,我在GitHub上询问了AirBnB,他们认为在问题#766中这些问题的出路是什么.

Answer 1

正如@Mathletics建议的那样,您可以通过将此规则添加到您的.eslintrc.json文件来完全禁用该规则:

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

或者您可以专门为param属性禁用规则

"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
}

您还可以查看此博客文章 ,专门禁用ESLint规则以适应AirBnB的样式指南.

Answer 2

正如本文所解释的,此规则旨在避免变异arguments对象.如果您指定参数然后尝试通过arguments对象访问某些参数,则可能会导致意外结果.

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

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

在JS对象(包括DOM节点)通过引用传递,所以这里el和theElement是相同的DOM节点的引用,但修改theElement不发生变异的arguments,因为对象arguments[0]遗体只是到DOM元素的引用.

该规则的文档中暗示了这种方法:

此规则的正确代码示例:

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

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

就个人而言,我只会使用这个"no-param-reassign": ["error", { "props": false }]方法提到其他几个答案.修改参数的属性不会改变该参数引用的内容,也不应该遇到此规则试图避免的各种问题.

Answer 3

您可以在.eslintrc文件中覆盖此规则,并为此类的param属性禁用它

{
    "rules": {
        "no-param-reassign": [2, { 
            "props": false
        }]
    },
    "extends": "eslint-config-airbnb"
}

这种方式规则仍然有效,但它不会警告属性.更多信息:http://eslint.org/docs/rules/no-param-reassign

Answer 4

function (el) {
  el.setAttribute('expando', {});
}

其他一切都只是丑陋的黑客。

Answer 5

这个no-param-reassign警告对于常见函数是有意义的,但对于Array.forEach你打算改变它的数组的经典循环是不合适的.

但是,为了解决这个问题,你也可以使用Array.map一个新对象(如果你像我一样,不喜欢用注释打盹警告):

someArray = someArray.map((_item) => {
    let item = Object.assign({}, _item); // decouple instance
    item.foo = "bar"; // assign a property
    return item; // replace original with new instance
});