讀書筆記:自定義事件和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觸發)