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

[英]How to avoid no-param-reassign when setting a property on a DOM object


I have a method which's main purpose is to set a property on a DOM object

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

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

I use AirBnB's code style which makes ESLint throw a no-param-reassign error:

我使用AirBnB的代码样式,这使得ESLint抛出无参数重新分配错误:

error Assignment to function parameter 'el' no-param-reassign

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

How can I manipulate a DOM object passed as an argument while conforming AirBnB's code style?

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

Somebody suggested to use /* eslint react/prop-types: 0 */ referring to another issue but if I am not mistaken this applies well for react, but not for native DOM manipulation.

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

Also I do not think changing the code style is an answer. I believe one of the benefits of using a standard style is having consistent code across projects and changing the rules at will feels like a misuse of a major code style like AirBnB's.

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

For the record, I asked AirBnB on GitHub, what they think is the way to go in these cases in issue #766.

为了记录,我在GitHub上询问了AirBnB,他们认为在问题#766中这些案例的方法是什么。

9 个解决方案

#1


58  

As @Mathletics suggests, you can disable the rule entirely by adding this to your .eslintrc.json file:

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

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

Or you could disable the rule specifically for param properties

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

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

Alternatively, you could disable the rule for that function

或者,您可以禁用该功能的规则

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

Or for that line only

或仅限该行

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

You might also check out this blog post on disabling ESLint rules specifically to accommodate AirBnB's style guide.

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

#2


18  

You can override this rule inside your .eslintrc file and disable it for param properties like this

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

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

This way rule is still active but it will not warn for properties. More info: http://eslint.org/docs/rules/no-param-reassign

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

#3


18  

As this article explains, this rule is meant to avoid mutating the arguments object. If you assign to a parameter and then try and access some of the parameters via the arguments object, it can lead to unexpected results.

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

You could keep the rule intact and maintain the AirBnB style by using another variable to get a reference to the DOM element and then modify that:

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

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

In JS objects (including DOM nodes) are passed by reference, so here el and theElement are references to the same DOM node, but modifying theElement doesn't mutate the arguments object since arguments[0] remains just a reference to that DOM element.

在JS对象(包括DOM节点)中通过引用传递,因此el和theElement是对同一DOM节点的引用,但修改theElement不会改变arguments对象,因为arguments [0]仍然只是对该DOM元素的引用。

This approach is hinted at in the documentation for the rule:

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

Examples of correct code for this rule:

此规则的正确代码示例:

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

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

Personally, I would just use the "no-param-reassign": ["error", { "props": false }] approach a couple of other answers mentioned. Modifying a property of the parameter doesn't mutate what that parameter refers to and shouldn't run into the kinds of problems this rule is trying to avoid.

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

#4


2  

Those wishing to selectively deactivate this rule might be interested in a proposed new option for the no-param-reassign rule that would allow a "white list" of object names with respect to which parameter reassignment should be ignored.

那些希望有选择地停用此规则的人可能会对无参数重新分配规则的拟议新选项感兴趣,该选项将允许关于应忽略哪个参数重新分配的对象名称的“白名单”。

#5


0  

You can also use lodash assignIn which mutates the object. assignIn(obj, { someNewObj });

您还可以使用lodash assignIn来改变对象。 assignIn(obj,{someNewObj});

https://lodash.com/docs/4.17.2#assignIn

https://lodash.com/docs/4.17.2#assignIn

#6


0  

You can use methods for updating data. Eg. "res.status(404)" instead of "res.statusCode = 404" I found the solution. https://github.com/eslint/eslint/issues/6505#issuecomment-282325903

您可以使用方法更新数据。例如。 “res.status(404)”而不是“res.statusCode = 404”我找到了解决方案。 https://github.com/eslint/eslint/issues/6505#issuecomment-282325903

/*eslint no-param-reassign: ["error", { "props": true, "ignorePropertyModificationsFor": ["$scope"] }]*/

app.controller('MyCtrl', function($scope) {
  $scope.something = true;
});

#7


0  

Following the documentation:

以下文档:

function (el) {
  const element = el
  element.expando = {}
}

#8


0  

The no-param-reassign warning makes sense for common functions, but for a classic Array.forEach loop over an array which you intend to mutate it isn't to appropriate.

无参数重新分配警告对于常见函数是有意义的,但是对于要打算变异的数组的经典Array.forEach循环是不合适的。

However, to get around this, you can also use Array.map with a new object (if you like me, dislike snoozing warnings with comments):

但是,为了解决这个问题,你也可以使用带有新对象的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
});

#9


-2  

You can use:

您可以使用:

(param) => {
  const data = Object.assign({}, param);
  data.element = 'some value';
}

注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:http://www.itdaan.com/blog/2016/02/25/dfc082b3578e644c0051578f87be930c.html



 
© 2014-2018 ITdaan.com 粤ICP备14056181号