自定义jquery插件

自定义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'});