วิธีหลีกเลี่ยงการไม่กำหนดพารามิเตอร์ใหม่เมื่อตั้งค่าคุณสมบัติบนวัตถุ DOM

ฉันมีวิธีการที่จุดประสงค์หลักคือการตั้งค่าคุณสมบัติบนวัตถุ DOM

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

ฉันใช้รูปแบบรหัสของ AirBnB ซึ่งทำให้ ESLint เกิดno-param-reassignข้อผิดพลาด:

ข้อผิดพลาดการกำหนดให้กับฟังก์ชันพารามิเตอร์ 'el' no-param-reassign

ฉันจะจัดการกับวัตถุ DOM ที่ส่งผ่านเป็นอาร์กิวเมนต์ในขณะที่สอดคล้องกับรูปแบบรหัสของ AirBnB ได้อย่างไร

มีคนแนะนำให้ใช้การ/* eslint react/prop-types: 0 */อ้างถึงปัญหาอื่นแต่ถ้าฉันจำไม่ผิดสิ่งนี้ใช้ได้ดีสำหรับการตอบสนอง แต่ไม่ใช่สำหรับการจัดการ DOM ดั้งเดิม

นอกจากนี้ฉันไม่คิดว่าการเปลี่ยนรูปแบบรหัสเป็นคำตอบ ฉันเชื่อว่าประโยชน์อย่างหนึ่งของการใช้รูปแบบมาตรฐานคือการมีรหัสที่สอดคล้องกันในทุกโปรเจ็กต์และการเปลี่ยนกฎที่จะทำให้รู้สึกเหมือนใช้รูปแบบรหัสหลักอย่าง AirBnB ในทางที่ผิด

สำหรับบันทึกที่ผมถาม Airbnb บน GitHub สิ่งที่พวกเขาคิดว่าเป็นวิธีที่จะไปในกรณีเหล่านี้ในรุ่นที่ 766

ตามที่ @Mathletics แนะนำคุณสามารถปิดใช้งานกฎทั้งหมดได้โดยเพิ่มสิ่งนี้ลงใน.eslintrc.jsonไฟล์ของคุณ:

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

หรือคุณสามารถปิดใช้งานกฎเฉพาะสำหรับคุณสมบัติพารามิเตอร์

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

หรือคุณสามารถปิดใช้งานกฎสำหรับฟังก์ชันนั้นได้

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

หรือสำหรับสายนั้นเท่านั้น

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

คุณอาจตรวจสอบบล็อกโพสต์นี้ เกี่ยวกับการปิดใช้งานกฎ ESLint โดยเฉพาะเพื่อรองรับคำแนะนำสไตล์ของ AirBnB

ขณะที่บทความนี้จะอธิบายถึงกฎนี้จะหมายถึงการหลีกเลี่ยงกรรมวิธีวัตถุarguments หากคุณกำหนดให้กับพารามิเตอร์แล้วลองเข้าถึงพารามิเตอร์บางตัวผ่านทางargumentsออบเจ็กต์อาจทำให้ได้ผลลัพธ์ที่ไม่คาดคิด

คุณสามารถทำให้กฎเหมือนเดิมและรักษาสไตล์ AirBnB ได้โดยใช้ตัวแปรอื่นเพื่อรับการอ้างอิงถึงองค์ประกอบ DOM จากนั้นแก้ไขสิ่งนั้น:

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

ในออบเจ็กต์ JS (รวมถึงโหนด DOM) จะถูกส่งผ่านโดยการอ้างอิงดังนั้นที่นี่elและtheElementเป็นการอ้างอิงไปยังโหนด DOM เดียวกัน แต่การปรับเปลี่ยนtheElementจะไม่ทำให้argumentsวัตถุกลายพันธุ์เนื่องจากarguments[0]ยังคงเป็นเพียงการอ้างอิงถึงองค์ประกอบ DOM นั้น

แนวทางนี้มีคำใบ้อยู่ในเอกสารสำหรับกฎ :

ตัวอย่างรหัสที่ถูกต้องสำหรับกฎนี้:

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

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

โดยส่วนตัวแล้วฉันจะใช้"no-param-reassign": ["error", { "props": false }]แนวทางสองสามคำตอบอื่น ๆ ที่กล่าวถึง การแก้ไขคุณสมบัติของพารามิเตอร์จะไม่เปลี่ยนสิ่งที่พารามิเตอร์นั้นอ้างถึงและไม่ควรพบปัญหาประเภทที่กฎนี้พยายามหลีกเลี่ยง

คุณสามารถแทนที่กฎนี้ภายใน.eslintrcไฟล์ของคุณและปิดใช้งานสำหรับคุณสมบัติพารามิเตอร์เช่นนี้

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

กฎวิธีนี้ยังคงทำงานอยู่ แต่จะไม่เตือนสำหรับคุณสมบัติ ข้อมูลเพิ่มเติม: http://eslint.org/docs/rules/no-param-reassign

no-param-reassignเตือนที่เหมาะสมสำหรับการทำงานร่วมกัน แต่สำหรับคลาสสิกArray.forEachวงมากกว่าอาร์เรย์ที่คุณตั้งใจจะเปลี่ยนแปลงมันไม่ได้เป็นไปตามความเหมาะสม

อย่างไรก็ตามเพื่อหลีกเลี่ยงปัญหานี้คุณสามารถใช้Array.mapกับวัตถุใหม่ได้ (หากคุณเป็นเหมือนฉันไม่ชอบการปิดเสียงเตือนชั่วคราวพร้อมความคิดเห็น):

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

อย่างอื่นเป็นเพียงการแฮ็กที่น่าเกลียด

ผู้ที่ต้องการเลือกปิดใช้งานกฎนี้อาจสนใจตัวเลือกใหม่ที่เสนอสำหรับno-param-reassignกฎที่อนุญาตให้ "รายการสีขาว" ของชื่อออบเจ็กต์เกี่ยวกับการกำหนดพารามิเตอร์ใหม่ที่ควรละเว้น

ทำตามเอกสารประกอบ :

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

คุณยังสามารถใช้ lodash assignInซึ่งทำให้วัตถุกลายพันธุ์ได้ assignIn(obj, { someNewObj });

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

คุณสามารถใช้วิธีการอัปเดตข้อมูล เช่น. "res.status (404)" แทน "res.statusCode = 404" ฉันพบวิธีแก้ปัญหา 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;
});

คุณสามารถใช้ได้:

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

หากคุณต้องการเปลี่ยนค่าใด ๆ ภายในอาร์เรย์วัตถุคุณสามารถใช้

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