Jak uniknąć ponownego przypisywania parametrów podczas ustawiania właściwości obiektu DOM

Mam metodę, której głównym celem jest ustawienie właściwości obiektu DOM

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

Używam stylu kodu AirBnB, co sprawia, że ​​ESLint no-param-reassignwyświetla błąd:

error Przypisanie do parametru funkcji „el” no-param-re assigning

Jak mogę manipulować obiektem DOM przekazanym jako argument, zachowując zgodność ze stylem kodu AirBnB?

Ktoś zasugerował użycie w /* eslint react/prop-types: 0 */odniesieniu do innego problemu, ale jeśli się nie mylę, to odnosi się to dobrze do reagowania, ale nie do manipulacji natywnym DOM.

Nie sądzę też, żeby zmiana stylu kodu była odpowiedzią. Uważam, że jedną z zalet używania standardowego stylu jest posiadanie spójnego kodu we wszystkich projektach, a zmiana zasad do woli wydaje się być nadużyciem głównego stylu kodu, takiego jak AirBnB.

Dla przypomnienia, zapytałem AirBnB na GitHubie, co ich zdaniem jest dobrym rozwiązaniem w tych przypadkach w numerze 766 .

Jak sugeruje @Mathletics, możesz całkowicie wyłączyć regułę , dodając to do swojego .eslintrc.jsonpliku:

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

Możesz też wyłączyć regułę specjalnie dla właściwości parametrów

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

Alternatywnie możesz wyłączyć regułę dla tej funkcji

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

Albo tylko dla tej linii

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

Możesz również zapoznać się z tym wpisem na blogu dotyczącym wyłączania reguł ESLint, aby dostosować się do przewodnika stylistycznego AirBnB.

Jak wyjaśnia ten artykuł , ta reguła ma na celu uniknięcie mutacji argumentsobiektu . Jeśli przypiszesz parametr, a następnie spróbujesz uzyskać dostęp do niektórych parametrów za pośrednictwem argumentsobiektu, może to prowadzić do nieoczekiwanych wyników.

Możesz zachować regułę nienaruszoną i zachować styl AirBnB, używając innej zmiennej w celu uzyskania odniesienia do elementu DOM, a następnie zmodyfikuj to:

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

W JS obiekty (w tym węzły DOM) są przekazywane przez odniesienie, więc tutaj eli theElementsą referencjami do tego samego węzła DOM, ale modyfikowanie theElementnie powoduje mutacji argumentsobiektu, ponieważ arguments[0]pozostaje tylko odniesieniem do tego elementu DOM.

Takie podejście jest zasugerowane w dokumentacji reguły :

Przykłady poprawnego kodu dla tej reguły:

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

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

Osobiście użyłbym tylko "no-param-reassign": ["error", { "props": false }]kilku innych wymienionych odpowiedzi. Modyfikacja właściwości parametru nie powoduje mutacji tego, do czego odnosi się ten parametr i nie powinna powodować problemów, których ta reguła stara się uniknąć.

Możesz nadpisać tę regułę w swoim .eslintrcpliku i wyłączyć ją dla takich właściwości parametrów

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

W ten sposób reguła jest nadal aktywna, ale nie będzie ostrzegać o właściwościach. Więcej informacji: http://eslint.org/docs/rules/no-param-re assign

no-param-reassignOstrzeżenie sens dla typowych funkcji, ale za to klasycznyArray.forEach pętli nad tablicy którym zamierzasz go zmutować nie jest właściwe.

Aby jednak to obejść, możesz również użyć Array.mapnowego obiektu (jeśli jesteś podobny do mnie, nie lubisz odkładania ostrzeżeń z komentarzami):

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', {});
}

Wszystko inne to po prostu brzydkie hacki.

Ci, którzy chcą selektywnie dezaktywować tę regułę, mogą być zainteresowani proponowaną nową opcją dla no-param-reassignreguły, która umożliwiłaby „białą listę” nazw obiektów, w odniesieniu do których ponowne przypisanie parametrów powinno zostać zignorowane.

Zgodnie z dokumentacją :

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

Możesz także użyć lodash, assignInktóry mutuje obiekt. assignIn(obj, { someNewObj });

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

Możesz użyć metod aktualizacji danych. Na przykład. „res.status (404)” zamiast „res.statusCode = 404” znalazłem rozwiązanie. 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;
});

Możesz użyć:

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

Jeśli chcesz zmienić dowolną wartość w tablicy obiektów, możesz użyć

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