读书笔记:自定义事件和jQuery插件

           ----摘自《基于MVC的Javascript Web富应用开发》

                html代码:

                 

<ul id="tabs"><li data-tab="users">Users</li><li data-tab="groups">Groups</li></ul><div id="tabsContent"><div data-tab="users">....</div><div data-tab="groups">....</div></div>

           最直接的使用事件触发方式:

 jQuery.fn.tabs=function(control){         var element=$(this);         control=$(control);         element.find("li").bind("click",function(){         //首先把所有li中的active属性删除.改变li         element.find("li").removeClass("active");         $(this).addClass("active");            //内容项的改变            var tabName=$(this).attr("data-tab");            control.find(">[data-tab]").removeClass("active");            control.find(">[data-tab="+tabName+"]").addClass("active");         });        //激活第一个选项卡        element.find("li:first").addClass("active");        //返回this        return this;   }

     1.会为每个li添加click事件，从而造成浪费，可以使用delegate改变

      2.引发的内容改变，繁杂，而且不利于，其它模块儿的调用

    

     改变调用模式，使得更加解隅；

jQuery.fn.tabs=function(control){var element=$(this);control=$(control);//首先定义绑定事件     //首先是变化lielement.bind("change.tabs",function(e,tabName){            element.find("li").removeClass("active");            element.find(">[data-tab='"+tabName+"']").addClass("active");});// 其次内容变化element.bind("change.tabs",function(e,tabName){   element.find(">[data-tab]").removeClass("active");   element.find(">[data-tab='"+tabName+"']").addClass("active");})        //其次,在要绑定,要引发的事件类型    element.delegate("li","click",function(){                 var tabName=$(this).attr("data-tab");                 element.trigger("change.tabs",tabName);    });    //激活第一个选项卡      element.find("li:first").addClass("active");        //返回this        return this;}

   把click事件与该事件引发的反应，分开。从而思路更加清晰

   这个模式也称为订阅/发布模式，我觉的就是被动和主动模式。首先要做好准备，等待被xxx(bind绑定)，然后可能会有多个人收到页面的事件例如click，就会主动去XXXX(trriger触发)