jQuery.extend与jQuery.fn.extend的区别
最近在看jquery组件的开发,关于extend与fn.extend之间的区别有些不理解,后来详细的看了一下,做下记录:
1、静态方法与实例方法
首先先了解静态方法与实例方法这两个的区别:
1、静态方法是指不需要声明类的实例就可以使用的方法。
2、实例方法是指必须要先使用"new"关键字声明一个类的实例, 然后才可以通过此实例访问的方法。
function staticClass() { }; //声明一个类
staticClass.staticMethod = function() { alert("static method") }; //创建一个静态方法
staticClass.prototype.instanceMethod = function() { "instance method" }; //创建一个实例方法
上面首先声明了一个类staticClass, 接着为其添加了一个静态方法staticMethod 和一个动态方法instanceMethod。区别就在于添加动态方法要使用prototype原型属性。
对于静态方法可以直接调用 staticClass.staticMethod();
但是动态方法不能直接调用 staticClass.instanceMethod(); //语句错误, 无法运行。
需要首先实例化后才能调用 var instance = new staticClass(); //首先实例化
instance.instanceMethod(); //在实例上可以调用实例方法
2、extend与fn.extend
简单的来说,extend就是为jquery对象添加了一个静态方法,fn.jquery则添加了一个实例方法
$.extend({sayName:function(){}})
调用做个静态方法,只需要$.sayName()即可
$.fn.extend({sayName:function(){}})
或者$.fn.sayName=function(){};
这种方法相当于为jquey对象的原型添加方法,必须要实例化才可以调用,$("div").sayName();
此外,extend方法还可用于组件开发中,默认参数的替换
function fn(option){ var option = jQuery.extend({ name1:value1; name2:value2; },options); }
这样,没有参数传递时,会采用默认值,有参数时,会采用传递的值