Come evitare no-param-riassegnare quando si imposta una proprietà su un oggetto DOM

Question

Ho un metodo che il suo scopo principale è quello di impostare una proprietà su un oggetto DOM

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

io uso lo stile del codice di AirBnB che rende ESLint lanciare un errore no-param-reassign:

error Assignment to function parameter 'el' no-param-reassign

come posso manipolare un oggetto DOM passato come argomento mentre adeguatamente stile del codice di AirBnB?

Qualcuno ha suggerito di utilizzare /* eslint react/prop-types: 0 */ riferendosi a another issue ma se non sbaglio si applica bene per reagire, ma non per la manipolazione del DOM nativo.

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

Per la cronaca, ho chiesto ad AirBnB su GitHub, quello che pensano sia la strada da percorrere in questi casi in issue #766.

Answer 1

Come @Mathletics suggerisce, è possibile disable the rule del tutto con l'aggiunta di questo al vostro file di .eslintrc.json:

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

Oppure si potrebbe disabilitare la regola specificamente per le proprietà param

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

alternativa, è possibile disabilitare la regola per quella funzione

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

O per quella linea solo

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

Si potrebbe anche verificare questo blog post sulla disattivazione ESLint regole appositamente per accogliere guida di stile di Airbnb.

Answer 2

È possibile ignorare questa regola dentro il file .eslintrc e disattivarla per le proprietà param come questo

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

Questa regola strada è ancora attiva ma non sarà in guardia per le proprietà. Maggiori informazioni: http://eslint.org/docs/rules/no-param-reassign

Answer 3

è possibile utilizzare:

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

Answer 4

Coloro che desiderano disattivare selettivamente questa regola potrebbe essere interessato a un proposed new option per il no-param-reassign regola che permetterebbe una "lista bianca" dei nomi degli oggetti rispetto a quale parametro la riassegnazione dovrebbe essere ignorata.

Answer 5

È inoltre possibile utilizzare lodash assignIn che muta l'oggetto. assignIn(obj, { someNewObj });

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

Answer 6

Come this article explains, questa regola ha lo scopo di evitare di mutare il arguments object.Se si assegna a un parametro e poi si prova ad accedere ad alcuni dei parametri tramite l'oggetto arguments, può portare a risultati imprevisti.

Si potrebbe mantenere la regola intatto e mantenere lo stile AirBnB utilizzando un'altra variabile per ottenere un riferimento all'elemento DOM e quindi modificare che:

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

Negli oggetti JS (compresi nodi DOM) sono passati per riferimento, quindi qui el e theElement sono riferimenti allo stesso nodo DOM, ma la modifica di theElement non modifica l'oggetto arguments poiché arguments[0] rimane solo un riferimento a tale elemento DOM.

Questo approccio è accennato nel documentation for the rule:

Examples of correct code for this rule:

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

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

Personalmente, vorrei solo usare l'approccio "no-param-reassign": ["error", { "props": false }] un paio di altre risposte menzionati. La modifica di una proprietà del parametro non muta ciò a cui si riferisce quel parametro e non deve essere eseguito nei tipi di problemi che questa regola tenta di evitare.

Answer 7

È possibile utilizzare i metodi per l'aggiornamento dei 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; 
}); 

Answer 8

Dopo la documentation:

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