3

我想了解你们如何避免eslint 警告 "Assignment to property of function parameter 'elem'"。我知道这是一个很好的模式，不要更改函数参数值。这使我们的代码保持解耦并具有高维护性。但是，在某些情况下，我遇到了以下情况。我需要检索具有特定类的所有元素，然后更改其显示样式属性。这是我的代码：

const setDisplayStyleToElementsArray = (arr, display) => {
  arr.map((elem) => {
    elem.style.display = display;
    return elem;
  });
};

const elements = document.getElementsByClassName('.myClass');

const myFields = [].slice.call(elements, 0);

setDisplayStyleToElementsArray(myFields, 'block');

在这种情况下，我正在更改所有 .myClass 元素的属性“块”。如何做到这一点没有副作用？这样做的正确方法是什么？提前致谢

4

2 回答 2

0

我要换房。如何做到这一点没有副作用？

你不能。更改该 DOM 属性是一个副作用。如果您的 linter 阻止您这样做，请禁用它（至少在该行上）。

当然，这个特定规则可以通过简单地不使用map或回调函数来避免。更惯用的是

function setDisplayStyles(arr, display) {
  for (const elem of arr) {
    elem.style.display = display;
  }
}

const elements = Array.from(document.getElementsByClassName('.myClass'));
setDisplayStyles(elements, 'block');
于 2017-12-06T15:13:23.757 回答
0

首先，感谢所有评论，谢谢。在与我的同事以及在网络上对这个问题进行了一些研究之后，我遇到了Douglas Crockford 的演讲，其中谈到了这个问题。尽管上面的答案似乎简单而优雅，但它似乎并不是最具表现力的恕我直言。所以，如果有人对此有更好的意见，请告诉我。

基本上，我决定使用Object.keys(htmlCollection).forEach(...)而不是for，同意 Douglas Crockford 的想法。这样，codeclimate 没有发出任何警告，而且我的代码似乎更符合逻辑和流畅。

const setDisplayStyleToElementsArray = (arr, display) => {
	Object.keys(arr).forEach(field => arr[field].classList.add('hidden'));
};

const elements = [... document.getElementsByClassName('myClass')];
setDisplayStyleToElementsArray(elements, 'none');
.myClass {
  border: 1px solid red;
}

.hidden {
  border: 1px solid blue; //could be display: none;
}
<div class="myClass">One</div>
<div class="myClass">Two</div>

于 2017-12-09T21:24:20.110 回答