组合行为操作

[matthew-sun]

class名应当只与样式有关，不应该和行为挂钩。本篇介绍了，利用html5 data-* 自定义属性的api来为一组元素绑定其所共通的行为，告别了以往依赖于class的行为操作方式。

过去是如何绑定一组元素的共通行为？

// html output:
<a href="javascript:;" class="J_action">btn call alert</a>
<a href="javascript:;" class="J_action">btn call alert</a>
<a href="javascript:;" class="J_action">btn call alert</a>
<a href="javascript:;" class="J_action">btn call alert</a>

// js output:
// require jquery
$('body').on('click', '.J_action', function() {
    alert('a')
})

如上面的代码所示，我为class名字是J_action的元素添加了一个alert的方法。

为什么使用data-*绑定元素共通行为？

在代码中，J_action的class并不控制任何css样式，只是共通的去使用了一组行为。
而在我的认知中，class名应该只与样式有关，和行为无关。以前一直觉得过去的用法有问题，但是说不上来问题在哪。
最近也是受到了高人指点，假如我把代码写成了下面这个样子，不就彻底把class名和行为分隔开了么？

// html output:
<a href="javascript:;" data-action="alert">btn call alert</a>
<a href="javascript:;" data-action="alert">btn call alert</a>
<a href="javascript:;" data-action="alert">btn call alert</a>
<a href="javascript:;" data-action="alert">btn call alert</a>

// js output:
// require jquery
$('body').on('click', '[data-action=alert]', function() {
    alert('a')
})

受到了什么开源项目的启发？

CMUI-ACTion
这个库里面有一些比较好的思想，因为是别人的成果，我就不做过多的介绍了。

如果有任何问题都可以在下方给予我留言~