13518219792
现在网上关于js和jquery封装的插件很多，我刚刚接触前端的时候，就很敬佩那些自己写插件的大牛们！因为是他们给网站开发更多的便利，很多网页效果，网上很多现成的插件！那么这些插件是如何写的呢看首先是有扎实的js和jquery技术基础，其次还有一些写插件的方法和技巧。关于js和jquery的技术基础，那是一个慢慢积累的过程。但是关于写插件的一些注意和技巧，本文可以略微介绍一下，方便以后写插件的时候用得到。
创新互联公司于2013年开始，先为确山等服务建站，确山等地企业，进行企业商务咨询服务。为确山企业网站制作PC+手机+微官网三网同步一站式服务解决您的所有建站问题。
jquery插件开发模式
jquery插件一般有三种开发方式：
通过$.extend()来扩展jQuery
通过$.fn 向jQuery添加新的方法
通过$.widget()应用jQuery UI的部件工厂方式创建
第一种$.extend()相对简单，一般很少能够独立开发复杂插件，第三种是一种高级的开发模式，本文也不做介绍。第二种则是一般插件开发用到的方式，本文着重讲讲第二种。
//类级别插件开发，主要是在jQuery中定义全局方法：
//第一种写法
jQuery.myFunc = function(str){
alert("直接在jquery中定义方法",str)
}
//调用方式 $.myFunc("hello!");
//第二种写法
jQuery.extend({
myFunc:function(str){
alert("extend扩展$的方法",str)
}
})
//调用方式 $.myFunc("hello!");
//第三种写法： 为了不污染全局，挂载一个对象作为命名空间，自定义的所有方法放在这里，保证jQuery全局安全。
jQuery.define={
myFunc:function(str){
alert("命名空间的写法",str)
}
}
//调用方式：$.define.myFunc("hello");
//以上三种是级别插件开发方式，不常用，从调用方式看出，他们是全局执行的，不需要绑定节点对象。
//对象级别插件开发：有规范模板
;(function($){
$.fn.plugin = function(options){
var defaults = {
//各种默认参数
}
var options = $.extend(defaults,options); //传入的参数覆盖默认参数
this.each(function(){
var _this = $(this); //缓存一下插件传进来的节点对象。
//执行内容
})
return $(this); //把节点对象返回去，为了支持链式调用。
}
})(jQuery);
//调用方式
$("selector").plugin({
//自定义参数，json格式
})
jQuery 如何写插件 -
jQuery插件的开发包括两种：
一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。
1、类级别的插件开发
类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展：
1.1
添加一个新的全局函数
添加一个全局函数，我们只需如下定义：
jQuery.foo =
function() {
alert('This is a test. This is only a
test.');
};
1.2
增加多个全局函数
添加多个全局函数，可采用如下定义：
Java代码 收藏代码
jQuery.foo = function() {
alert('This is a test. This is
only a test.');
};
jQuery.bar =
function(param) {
alert('This function takes a
parameter, which is "' + param + '".');
};
调用时和一个函数的一样的:jQuery.foo();jQuery.bar();或者$.foo();$.bar('bar');
1.3
使用jQuery.extend(object);
jQuery.extend({
foo:
function() {
alert('This is a test. This is
only a test.');
},
bar: function(param)
{
alert('This function takes a
parameter, which is "' + param +'".');
}
});
