DOM 객체에 속성을 설정할 때 매개 변수 재 할당을 방지하는 방법
주요 목적은 DOM 개체에 속성을 설정하는 것입니다.
function (el) {
el.expando = {};
}
ESLint에서 no-param-reassign
오류를 발생 시키는 AirBnB의 코드 스타일을 사용 합니다.
함수 매개 변수 'el'에 대한 오류 할당 no-param-reassign
AirBnB의 코드 스타일을 준수하면서 인수로 전달 된 DOM 객체를 어떻게 조작 할 수 있습니까?
누군가 /* eslint react/prop-types: 0 */
가 다른 문제를 참조하는 것을 제안 했지만 내가 착각하지 않는다면 이것은 반응에 잘 적용되지만 네이티브 DOM 조작에는 적용되지 않습니다.
또한 코드 스타일을 변경하는 것이 답이라고 생각하지 않습니다. 표준 스타일을 사용하는 이점 중 하나는 프로젝트 전반에 걸쳐 일관된 코드를 갖는 것이며 규칙을 마음대로 변경하는 것은 AirBnB와 같은 주요 코드 스타일을 오용하는 것처럼 느껴집니다.
기록을 위해 GitHub의 AirBnB에 질문 # 766 에서 이러한 경우 에 대처할 방법이 무엇이라고 생각하는지 물었습니다 .
@Mathletics가 제안한 것처럼 파일에 다음 을 추가 하여 규칙을 완전히 비활성화 할 수 있습니다 .eslintrc.json
.
"rules": {
"no-param-reassign": 0
}
또는 특별히 param 속성에 대한 규칙을 비활성화 할 수 있습니다.
"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
}
특히 AirBnB의 스타일 가이드를 수용하기 위해 ESLint 규칙 비활성화에 대한 이 블로그 게시물 을 확인할 수도 있습니다 .
이 기사에서 설명하는 것처럼 이 규칙은 arguments
객체의 변형을 방지하기위한 것 입니다. 매개 변수에 할당 한 다음 arguments
개체 를 통해 일부 매개 변수에 액세스하려고 하면 예기치 않은 결과가 발생할 수 있습니다.
규칙을 그대로 유지하고 다른 변수를 사용하여 DOM 요소에 대한 참조를 가져온 다음 수정하여 AirBnB 스타일을 유지할 수 있습니다.
function (el) {
var theElement = el;
theElement.expando = {};
}
(DOM 노드 포함) JS 개체에서, 그래서 여기에 참조로 전달 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
});
이 규칙을 선택적으로 비활성화하려는 사람들은 제안 된 새로운 옵션 에 관심이있을 수 있습니다 .no-param-reassign
매개 변수 재 할당을 무시해야하는 객체 이름의 "화이트리스트"를 허용하는 규칙 .
문서에 따라 :
function (el) {
const element = el
element.expando = {}
}
assignIn
객체를 변경하는 lodash 를 사용할 수도 있습니다 . assignIn(obj, { someNewObj });
https://lodash.com/docs/4.17.2#assignIn
데이터 업데이트 방법을 사용할 수 있습니다. 예 : "res.statusCode = 404"대신 "res.status (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;
});
You can use:
(param) => {
const data = Object.assign({}, param);
data.element = 'some value';
}
'Development Tip' 카테고리의 다른 글
mail () 함수에 대한 오류 메시지를 어떻게 얻을 수 있습니까? (0) | 2020.10.29 |
---|---|
파이썬에서 numpy.linalg.eig를 사용한 후 고유 값 및 관련 고유 벡터 정렬 (0) | 2020.10.29 |
ESLint 달러 ($)가 정의되지 않았습니다. (0) | 2020.10.28 |
ArrayList에 Java의 객체가 포함되어 있는지 확인하는 가장 효율적인 방법 (0) | 2020.10.28 |
Java-문자열을 유효한 URI 객체로 변환 (0) | 2020.10.28 |