We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
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的方法。
在代码中,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 这个库里面有一些比较好的思想,因为是别人的成果,我就不做过多的介绍了。
The text was updated successfully, but these errors were encountered:
No branches or pull requests
过去是如何绑定一组元素的共通行为?
如上面的代码所示,我为class名字是J_action的元素添加了一个alert的方法。
为什么使用data-*绑定元素共通行为?
在代码中,J_action的class并不控制任何css样式,只是共通的去使用了一组行为。
而在我的认知中,class名应该只与样式有关,和行为无关。以前一直觉得过去的用法有问题,但是说不上来问题在哪。
最近也是受到了高人指点,假如我把代码写成了下面这个样子,不就彻底把class名和行为分隔开了么?
受到了什么开源项目的启发?
CMUI-ACTion
这个库里面有一些比较好的思想,因为是别人的成果,我就不做过多的介绍了。
如果有任何问题都可以在下方给予我留言~
The text was updated successfully, but these errors were encountered: