Bir DOM nesnesi üzerinde bir özellik ayarlarken parametrenin yeniden atanmaması nasıl önlenir

Ana amacı bir DOM nesnesi üzerinde bir özellik ayarlamak olan bir yöntemim var

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

AirBnB'nin ESLint'in bir no-param-reassignhata atmasına neden olan kod stilini kullanıyorum :

error 'el' no-param-reassign fonksiyon parametresine atama

AirBnB'nin kod stilini uygularken bağımsız değişken olarak iletilen bir DOM nesnesini nasıl değiştirebilirim?

Birisi başka bir soruna/* eslint react/prop-types: 0 */ atıfta bulunmayı önerdi, ancak yanılmıyorsam bu tepki için iyi, ancak yerel DOM manipülasyonu için geçerli değil.

Ayrıca kod stilini değiştirmenin bir cevap olduğunu düşünmüyorum. Standart bir stil kullanmanın faydalarından birinin projeler arasında tutarlı koda sahip olmak olduğuna inanıyorum ve kuralları istediğiniz zaman değiştirmek AirBnB'ler gibi büyük bir kod stilinin kötüye kullanılması gibi geliyor.

Kayıt için GitHub'da AirBnB'ye, 766 numaralı sayıdaki bu durumlarda gitmenin yolunun ne olduğunu sordum .

@Mathletics'in önerdiği gibi, bunu dosyanıza ekleyerek kuralı tamamen devre dışı bırakabilirsiniz.eslintrc.json :

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

Ya da kuralı özellikle param özellikleri için devre dışı bırakabilirsiniz

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

Alternatif olarak, o işlev için kuralı devre dışı bırakabilirsiniz

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

Veya sadece bu satır için

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

Ayrıca , özellikle AirBnB'nin stil kılavuzuna uyum sağlamak için ESLint kurallarını devre dışı bırakma hakkındaki bu blog gönderisine de göz atabilirsiniz .

Gibi bu makalede anlatılmaktadır , bu kural mutasyona önlemek içindir argumentsnesneyi . Bir parametreye atarsanız ve daha sonra argumentsnesne aracılığıyla bazı parametrelere erişmeye çalışırsanız , beklenmedik sonuçlara yol açabilir.

DOM öğesine bir referans almak için başka bir değişken kullanarak kuralı olduğu gibi koruyabilir ve AirBnB stilini koruyabilir ve ardından bunu değiştirebilirsiniz:

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

(DOM düğümlerinin dahil) JS nesnelerde bu nedenle burada referans olarak geçirilir elve theElementaynı DOM düğüme referanslar, ancak tadil theElementmutasyona etmez argumentsçünkü nesne arguments[0]kalıntıları DOM elemanı için sadece bir referans.

Bu yaklaşım, kuralın belgelerinde belirtilmiştir :

Bu kural için doğru kod örnekleri:

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

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

Kişisel olarak, "no-param-reassign": ["error", { "props": false }]bahsedilen yaklaşımı birkaç diğer cevapta kullanırım. Bir parametrenin bir özelliğini değiştirmek, o parametrenin neyi ifade ettiğini değiştirmez ve bu kuralın kaçınmaya çalıştığı sorun türleriyle karşılaşmamalıdır.

Bu kuralı .eslintrcdosyanızın içinde geçersiz kılabilir ve bunun gibi parametre özellikleri için devre dışı bırakabilirsiniz.

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

Bu şekilde kural hala etkindir ancak özellikler için uyarmaz. Daha fazla bilgi: http://eslint.org/docs/rules/no-param-reassign

no-param-reassignUyarı ortak fonksiyonlar için mantıklı ama klasik için Array.forEachbunu mutasyona niyetinde dizisi üzerinde döngü uygun kaynaklarına değildir.

Bununla birlikte, bunu Array.mapaşmak için yeni bir nesne ile de kullanabilirsiniz (eğer benim gibiyseniz, uyarıları yorumlarla ertelemekten hoşlanmayın):

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

Diğer her şey sadece çirkin hackler.

Bu kuralı seçici olarak devre dışı bırakmak isteyenler, hangi parametre yeniden atamasının göz ardı edilmesi gerektiği ile ilgili olarak nesne adlarının bir "beyaz listesine" izin verecek olan kural için önerilen yeni bir seçenekle ilgilenebilirler no-param-reassign.

Belgelerin ardından :

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

assignInNesneyi değiştiren lodash'ı da kullanabilirsiniz . assignIn(obj, { someNewObj });

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

Verileri güncellemek için yöntemler kullanabilirsiniz. Örneğin. "res.statusCode = 404" yerine "res.status (404)" çözümü buldum. 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;
});

Kullanabilirsiniz:

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

Bir nesne dizisi içindeki herhangi bir değeri değiştirmek istiyorsanız, şunu kullanabilirsiniz:

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