前端项目积累和总结——jQuery的extend()方法

继前篇《前端项目积累和总结——AJAX异步更新网页技术》，今篇学习一下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();

两种扩展方法的区别：https://segmentfault.com/a/1190000004082170，http://caibaojian.com/jquery-extend-and-jquery-fn-extend.html

另外，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" }

2. 实例
（1）分页器

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更是无从下手，所以学一点会一点，懂一点是一点。