在JavaScript中，我该如何将显示分配操作提取到两个函数中，每个函数接受一个元素参数？

问题描述：

我被要求将我的Javascript代码重构为多个函数（其中每个函数都执行一件事），而且我不知道该怎么做。我需要我的显示赋值操作是两个独立的函数，所有的值都应该作为参数/参数传递给函数，所以没有全局变量。我甚至不知道从哪里开始，我觉得这应该很容易，但我在这里绞尽脑汁。在JavaScript中，我该如何将显示分配操作提取到两个函数中，每个函数接受一个元素参数？

下面是HTML：

<body onload="changeChooser()"> 
    <h1>Monster Mash</h1> 
    <p>Pick your favorite monster from the dropdown!</p> 
    <select id="monsterChooser" onchange="changeChooser();"> 
     <option value="monsterContent">Monsters</option> 
     <option value="frankContent">Frankenstein</option> 
     <option value="draculaContent">Dracula</option> 
     <option value="wolfmanContent">Wolfman</option> 
     <option value="mummyContent">Mummy</option> 
     <option value="piggyContent">I hate monsters</option> 
     </select> 
    <div id="monsterContent"> 
     <h2>Monster Madness</h2> 
     <img src="images/monsters.jpg"> 
    </div> 
    <div id="frankContent"> 
     <h2>Frankenstein</h2> 
     <img src="images/frankenstein.jpg"> 
    </div> 
    <div id="draculaContent"> 
     <h2>Dracula</h2> 
     <img src="images/dracula.jpg"> 
    </div> 
    <div id="wolfmanContent"> 
     <h2>Wolfman</h2> 
     <img src="images/wolfman.jpg"> 
    </div> 
    <div id="mummyContent"> 
     <h2>Mummy</h2> 
     <img src="images/mummy.jpg"> 
    </div> 
    <div id="piggyContent"> 
     <h2>FINE!</h2> 
     <p>Here is a little piggy eating ice cream!</p> 
     <img src="images/piggy.jpg"> 
    </div> 
</body> 

</html>

这里是JavaScript

<script> 
    function changeChooser() { 
     console.log("gotChange"); 
     var chooser = document.getElementById("monsterChooser"); 
     var options = chooser.options; 
     var counter = 0; 

     while (counter < options.length) { 
      if (options[counter].selected) { 
       document.getElementById(options[counter].value).style.display = ""; 
      } else { 
       document.getElementById(options[counter].value).style.display = "none"; 
      } 
      counter = counter + 1; 
     } 

    } 
</script>

答

一个很好的地方开始重构是看你的代码的部分使用相同/相似的参考或执行类似的工作。我想提取2线的display属性更改到一个单独的功能：

<script> 
    function changeChooser() { 
    var chooser = document.getElementById("monsterChooser"); 

    for (var i = 0; i < chooser.options.length; i++) { 
     var id = chooser.options[counter].value; 

     if (chooser.options[i].selected) { 
     changeDisplayById(id, ''); 
     } else { 
     changeDisplayById(id, 'none'); 
     } 
    } 

    } 

    function changeDisplayById(id, display) { 
    document.getElementById(id).style.display = display; 
    } 
</script>

答

我会做这些改进（但也有几个很好的替代解决方案）：

用严格的方式从中受益语言改进和更严格的检查
代码绑定处理程序代码为addEventListener而不是使用HTML属性
使用函数（它可能是DOMContentLoaded事件处理函数）为所有局部变量创建一个范围，如果有的话
无论如何，浏览器为具有ID属性的所有元素创建（全局）变量。你可以用getElementById
使用这些，而不是执行查找您可以使用CSS选择器来找到所有需要显示/隐藏的div元素，你能做到这一点查找只有一次，并将结果

"use strict"; 
 
// Preferrably bind event handlers in code, not in HTML attributes: 
 
document.addEventListener('DOMContentLoaded', function() { 
 
    // Put all code in this closure, so new variables (if any) are local 
 

 
    // Only query the content DIV elements once, using a CSS selector 
 
    var divs = document.querySelectorAll('div[id*=Content]'); 
 
    
 
    changeChooser(); 
 
    // Global variables are automatically created for all elements with an ID: use them 
 
    monsterChooser.addEventListener('change', changeChooser); 
 

 
    function changeChooser() { 
 
     // Apply hideElement to all content divs 
 
     Array.from(divs, hideElement); 
 
     // Show the specific div: 
 
     showElement(document.getElementById(monsterChooser.value)); 
 
    } 
 

 
    function hideElement(elem) { 
 
     elem.style.display = "none"; 
 
    } 
 
    function showElement(elem) { 
 
     elem.style.display = ""; 
 
    } 
 
});

<h1>Monster Mash</h1> 
 
<p>Pick your favorite monster from the dropdown!</p> 
 
<select id="monsterChooser"> 
 
    <option value="monsterContent">Monsters</option> 
 
    <option value="frankContent">Frankenstein</option> 
 
    <option value="draculaContent">Dracula</option> 
 
    <option value="wolfmanContent">Wolfman</option> 
 
    <option value="mummyContent">Mummy</option> 
 
    <option value="piggyContent">I hate monsters</option> 
 
    </select> 
 
<div id="monsterContent"> 
 
    <h2>Monster Madness</h2> 
 
    <img src="images/monsters.jpg"> 
 
</div> 
 
<div id="frankContent"> 
 
    <h2>Frankenstein</h2> 
 
    <img src="images/frankenstein.jpg"> 
 
</div> 
 
<div id="draculaContent"> 
 
    <h2>Dracula</h2> 
 
    <img src="images/dracula.jpg"> 
 
</div> 
 
<div id="wolfmanContent"> 
 
    <h2>Wolfman</h2> 
 
    <img src="images/wolfman.jpg"> 
 
</div> 
 
<div id="mummyContent"> 
 
    <h2>Mummy</h2> 
 
    <img src="images/mummy.jpg"> 
 
</div> 
 
<div id="piggyContent"> 
 
    <h2>FINE!</h2> 
 
    <p>Here is a little piggy eating ice cream!</p> 
 
    <img src="images/piggy.jpg"> 
 
</div>

在JavaScript中，我该如何将显示分配操作提取到两个函数中，每个函数接受一个元素参数？

相关推荐