如果您经常使用 jQuery，那么您似乎对 Storm 绑定 很熟悉。 这是非常基本的东西，深入挖掘一下，您是否可以找到机会使风暴驱动的代码更少碎片javascript事件 绑定 事件 ，但更易于管理。
更好的选择策略
让我们从一个基本示例开始。 下面的 HTML 代码代表一个可以打开和关闭的导航菜单。
下面是点击按钮然后控制导航菜单打开和关闭的javascript代码
$('.nav-menu-toggle').on('click',function(){
$('nav').toggle();
});
这可能是最常用的实现方法。 只能使用，而且比较脆。 JavaScript 代码依赖于按钮的类名 nav-menu-toggle。 将来其他开发人员或偏执狂很可能会在构建代码时删除或重命名 此类名称。
问题的核心是我们使用 CSS 类名来进行表示和交互。 这违反了关注点分离原则，并且使维护更容易出错。
让我们用不同的方式来做
Toggle Nav Menu
这次我们使用这个数据属性（data-hook）来选择元素。 对 CSS 类的任何更改都不会影响 javascript，从而使我们能够实现关注点分离和更稳定的代码。
下面我们使用data-hook属性来选择对应的元素：
$('[data-hook="nav-menu-toggle"]').on('click',function(){
$('[data-hook="nav-menu"]').toggle();
});
应该注意的是javascript事件绑定事件 ，我还使用 data-hook 作为 nav 元素的选择器。 你不一定需要它，我喜欢它背后的想法：任何看到数据挂钩的应用程序，你都会知道这个元素在 javascript 中被引用。
一些句子糖
我必须承认数据挂钩选择器不是很漂亮。 让我们通过扩展 jQuery 来实现自定义函数 ：
$.extend({
hook:function(hookName){
var selector;
if(!hookName || hookName === '*'){
// select all data-hooks
selector='[data-hook]'
}else{
// select specific data-hook
selector='[data-hook*="'+hookName+'"]';
}
return $(selector);
}
});
内部计划完成了，让我们重画javascript。
$.hook('nav-menu-toggle').on('',function(){
$.hook('nav-menu').toggle();
});
更好的是，我们甚至可以在一个元素上放置一系列用空格分隔的钩子名称。
Toggle Nav Menu
我们可以找到以上任意一个钩子名称：
$.hook('click-track'); // returns the button as expected
我们还可以找到页面上所有的hook元素
// both are equivalent
$.hook();
$.hook('*');
避免函数 表达式
到目前为止，我们已经在风暴处理中使用了匿名函数。 让我们使用声明的函数来重新绘制它。
function toggleNavMenu(){
$.hook('nav-menu').toggle();
}
$.hook('nav-menu-toggle').on('click',toggleNavMenu);
这使得 Storm 绑定的代码更易于阅读。 toggleNavMenu 函数名称表达了意图，并且是代码自文档化的一个很好的示例。
我们还获得了可重用性，因为toggleNavMenu 函数可能需要在其他地方使用。
最后，这对于手动测试来说是个好消息，因为单元测试声明的函数比单元测试匿名函数容易得多。
同时使用多个风暴
jQuery 提供了简单方便的语法 来处理麻烦的问题。 例如，您可以将相同的风暴处理程序函数绑定到一系列以空格分隔的风暴列表。
$.hook('nav-menu-toggle').on('click keydown mouseenter',trackAction);
如果需要为不同的事件绑定不同的处理程序，可以使用对象表达式：
$.hook('nav-menu-toggle').on({
'click':trackClick,
'keydown':tranckKeyDown,
'mouseenter':trackMouseEnter
});
相反，你可以同时解除多个风暴的绑定：
// unbinds keydown and mouseenter
$.hook('nav-menu-toggle').off('keydown mouseenter');
// nuclear options:unbinds everything
$.hook('nav-menu-toggle').off();
正如您可以想象的那样，无意中解除风暴的束缚可能会产生严重的副作用。 请继续阅读，了解我们如何减少这个问题。
小心取消风暴绑定
通常我们不会将多个风暴处理函数绑定到一个元素的同一风暴类型。 我们再看一下之前的击键：
Toggle Nav Menu
不同的代码区域可能会将不同的风暴处理函数绑定到同一元素的同一风暴：
// somewhere in the nav code
$.hook('nav-menu-toggle').on('click',toggleNavMenu);
// somewhere in the video playback code
$.hook('video-pause').on('click',pauseCarltonDanceVideo);
// somewhere in the analytics code
$.hook('click-track').on('click',trackClick);
尽管我们使用了不同的选择器，但是这个元素现在有三个事件处理函数啦。假如我们的分析代码不在关心这个按钮：
// no good
$.hook('click-track').off('click');
不幸的是，里面的代码实际上删除了所有点击处理程序，而不仅仅是 trackClick。 我们应该使用更具区别性的方式来指定我们需要删除的风暴处理程序：
$.hook('click-track').off('click',trackClick);
另一种方法是使用命名 空间。 任何storm都有资格使用命名空间来实现绑定和解除绑定，这样你就可以更好地控制storm的绑定和解除绑定。
// binds a click event in the "analytics" namespace
$.hook('click-track').on('click.analytics', trackClick);
// unbinds only click events in the "analytics" namespace
$.hook('click-track').off('click.analytics');
您还可以使用多个命名空间：
// binds a click event in both the "analytics" and "usability" namespaces
$.hook('click-track').on('click.analytics.usability',trackClick);
// unbinds any events in either the "analytics" OR "usability" namespaces
$.hook('click-track').off('.usability .analytics');
// unbinds any events in both the "analytics" AND "usability" namespaces
$.hook('click-track').off('.usability.analytics');
应该注意的是，命名空间的顺序并不重要，因为命名空间没有层次结构。
如果您有一个复杂的函数，需要多个元素来绑定多个元素，那么使用命名空间是组织它们并快速消除它们的简单方法：
// free all elements on the page of any "analytics" event handling
$('*').off('.analytics');
命名空间在编写插件时特别有用，因为这样您可以保证只在您自己的命名空间范围内取消绑定风暴处理程序。
原文：EffectiveEventBindingwithjQuery
来源：
