Bagaimana menghindari no-param-reassign saat menyetel properti pada objek DOM

Saya memiliki metode yang tujuan utamanya adalah menyetel properti pada objek DOM

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

Saya menggunakan gaya kode AirBnB yang membuat ESLint membuat no-param-reassignkesalahan:

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

Bagaimana cara memanipulasi objek DOM yang diteruskan sebagai argumen sambil menyesuaikan gaya kode AirBnB?

Seseorang menyarankan untuk menggunakan /* eslint react/prop-types: 0 */merujuk ke masalah lain tetapi jika saya tidak salah, ini berlaku dengan baik untuk bereaksi, tetapi tidak untuk manipulasi DOM asli.

Saya juga tidak berpikir mengubah gaya kode adalah sebuah jawaban. Saya percaya salah satu manfaat menggunakan gaya standar adalah memiliki kode yang konsisten di seluruh proyek dan mengubah aturan sesuka hati terasa seperti penyalahgunaan gaya kode utama seperti milik AirBnB.

Sebagai catatan, saya bertanya pada AirBnB di GitHub, menurut mereka apa yang harus dilakukan dalam kasus ini di edisi # 766 .

Seperti yang disarankan @Mathletics, Anda dapat menonaktifkan aturan sepenuhnya dengan menambahkan ini ke .eslintrc.jsonfile Anda :

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

Atau Anda dapat menonaktifkan aturan khusus untuk properti param

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

Atau, Anda dapat menonaktifkan aturan untuk fungsi itu

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

Atau hanya untuk jalur itu

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

Anda juga dapat melihat posting blog ini tentang menonaktifkan aturan ESLint secara khusus untuk mengakomodasi panduan gaya AirBnB.

Seperti yang dijelaskan artikel ini , aturan ini dimaksudkan untuk menghindari mutasi argumentsobjek . Jika Anda menetapkan ke parameter dan kemudian mencoba dan mengakses beberapa parameter melalui argumentsobjek, ini dapat menyebabkan hasil yang tidak diharapkan.

Anda bisa menjaga aturan tetap utuh dan mempertahankan gaya AirBnB dengan menggunakan variabel lain untuk mendapatkan referensi ke elemen DOM dan kemudian mengubahnya:

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

Dalam objek JS (termasuk node DOM) diteruskan oleh referensi, jadi di sini eldan theElementadalah referensi ke node DOM yang sama, tetapi memodifikasi theElementtidak mengubah argumentsobjek karena arguments[0]tetap hanya referensi ke elemen DOM tersebut.

Pendekatan ini diisyaratkan dalam dokumentasi untuk aturan tersebut :

Contoh kode yang benar untuk aturan ini:

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

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

Secara pribadi, saya hanya akan menggunakan "no-param-reassign": ["error", { "props": false }]pendekatan beberapa jawaban lain yang disebutkan. Memodifikasi properti parameter tidak mengubah apa yang dirujuk parameter tersebut dan tidak boleh mengalami jenis masalah yang coba dihindari aturan ini.

Anda dapat mengganti aturan ini di dalam .eslintrcfile Anda dan menonaktifkannya untuk properti param seperti ini

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

Aturan cara ini masih aktif tetapi tidak akan memperingatkan untuk properti. Info lebih lanjut: http://eslint.org/docs/rules/no-param-reassign

The no-param-reassignperingatan masuk akal untuk fungsi-fungsi umum, tapi untuk klasikArray.forEach loop atas sebuah array yang Anda berniat untuk bermutasi itu tidak untuk tepat.

Namun, untuk menyiasati ini, Anda juga dapat menggunakan Array.mapdengan objek baru (jika Anda seperti saya, tidak suka menunda peringatan dengan komentar):

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

Yang lainnya hanyalah peretasan yang jelek.

Mereka yang ingin menonaktifkan aturan ini secara selektif mungkin tertarik dengan opsi baru yang diusulkan untuk no-param-reassignaturan yang akan memungkinkan "daftar putih" nama objek sehubungan dengan penugasan ulang parameter mana yang harus diabaikan.

Berikut dokumentasinya :

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

Anda juga bisa menggunakan lodash assignInyang mengubah objek. assignIn(obj, { someNewObj });

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

Anda dapat menggunakan metode untuk memperbarui data. Misalnya. "res.status (404)" alih-alih "res.statusCode = 404" Saya menemukan solusinya. 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;
});

Kamu bisa memakai:

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

Jika Anda ingin mengubah nilai apa pun di dalam larik objek, Anda dapat menggunakan

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