MatthewsunNotes

组合行为操作

22 December 2014

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

// 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 这个库里面有一些比较好的思想，因为是别人的成果，我就不做过多的介绍了。

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