Як уникнути перепризначення no-param при встановленні властивості для об'єкта DOM

У мене є метод, головне призначення якого - встановити властивість для об'єкта DOM

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

Я використовую стиль коду AirBnB, що змушує ESLint видавати no-param-reassignпомилку:

Помилка Призначення параметру функції 'el' no-param-re assign

Як я можу маніпулювати об’єктом DOM, переданим як аргумент, відповідаючи стилю коду AirBnB?

Хтось запропонував використовувати /* eslint react/prop-types: 0 */посилання на іншу проблему, але якщо я не помиляюся, це добре застосовується для реакції, але не для маніпуляцій з рідною DOM.

Також я не думаю, що зміна стилю коду є відповіддю. Я вважаю, що однією з переваг використання стандартного стилю є наявність послідовного коду в проектах і зміна правил за власним бажанням здається зловживанням таким основним стилем коду, як AirBnB.

Для протоколу я запитав AirBnB на GitHub, яким вони вважають шлях у цих випадках у номері 766 .

Як пропонує @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
}

Ви також можете ознайомитись із цим дописом у блозі про те, як вимкнути правила ESLint, спеціально для розміщення посібника стилю AirBnB.

Як пояснюється в цій статті , це правило призначене для уникнення мутації argumentsоб’єкта . Якщо призначити параметру, а потім спробувати отримати доступ до деяких параметрів через argumentsоб’єкт, це може призвести до несподіваних результатів.

Ви можете зберегти правило цілим і підтримувати стиль AirBnB, використовуючи іншу змінну, щоб отримати посилання на елемент DOM, а потім змінити це:

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 }]підходом з кількома згаданими відповідями. Змінення властивості параметра не змінює те, на що посилається цей параметр, і не повинно натрапляти на типи проблем, яких намагається уникнути це правило.

Ви можете замінити це правило у своєму .eslintrcфайлі та вимкнути його для таких властивостей параметрів, як це

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

Правило цього способу все ще активне, але воно не буде попереджати про властивості. Більше інформації: http://eslint.org/docs/rules/no-param-reassign

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
});

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

Все інше - це просто потворні хаки.

Бажаючих вибірково деактивувати це правило може зацікавити запропонована нова опція для no-param-reassignправила, яка дозволить "білий список" імен об'єктів, відносно яких перепризначення параметрів слід ігнорувати.

Слідуючи документації :

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

Ви також можете використовувати lodash, assignInякий мутує об'єкт. assignIn(obj, { someNewObj });

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

Ви можете використовувати методи оновлення даних. Напр. "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;
});

Ви можете використовувати:

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

Якщо ви хочете змінити будь-яке значення всередині масиву об’єктів, ви можете використовувати

array.forEach(a => ({ ...a, expando: {} }))