jQuery 插件编写 博客分类： jQuery

 

jQuery插件开发的几种形式

jQuery插件开发分为2种：

1. 类级别的插件开发,换句话说就是给jQuery添加全局函数

eg:

方法一: 添加一个或多个全局函数　　

jQuery.fruit = function() {   
　　alert('The function name is fruit');
};  
jQuery.food = function(param) {   
　　alert('The function name is food');
};

调用方法:

jQuery.fruit();

jQuery.food();

或者

$.fruit();

$.food();

 

方法二: 使用jQuery.extend(object)

jQuery.extend({      
　　fruit: function() {      
　　　　alert('The function name is fruit');
　　},      
　　food: function() {      
　　　　alert('The function name is food');
　　}     
});

调用方法:

jQuery.fruit();

jQuery.food();

或者

$.fruit();

$.food();

 

方法三:  使用命名空间(避免与其他jQuery插件产生命名冲突)

jQuery.myPlugin = {          
　　fruit:function() {          
　　　　alert('The function name is fruit');
　　},          
　　food:function() {          
　　　　alert('The function name is food');
　　}         
};

采用命名空间的函数仍然是全局函数，只是我们把要调用到函数,包含在了新的明明空间中
调用方法：

$.myPlugin.fruit();

$.myPlugin.food();

 

2. 对象级别的插件开发,也就是给jQuery添加方法

eg:

一、定义形式如下:

形式一:

(function($){     
　　$.fn.extend({     
　　　　myPlugin:function(){     
　　　　　　// code  
　　　　}     
　　})     
})(jQuery);

形式二:

(function($){     
　　$.fn.myPlugin = function(){     
　　　　// code  
　　}        
})(jQuery);

JavsScript的另外一个主流扩展就是prototype,他们同样也是用 $ 符号

用上面2种定义方式,还算可以继续使用 $ 符号,并且不与prototype产生冲突

 

二、给$.fn对象添加新的属性

$.fn.newPrototype = function() {    
　　// jquery代码
};

调用方法：

$('#id').newPrototype();

 

编写插件时需要注意的地方：

 

（1）插件的推荐命名方法为：jquery.[插件名].js

（2）所有的对象方法都应当附加到JQuery.fn对象上面，而所有的全局函数都应当附加到JQuery对象本身上。

（3）在插件内部，this指向的是当前通过选择器获取的JQuery对象，而不像一般方法那样，内部的this指向的是DOM元素。

（4）可以通过this.each 来遍历所有的元素

（5）所有方法或函数插件，都应当以分号结尾，否则压缩的时候可能会出现问题。为了更加保险写，可以在插件头部添加一个分号（；），以免他们的不规范代码给插件带来 影响。

（6）插件应该返回一个JQuery对象，以便保证插件的可链式操作。

（7）避免在插件内部使用$作为JQuery对象的别名，而应当使用完整的JQuery来表示。这样可以避免冲突。