码迷,mamicode.com
首页 > Web开发 > 详细

利用jQuery对插件进行扩展时,方法$.extend()、$.fn.extend()区别与联系

时间:2016-05-13 17:23:18      阅读:182      评论:0      收藏:0      [点我收藏+]

标签:

 

利用JQ开发插件的方法:

 1、jQuery.extend();

 

 2、jQuery.fn.extend();

 3、通过$.widget()应用jQuery UI的部件工厂方式创建。

由于第三种方式通常用于开发比较高级的jQuery的部件,开发难度较大,所以第一种和第二种方式用的更为广泛,下面主要对前两种方式的区别和联系以及使用的方法做一些介绍。

 

 简要的说明一下: jQuery是一个封装的非常好的类,$(“#btn”)就相当于创建了一个jQuery的实例。

1、方法jQuery.fn .extend()= jQuery.prototype.extend(),也就是说利用方法二扩展插件相当于对jQuery的原型进行扩展,每个实例化的对象都可以直接调用扩展的方法。如:

  $.fn.extend({

       Init:function(){

             自己写的代码

          }

          })

 通过$(“#btn”)实例化后就可以直接调用init方法,$(“#btn”).init().

2、但是通过方法1进行插件的开发相当于对jQuery的静态方法进行了扩展,扩展的方法需要通过类来调用,如:$.extend({

                   Init:function(){};

                 } )

Init方法只能通过$.init()调用,因为它是静态的方法不能通过实例调用。

3、 可以通过$.extend()方法对对象进行扩展即用一个或多个其他对象来扩展一个对象,返回被扩展的对象Objectj Query.extend( target, object1, [objectN])

如:var set = { ha: false, limit: 5, name: "foo" };

var opt = { ha: true, name: "bar" };

jQuery.extend(set, opt);

结果:set== { ha: true, limit: 5, name: "bar" } 通过结果可以知道,当后面对象与前面对象中具有同名的参数时前面的参数会被后面的参数给覆盖,没有的就合并。

4、为了避免和其他的js包发生冲突,同时避免$符号被重写,通常在扩展插件时会定义一个匿名的带有$为参数的函数来进行插件扩展。(function( $ ){

$.fn.tooltip = function( options ) {

};

})( jQuery );

//等价于

(function( $ ){

var tooltip = {

function(options){

     }

};

$.fn.extend(tooltip) = $.prototype.extend(tooltip) = $.fn.tooltip

})( jQuery );

 直接定义一个匿名的函数并且调用同时传递参数jQuery,因而在后面的使用时$就代表的是jQuery。

利用jQuery对插件进行扩展时,方法$.extend()、$.fn.extend()区别与联系

标签:

原文地址:http://www.cnblogs.com/heshan1992/p/5489976.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!