Как избежать no-param-reassign при настройке свойства на объект DOM

У меня есть метод, который основной целью является установка свойства на объект DOM

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

Я использую стиль кода AirBnB, который заставляет ESLint вызывать ошибку no-param-reassign:

Ошибка Назначение параметру функции 'el' no-param-reassign

Как я могу манипулировать объектом DOM, переданным в качестве аргумента, в соответствии с стилем кода AirBnB?

Кто-то предложил использовать /* eslint react/prop-types: 0 */ со ссылкой на другую проблему, но если я не ошибаюсь, это хорошо подходит для реагирования, но не для собственных DOM-манипуляций.

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

Для записи я спросил AirBnB о GitHub, что, по их мнению, это способ пойти в этих случаях в выпуске # 766.

Ответы

Ответ 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.

Ответ 2

Вы можете переопределить это правило внутри вашего файла .eslintrc и отключить его для свойств param, таких как

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

Это правило остается активным, но оно не будет предупреждать о свойствах. Дополнительная информация: http://eslint.org/docs/rules/no-param-reassign

Ответ 3

Как эта статья объясняет, это правило предназначено для предотвращения мутации arguments объект. Если вы назначаете параметр, а затем пытаетесь получить доступ к некоторым параметрам с помощью объекта arguments, это может привести к неожиданным результатам.

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

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

В объектах JS (включая узлы DOM) передаются по ссылке, поэтому здесь el и theElement являются ссылками на один и тот же DOM node, но изменение theElement не мутирует объект arguments, поскольку arguments[0] остается только ссылкой на этот элемент DOM.

Этот подход намечен в документации для правила:

Примеры правильного кода для этого правила:

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

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

Лично я просто использовал бы подход "no-param-reassign": ["error", { "props": false }] несколько других упомянутых ответов. Изменение свойства параметра не влияет на то, к чему относится этот параметр, и не должно запускаться в те проблемы, которые это правило пытается избежать.

Ответ 4

Те, кто хочет выборочно деактивировать это правило, могут интересоваться предлагаемой новой опцией для правила no-param-reassign, которое позволило бы "белый список" имен объектов, относительно которых необходимо игнорировать параметр.

Ответ 5

Следуя документации:

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

Ответ 6

Вы также можете использовать lodash assignIn, который мутирует объект. assignIn(obj, { someNewObj });

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

Ответ 7

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

Ответ 8

Вы можете использовать:

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