Cách tránh gán lại no-param khi đặt thuộc tính trên đối tượng DOM

Tôi có một phương pháp với mục đích chính là đặt thuộc tính trên đối tượng DOM

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

Tôi sử dụng kiểu mã của AirBnB khiến ESLint no-param-reassigngặp lỗi:

lỗi Gán cho tham số hàm 'el' no-param-reassign

Làm cách nào để tôi có thể thao tác một đối tượng DOM được truyền dưới dạng đối số trong khi tuân thủ kiểu mã của AirBnB?

Ai đó đã đề xuất sử dụng /* eslint react/prop-types: 0 */đề cập đến vấn đề khác nhưng nếu tôi không nhầm thì điều này áp dụng tốt cho phản ứng, nhưng không áp dụng cho thao tác DOM gốc.

Ngoài ra, tôi không nghĩ rằng thay đổi kiểu mã là một câu trả lời. Tôi tin rằng một trong những lợi ích của việc sử dụng kiểu chuẩn là có mã nhất quán giữa các dự án và thay đổi các quy tắc theo ý muốn giống như việc sử dụng sai kiểu mã chính như của AirBnB.

Đối với hồ sơ, tôi đã hỏi AirBnB trên GitHub, họ nghĩ đâu là cách để thực hiện trong những trường hợp này trong số 766 .

Như @Mathletics đề xuất, bạn có thể tắt hoàn toàn quy tắc bằng cách thêm quy tắc này vào .eslintrc.jsontệp của mình :

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

Hoặc bạn có thể vô hiệu hóa quy tắc dành riêng cho thuộc tính tham số

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

Ngoài ra, bạn có thể tắt quy tắc cho chức năng đó

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

Hoặc chỉ cho dòng đó

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

Bạn cũng có thể xem bài đăng trên blog này về cách tắt các quy tắc ESLint cụ thể để phù hợp với hướng dẫn phong cách của AirBnB.

Như bài viết này giải thích , quy tắc này nhằm tránh làm thay đổi argumentsđối tượng . Nếu bạn gán cho một tham số và sau đó thử và truy cập một số tham số thông qua argumentsđối tượng, nó có thể dẫn đến kết quả không mong muốn.

Bạn có thể giữ nguyên quy tắc và duy trì kiểu AirBnB bằng cách sử dụng một biến khác để nhận tham chiếu đến phần tử DOM và sau đó sửa đổi:

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

Trong các đối tượng JS (bao gồm cả các nút DOM) được truyền bằng tham chiếu, vì vậy đây elvà theElementlà các tham chiếu đến cùng một nút DOM, nhưng việc sửa đổi theElementkhông làm thay đổi argumentsđối tượng vì arguments[0]vẫn chỉ là một tham chiếu đến phần tử DOM đó.

Cách tiếp cận này được gợi ý trong tài liệu cho quy tắc :

Ví dụ về mã đúng cho quy tắc này:

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

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

Cá nhân tôi sẽ chỉ sử dụng "no-param-reassign": ["error", { "props": false }]cách tiếp cận một vài câu trả lời khác đã đề cập. Việc sửa đổi một thuộc tính của tham số không làm thay đổi những gì tham số đó đề cập đến và sẽ không gặp phải các loại vấn đề mà quy tắc này đang cố gắng tránh.

Bạn có thể ghi đè quy tắc này bên trong .eslintrctệp của mình và vô hiệu hóa nó đối với các thuộc tính param như thế này

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

Quy tắc theo cách này vẫn hoạt động nhưng nó sẽ không cảnh báo cho các thuộc tính. Thông tin thêm: http://eslint.org/docs/rules/no-param-reassign

Các no-param-reassign cảnh báo có ý nghĩa cho các chức năng thông thường, nhưng đối với một cổ điển Array.forEachvòng lặp trên một mảng mà bạn có ý định đột biến nó không phải là để chiếm đoạt.

Tuy nhiên, để giải quyết vấn đề này, bạn cũng có thể sử dụng Array.mapvới một đối tượng mới (nếu bạn giống tôi, không thích báo lại cảnh báo bằng nhận xét):

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

Mọi thứ khác chỉ là những bản hack xấu xí.

Những người muốn hủy kích hoạt có chọn lọc quy tắc này có thể quan tâm đến một tùy chọn mới được đề xuất cho no-param-reassignquy tắc sẽ cho phép "danh sách trắng" các tên đối tượng liên quan đến việc gán lại tham số sẽ bị bỏ qua.

Sau tài liệu :

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

Bạn cũng có thể sử dụng lodash assignInđể thay đổi đối tượng. assignIn(obj, { someNewObj });

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

Bạn có thể sử dụng các phương pháp để cập nhật dữ liệu. Ví dụ. "res.status (404)" thay vì "res.statusCode = 404" Tôi đã tìm thấy giải pháp. 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;
});

Bạn có thể dùng:

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

Nếu bạn muốn thay đổi bất kỳ giá trị nào bên trong một mảng đối tượng, bạn có thể sử dụng

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