| 标题 | jQuery事件绑定的最佳实践 |
| 作者 | Leo Huang |
| 类型 | Course |
| 发布日期 | Jan 12, 2021 |
如果你经常使用jQuery，那么你也许很熟悉事件绑定。这是很基本的东西，但是深入一点，你就能够找到机会让你事件驱动的代码变得不太零碎，并且更容易管理。
更好的选择器策略
让我们从基础的例子开始。下面的HTML代码表示的是可以开合的导航菜单。
<button class="nav-menu-toggle">Toggle Nav Menu</button>
<nav>
<ul>
<li><a href="/">West Philadelphia</a></li>
<li><a href="/cab">Cab Whistling</a></li>
<li><a href="/throne">Throne Sitting</a></li>
</ul>
</nav>
下面这个是点击按钮之后控制导航菜单开合的javascript代码
$('.nav-menu-toggle').on('click',function(){
$('nav').toggle();
});
这可能是最常用的实现方式。它能够使用，但是比较脆。javascript代码依赖了按钮的类名nav-menu-toggle。很可能在未来其他开发者或者健忘的你在重构代码的时候会删除或者重命名这个类名。
更多内容请购买此免费课程，即可下载完整课件。
如果你经常使用jQuery，那么你也许很熟悉事件绑定。这是很基本的东西，但是深入一点，你就能够找到机会让你事件驱动的代码变得不太零碎，并且更容易管理。
更好的选择器策略
让我们从基础的例子开始。下面的HTML代码表示的是可以开合的导航菜单。
<button class="nav-menu-toggle">Toggle Nav Menu</button>
<nav>
<ul>
<li><a href="/">West Philadelphia</a></li>
<li><a href="/cab">Cab Whistling</a></li>
<li><a href="/throne">Throne Sitting</a></li>
</ul>
</nav>
下面这个是点击按钮之后控制导航菜单开合的javascript代码
$('.nav-menu-toggle').on('click',function(){
$('nav').toggle();
});
这可能是最常用的实现方式。它能够使用，但是比较脆。javascript代码依赖了按钮的类名nav-menu-toggle。很可能在未来其他开发者或者健忘的你在重构代码的时候会删除或者重命名这个类名。
更多内容请购买此免费课程，即可下载完整课件。
赞助商
