So vermeiden Sie eine Neuzuweisung ohne Parameter, wenn Sie eine Eigenschaft für ein DOM-Objekt festlegen

Ich habe eine Methode, deren Hauptzweck darin besteht, eine Eigenschaft für ein DOM-Objekt festzulegen

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

Ich verwende den Code-Stil von AirBnB, wodurch ESLint einen no-param-reassignFehler auslöst :

Fehler Zuordnung zum Funktionsparameter 'el' no-param-Neuzuweisung

Wie kann ich ein als Argument übergebenes DOM-Objekt manipulieren und dabei den Codestil von AirBnB anpassen?

Jemand schlug vor, /* eslint react/prop-types: 0 */auf ein anderes Problem zu verweisen, aber wenn ich mich nicht irre, gilt dies gut für die Reaktion, aber nicht für die native DOM-Manipulation.

Ich denke auch nicht, dass das Ändern des Codestils eine Antwort ist. Ich glaube, einer der Vorteile der Verwendung eines Standardstils besteht darin, dass projektübergreifender Code konsistent ist und das Ändern der Regeln nach Belieben wie ein Missbrauch eines wichtigen Codestils wie AirBnBs wirkt.

Für die Aufzeichnung habe ich AirBnB auf GitHub gefragt, was ihrer Meinung nach der richtige Weg in diesen Fällen in Ausgabe 766 ist .

Wie @Mathletics vorschlägt, können Sie die Regel vollständig deaktivieren, indem Sie sie Ihrer .eslintrc.jsonDatei hinzufügen :

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

Oder Sie können die Regel speziell für param-Eigenschaften deaktivieren

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

Alternativ können Sie die Regel für diese Funktion deaktivieren

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

Oder nur für diese Zeile

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

Sie können auch diesen Blog-Beitrag zum Deaktivieren von ESLint-Regeln lesen, um den AirBnB-Styleguide zu berücksichtigen.

Wie in diesem Artikel erläutert , soll mit dieser Regel eine Mutation des argumentsObjekts vermieden werden . Wenn Sie einem Parameter zuweisen und dann versuchen, über das argumentsObjekt auf einige der Parameter zuzugreifen , kann dies zu unerwarteten Ergebnissen führen.

Sie können die Regel beibehalten und den AirBnB-Stil beibehalten, indem Sie eine andere Variable verwenden, um einen Verweis auf das DOM-Element abzurufen, und dann Folgendes ändern:

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

In JS werden Objekte (einschließlich DOM-Knoten) als Referenz übergeben, also hier elund theElementVerweise auf denselben DOM-Knoten, aber das Ändern theElementmutiert das argumentsObjekt nicht, da es arguments[0]nur eine Referenz auf dieses DOM-Element bleibt.

Dieser Ansatz wird in der Dokumentation zur Regel angedeutet :

Beispiele für korrekten Code für diese Regel:

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

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

Persönlich würde ich nur "no-param-reassign": ["error", { "props": false }]einige andere Antworten verwenden. Das Ändern einer Eigenschaft des Parameters ändert nicht, worauf sich dieser Parameter bezieht, und sollte nicht auf die Art von Problemen stoßen, die diese Regel zu vermeiden versucht.

Sie können diese Regel in Ihrer .eslintrcDatei überschreiben und für solche Parametereigenschaften deaktivieren

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

Auf diese Weise ist die Regel weiterhin aktiv, warnt jedoch nicht vor Eigenschaften. Weitere Informationen: http://eslint.org/docs/rules/no-param-reassign

Die no-param-reassignWarnung ist für allgemeine Funktionen sinnvoll, aber für eine klassische Array.forEachSchleife über ein Array, das Sie mutieren möchten, ist sie nicht geeignet.

Um dies zu Array.mapumgehen , können Sie es jedoch auch mit einem neuen Objekt verwenden (wenn Sie wie ich sind, mögen Sie es nicht, Warnungen mit Kommentaren zu dösen):

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

Alles andere sind nur hässliche Hacks.

Diejenigen, die diese Regel selektiv deaktivieren möchten, könnten an einer vorgeschlagenen neuen Option für die no-param-reassignRegel interessiert sein , die eine "weiße Liste" von Objektnamen ermöglicht, in Bezug auf die die Neuzuweisung von Parametern ignoriert werden sollte.

Befolgen Sie die Dokumentation :

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

Sie können auch lodash verwenden, assignIndas das Objekt mutiert. assignIn(obj, { someNewObj });

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

Sie können Methoden zum Aktualisieren von Daten verwenden. Z.B. "res.status (404)" anstelle von "res.statusCode = 404" Ich habe die Lösung gefunden. 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;
});

Sie können verwenden:

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

Wenn Sie einen Wert innerhalb eines Objektarrays ändern möchten, können Sie verwenden

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