web-dev-qa-db-fra.com

Comment éviter la non-réaffectation de paramètres lors de la définition d'une propriété sur un objet DOM

J'ai une méthode dont le but principal est de définir une propriété sur un objet DOM

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

J'utilise le style de code d'AirBnB qui oblige ESLint à lancer une erreur no-param-reassign:

error Affectation au paramètre de fonction 'el' no-param-re-réaffecter

Comment puis-je manipuler un objet DOM passé comme argument tout en conformant le style de code d'AirBnB?

Quelqu'un a suggéré d'utiliser /* eslint react/prop-types: 0 */ en faisant référence à n autre problème mais si je ne me trompe pas, cela s'applique bien à react, mais pas à la manipulation de DOM natif.

Aussi, je ne pense pas que changer le style du code soit une réponse. Je pense que l'un des avantages de l'utilisation d'un style standard est d'avoir un code cohérent dans tous les projets et de modifier les règles à volonté, c'est comme une mauvaise utilisation d'un style de code majeur comme celui d'AirBnB.

Pour mémoire, j'ai demandé à AirBnB sur GitHub, quelle était, selon eux, la voie à suivre dans ces cas dans le numéro 766 .

javascriptdomeslint
69
Lukas

Comme @Mathletics le suggère, vous pouvez désactiver la règle entièrement en ajoutant ceci à votre fichier .eslintrc.json:

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

Ou vous pouvez désactiver la règle spécifiquement pour les propriétés param

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

Alternativement, vous pouvez désactiver la règle pour cette fonction

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

Ou pour cette ligne seulement

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

Vous pouvez également vérifier ceci article de blog sur la désactivation des règles ESLint spécifiquement pour s'adapter au guide de style d'AirBnB.

82
sfletche

Comme cet article explique , cette règle a pour but d'éviter de transformer le arguments object . Si vous affectez un paramètre puis essayez d'accéder à certains paramètres via l'objet arguments, des résultats inattendus peuvent en résulter.

Vous pouvez conserver la règle intacte et conserver le style AirBnB en utilisant une autre variable pour obtenir une référence à l'élément DOM, puis modifiez ce qui suit:

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

Dans JS, les objets (y compris les nœuds DOM) sont transmis par référence. Ainsi, ici, el et theElement sont des références au même nœud DOM, mais la modification de theElement ne modifie pas l'objet arguments, car arguments[0] ne reste qu'une référence à cet élément DOM. .

Cette approche est suggérée dans documentation de la règle :

Exemples de code correct pour cette règle:

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

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

Personnellement, je voudrais simplement utiliser l’approche "no-param-reassign": ["error", { "props": false }] avec quelques autres réponses mentionnées. La modification d'une propriété du paramètre ne modifie pas ce à quoi ce paramètre fait référence et ne devrait pas rencontrer le type de problèmes que cette règle tente d'éviter.

54
Useless Code

Vous pouvez remplacer cette règle dans votre fichier .eslintrc et la désactiver pour les propriétés param telles que celle-ci.

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

Cette règle de chemin est toujours active mais elle ne vous avertira pas des propriétés. Plus d'infos: http://eslint.org/docs/rules/no-param-reassign

20
Gyandeep

L’avertissement no-param-reassign convient aux fonctions courantes, mais une boucle Array.forEach classique sur un tableau que vous souhaitez muter n’est pas appropriée.

Cependant, pour contourner ce problème, vous pouvez également utiliser Array.map avec un nouvel objet (si vous êtes comme moi, n'aimez pas les avertissements sifflants avec des commentaires):

someArray = someArray.map((_item) => {
    let item = Object.assign({}, _item); // decouple instance
    item.foo = "bar"; // assign a property
    return item; // replace original with new instance
});
6
Justus Romijn

Ceux qui souhaitent désactiver cette règle de manière sélective pourraient être intéressés par une règle nouvelle option proposée pour la règle no-param-reassign qui autoriserait une "liste blanche" de noms d'objet pour lesquels le réattribution de paramètre devrait être ignoré .

2
RH Becker

Après le documentation :

function (el) {
  const element = el
  element.expando = {}
}
1
Victor Santos

Vous pouvez également utiliser lodash assignIn qui mue l'objet. assignIn(obj, { someNewObj });

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

0
Jazzy

Vous pouvez utiliser des méthodes pour mettre à jour les données. Par exemple. "res.status (404)" au lieu de "res.statusCode = 404" J'ai trouvé la solution. https://github.com/eslint/eslint/issues/6505#issuecomment-2823259

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

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