读书笔记:自定义事件和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);


	//首先定义绑定事件 
    //首先是变化li
	element.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触发)