Question

我通常实现选择框的方式是：

 <select size="1" name="example_length" onchange="callSomeMethod">
    <option value="10" selected="selected">10</option>
    <option value="25">25</option>
    <option value="50">50</option>
    <option value="100">100</option>
  </select>

我已在onclick事件

附加了一项操作

还有另一种方式check the dropdown source here

  <select size="1" name="example_length">
    <option value="10" selected="selected">10</option>
    <option value="25">25</option>
    <option value="50">50</option>
    <option value="100">100</option>
  </select>

在第二个实现中，不清楚在onchange事件

上注册了哪些操作

问题：在第二个实现中我们通常使用一些javascript库来注册操作，但我觉得第一个实现是清晰，可读和更容易调试，而第二个实现对我来说有点令人费解，所以，为什么我们使用第二种方法以及如何调试它？

有关此的任何链接将非常感谢。

Answer 1

我发现将代码与HTML标记分开会更清楚。当处理程序应用于页面上的多个元素时尤其如此。当我可以在代码中的单个位置（可以包含在可以与多个页面重用的脚本中包含）中进行更改时，它可以实现更清晰的实现，而不是必须在整个代码中进行搜索并使或许，改变许多单个元素以反映函数的微小变化。

此外，我认为当代码没有穿插标记时，它可以更容易地调试代码。使用Firebug或IE Developer工具，您可以在javascript代码中设置断点，检查值并单步执行代码以查找任何错误。在另一个极端，将整个函数放入标记应用的单击处理程序使得它基本上无法调试。通过引入一个名为的单独函数，您已经朝着缓解这一目的迈出了一步。通过代码应用处理程序通过允许调试该处理程序函数的应用程序来改进这一点。

另一个好处，也就是微妙，是单独应用处理程序会强制您使用比其他方式更好的语义和命名约定。正如您所见，一个缺点是当代码是内联时，通过检查更容易看到正在应用哪些处理程序。通过代码应用它们时，您必须使用更好的语义，使用有意义的类名称装饰受影响的元素，使用良好的描述性元素和函数名称，并重构为可重用的代码组件（以充分利用）。这看似不利，实际上有助于强迫您编写更好，更易维护的标记和javascript。

Answer 2

第二种方法是分离关注领域的方法。网页关注的三个方面是演示，结构和功能。 CSS处理演示文稿。 HTML处理结构。 Javascript处理功能。

某些Javascript代码会注册下拉列表所需的功能，因此HTML只关注结构;这是一个下拉列表。

JavaScript动作侦听器

2 个答案: