拒绝动态event绑定

jquery开始流行的时候，大多数人更喜欢jQuery.bind('click')而不是onclick="click(this)"，原因也很明显：粗暴简单有效。之后以下的代码比较常见：

<a class="popup">click</a>

<script type="text/javascript">
$('.popup').each(function(){
    alert('hello world!');
});
</script>

但同时产生出不少结构性问题。web前端不外乎html、 css、 javascript，可这三种代码又截然不同，如何组织这些代码成了头痛问题。在多数情况下HTML代码量非常多，如果混合js一起阅读会很难理解，html和js的关系变得越来越模糊，以上代码如果拆分放置到两处，甚至很难发现它们之间有关系。并且动态绑定事件通常不是一个持续行为，只有那么一瞬间就把事件绑上了，但如果给document添加了新元素，它不会自动绑定事件，仍然需要在追加元素后再进行绑定。

现在有很多MVC, MVVM框架可以解决结构性问题，但对于大多数情况，我们并不需要一套框架，而只需要百余行代码就能解决问题，何必给页面增加更多东西呢？

快速开发是常态，它看起来不重要，但积少成多就变得十分重要。我们应该在开始编写这些看似微不足道的代码前去考虑如何把紧耦合关系变松。从以上代码可见耦合度高是因为关系信息少，而且难以重用，所以我认为应该在之间增加一层关系。

<a 
    data-action="alert"
    data-message="hello world"
    onclick="Action.do(this, 'click')">click</a>

<script type="text/javascript">
Action.add('alert', 'click', function(el){
    var message = el.getAttribute('data-message');
    alert(message);
});
</script>

Action是个不存在的object，但其实要实现这个object的效果很简单，不需要很长的开发经验就可以办到，并且不需要jquery。代码看上去简单，但轻松解决了以上我提到的问题。如有不足的地方，欢迎指出。