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。代码看上去简朴，但轻松处理了以上我提到的题目。若有不足的处所，迎接指出。