Come evitare la riassegnazione dei parametri quando si imposta una proprietà su un oggetto DOM

Ho un metodo il cui scopo principale è impostare una proprietà su un oggetto DOM

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

Uso lo stile del codice di AirBnB che fa sì che ESLint generi un no-param-reassignerrore:

errore Assegnazione al parametro funzione 'el' no-param-reassign

Come posso manipolare un oggetto DOM passato come argomento mentre conformo lo stile del codice di AirBnB?

Qualcuno ha suggerito di usare /* eslint react/prop-types: 0 */riferendosi a un altro problema, ma se non sbaglio questo vale per React, ma non per la manipolazione DOM nativa.

Inoltre non credo che cambiare lo stile del codice sia una risposta. Credo che uno dei vantaggi dell'utilizzo di uno stile standard sia avere un codice coerente tra i progetti e cambiare le regole a piacimento sembra un uso improprio di uno stile di codice importante come quello di AirBnB.

Per la cronaca, ho chiesto ad AirBnB su GitHub, quale pensano sia la strada da percorrere in questi casi nel numero 766 .

Come suggerisce @Mathletics, puoi disabilitare completamente la regola aggiungendo questo al tuo .eslintrc.jsonfile:

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

Oppure puoi disabilitare la regola specificamente per le proprietà param

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

In alternativa, puoi disabilitare la regola per quella funzione

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

O solo per quella linea

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

Potresti anche controllare questo post del blog sulla disabilitazione delle regole ESLint appositamente per ospitare la guida di stile di AirBnB.

Come spiega questo articolo , questa regola ha lo scopo di evitare di mutare l' argumentsoggetto . Se si assegna un parametro e poi si tenta di accedere ad alcuni parametri tramite l' argumentsoggetto, si possono ottenere risultati imprevisti.

È possibile mantenere intatta la regola e mantenere lo stile AirBnB utilizzando un'altra variabile per ottenere un riferimento all'elemento DOM e quindi modificarlo:

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

In JS gli oggetti (inclusi i nodi DOM) vengono passati per riferimento, quindi qui ele theElementsono riferimenti allo stesso nodo DOM, ma la modifica theElementnon muta l' argumentsoggetto poiché arguments[0]rimane solo un riferimento a quell'elemento DOM.

Questo approccio è accennato nella documentazione per la regola :

Esempi di codice corretto per questa regola:

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

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

Personalmente, userei semplicemente l' "no-param-reassign": ["error", { "props": false }]approccio menzionato da un paio di altre risposte. La modifica di una proprietà del parametro non muta ciò a cui si riferisce quel parametro e non dovrebbe incorrere nei tipi di problemi che questa regola sta cercando di evitare.

Puoi sovrascrivere questa regola all'interno del tuo .eslintrcfile e disabilitarla per proprietà param come questa

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

In questo modo la regola è ancora attiva ma non avviserà per le proprietà. Maggiori informazioni: http://eslint.org/docs/rules/no-param-reassign

L' no-param-reassignavviso ha senso per le funzioni comuni, ma per un Array.forEachciclo classico su un array che si intende mutare non è appropriato.

Tuttavia, per aggirare questo problema, puoi anche usarlo Array.mapcon un nuovo oggetto (se sei come me, non mi piacciono gli avvisi di posticipazione con commenti):

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

Tutto il resto è solo brutti hack.

Coloro che desiderano disattivare selettivamente questa regola potrebbero essere interessati a una nuova opzione proposta per la no-param-reassignregola che consentirebbe una "lista bianca" di nomi di oggetti rispetto a cui la riassegnazione dei parametri dovrebbe essere ignorata.

Di seguito la documentazione :

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

Puoi anche usare lodash assignInche muta l'oggetto. assignIn(obj, { someNewObj });

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

È possibile utilizzare metodi per aggiornare i dati. Per esempio. "res.status (404)" invece di "res.statusCode = 404" ho trovato la soluzione. 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;
});

Puoi usare:

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

Se vuoi cambiare qualsiasi valore all'interno di un array di oggetti, puoi usare

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