繼前篇《》，今篇學習一下jQuery為開發外掛提供的extend()方法。

因為我在專案中用到了兩個別人寫好的外掛，一個分頁器pagination，一個樹形列表simpleTree。

為讀懂程式碼，更好地利用外掛，就必須瞭解extend()。

積累：（三）jQuery的extend()方法

1. 兩種擴充套件方法

jQuery.fn = $.fn = jQuery.prototype   // jQuery 的物件原型

（1）jQuery.extend() = $.extend()   //類方法，不需要例項化就可以使用的方法（工具類）。呼叫：$.fun(); 或 jQuery.fun();

（2）jQuery.fn.extend() = $.fn.extend() 例項方法 ， 通過例項（如$("selector")）呼叫。呼叫：$("selector").fun();

另外，jQuery.extend()方法除了具有擴充套件 jQuery 類方法 的功能外，一般用於合併物件。

jQuery.extend(target [, object1] [, objectN]); //合併 object1 ... objectN 到 target 物件，如果只有一個引數，則合併到 jQuery 物件中
例子：
var settings = { a: false, b: 5, name: "hh" }; 
var options = { a: true, name: "gg" }; 
jQuery.extend(settings, options); 
result：settings == { a: true, b: 5, name: "gg" }
 

function user_paginationNick(opt){
    //引數設定
    var pager={
        paginationBox:'pagination-nick',//分頁容器--必填
        mainBox:'main-box-nick',//內容盒子--必填
        //...
        data:[],//ajax請求的資料
    };
    pager = $.extend(pager,opt);//用opt物件來擴充套件pager物件，返回被擴充套件的pager物件
	
	//設定ajax請求資料分成的最大頁碼
    pager.maxCount=pager.data.length % pager.pageCount ? parseInt(pager.data.length / pager.pageCount) +1 :
    pager.data.length / pager.pageCount;

    //請求資料頁面跳轉方法
    function goPage(btn){
        
    }
    //建立非數字按鈕和資料內容區
    function createOtherBtn(){
		
    }

    //建立數字按鈕
    function createNumBtn(page){
        
    }

    //首屏載入
    createOtherBtn();//首屏載入一次非數字按鈕即可
    goPage(userPageFlag);//請求資料頁面跳轉滿足條件按鈕點選都執行，首屏預設跳轉到currentPage
}
 

呼叫：

user_paginationNick({
	data:userObj
});

（2）樹形列表

$(function(){//$(function(){ }是$(document).ready(function(){}的簡寫
	$.fn.extend({ // $.fn.extend對jQuery.prototype進得擴充套件，就是為jQuery類新增“成員函式”
		SimpleTree:function(options){
			
			//引數初始化
			var option = $.extend({
				click:function(a){ }
			},options);
			
			option.tree=this;	/* 在引數物件中新增對當前選單樹的引用，以便在物件中使用該選單樹*/
			
			option._init=function(){

			}/* option._init() End */
			
			/* 設定所有超連結不響應單擊事件 */
			this.find("a").click(function(){$(this).parent("li").click();return false; });
			
			/* 選單項 <li> 接受單擊 */
			this.find("li").click(function(){
				
			});
			
			/* 設定所有父節點樣式 */
			this.find("ul").prev("li").addClass("folder");
			
			/* 設定節點“是否包含子節點”屬性 */
			this.find("li").find("a").attr("hasChild",false);
			this.find("ul").prev("li").find("a").attr("hasChild",true);
			
			
			/* 初始化選單 */
			option._init();
			
			
		}/* SimpleTree Function End */
		
	});
});

呼叫：

$(function(){
	$(".st_tree").SimpleTree({
	  click:function(a){
	  }
	});
});

後記：剛接觸前端，對原生的js仍是一知半解，對jQuery更是無從下手，所以學一點會一點，懂一點是一點。