Comment éviter la réassignation sans paramètre 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 fait qu'ESLint génère une no-param-reassignerreur:

erreur Affectation au paramètre de fonction 'el' no-param-réassigner

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

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

Je ne pense pas non plus que changer le style de 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 changer les règles à volonté ressemble à une mauvaise utilisation d'un style de code majeur comme celui d'AirBnB.

Pour mémoire, j'ai demandé à AirBnB sur GitHub ce qu'ils pensent être la voie à suivre dans ces cas dans le numéro 766 .

Comme @Mathletics le suggère, vous pouvez désactiver complètement la règle en l'ajoutant à votre .eslintrc.jsonfichier:

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

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

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

Vous pouvez également 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 consulter cet article de blog sur la désactivation des règles ESLint spécifiquement pour s'adapter au guide de style d'AirBnB.

Comme cet article l'explique , cette règle vise à éviter la mutation de l' argumentsobjet . Si vous affectez à un paramètre, puis essayez d'accéder à certains paramètres via l' argumentsobjet, cela peut conduire à des résultats inattendus.

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 modifier cela:

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

Dans JS, les objets (y compris les nœuds DOM) sont passés par référence, donc ici elet theElementsont des références au même nœud DOM, mais la modification theElementne mute pas l' argumentsobjet puisque arguments[0]reste juste une référence à cet élément DOM.

Cette approche est suggérée dans la 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, j'utiliserais simplement l' "no-param-reassign": ["error", { "props": false }]approche de 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 les types de problèmes que cette règle tente d'éviter.

Vous pouvez remplacer cette règle dans votre .eslintrcfichier et la désactiver pour des propriétés de paramètres comme celle-ci

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

Cette règle de façon est toujours active mais elle n'avertit pas les propriétés. Plus d'infos: http://eslint.org/docs/rules/no-param-reassign

L' no-param-reassignavertissement a du sens pour les fonctions courantes, mais pour une Array.forEachboucle classique sur un tableau que vous avez l'intention de muter, il n'est pas approprié.

Cependant, pour contourner cela, vous pouvez également utiliser Array.mapavec un nouvel objet (si vous êtes comme moi, n'aimez pas répéter les avertissements 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
});

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

Tout le reste n'est que de vilains hacks.

Ceux qui souhaitent désactiver sélectivement cette règle pourraient être intéressés par une nouvelle option proposée pour la no-param-reassignrègle qui autoriserait une «liste blanche» de noms d'objet par rapport à la réaffectation des paramètres à ignorer.

Suite à la documentation :

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

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

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

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-282325903

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

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

Vous pouvez utiliser:

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

Si vous souhaitez modifier une valeur dans un tableau d'objets, vous pouvez utiliser

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