自定义jquery插件

时间:2021-03-30 20:40:17

自定义jquery插件

在实际项目开发构成中,避免不了把一些通用性的代码进行封装,进而插件化,下面就简单说下jquery插件的开发。

jquery 自定义通常使用js闭包的模式

一般模式为

(function($){

    //do something

})(jQuery)


下面我们看下实现插件的几种方式

1.通过jquery 的 $.extend() 

2.通过$.fn 

3.通过 $.widget()

一般前两种方式比较常用 重点说下前两种方式:

第一种:$.extend() 意思主要对jquery进行扩展 

定义方式为

$.extend({

myFunc:function(param){

//方法体

console.log(param);

}

})

调用:

$.myFunc('abc');

第二种:$.fn.myFunc 意思是定义一个jquery 方法

定义方式

$.fn.myFunc = function(){

//方法体

}

调用:

直接获取dom对象,然后调用此方法,比如 页面有个div <div id = 'test'></div>

则通过 $("test").myFunc();调用此方法


参数传递:

在自定义插件过程中,我们需要自己传递参数,在没有指定参数的前提下使用默认参数

var default = {

‘name’:‘’,

‘age’:‘’

}

var setting = $.extend({},default,options);


具体示例如下:

(function($){

$.fn.myFunc = function(options){

  var default = {

name:'john',

age:'20'

};

var opts = $.extend({},default,options);

console.log(opts.name);
}

})(jQuery)


调用:

html:<div id='test'></div>

js: $('#test').myFunc({name:'ws',age:'24'});