跟我一起学JQuery插件开发

在逛codeproject网站的时候,突然看到一篇文章:How to write plugin in Jquery.
如果对E文好的同学 ,可以看上面的连接。
现在我把上面网站的及结合自己的想法写这篇文章。希望能得到大牛们的支持和谅解。。。大鸟飞过。。。欢迎拍装。
来源:

【1】How to write plugin in Jquery.

【2】锋利的JQuery  书

【3】RascallySnakeJQuery.extend()详解
一.介绍
插件编写的目的是给已经有的一系列方法或函数做一个封装,以便在其他地方重复使用,方便后期维护。
JQuery除了提供一个简单、有效的方式进行管理元素以及脚本,它还还提供了例外一种机制:即给核心模块增加自己的方法和额外的功能。通过这种机制,Jquery允许我们自己创建属于我们自己的插件,提高我们在开发过程中的效率。

1.1JQuery的插件分为3中类型:
(1)封装对象方法的插件(也就是对象级别的开发)
这种类型的插件是我们今天需要讲的插件。
(2)封装全局函数的插件(类级别开发)
指可以把独立的函数添加到JQuery命名空间之下。
添加一个全局函数,我们只需如下定义:
jQuery.foo = function() {
alert('This is a test. This is only a test.');
};
当然 你也可以添加多个全局函数:

复制代码 代码如下:


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');
(3)选择器插件
1.2编写JQuery插件需要注意的地方:
(1)插件的推荐命名方法为:jquery.[插件名].js
(2)所有的对象方法都应当附加到JQuery.fn对象上面,而所有的全局函数都应当附加到JQuery对象本身上。
(3)在插件内部,this指向的是当前通过选择器获取的JQuery对象,而不像一般方法那样,内部的this指向的是DOM元素。
(4)可以通过this.each 来遍历所有的元素
(5)所有方法或函数插件,都应当以分号结尾,否则压缩的时候可能会出现问题。为了更加保险写,可以在插件头部添加一个分号(;),以免他们的不规范代码给插件带来 影响。
(6)插件应该返回一个JQuery对象,以便保证插件的可链式操作。
(7)避免在插件内部使用$作为JQuery对象的别名,而应当使用完整的JQuery来表示。这样可以避免冲突。
1.3JQuery插件的机制
JQuery提供了2个用于扩展JQuery功能的方法。即:
①jQuery.fn.extend()
②jQuery.extend()
第一个就是我们前面说插件类型的第一个中情况,第二个就是指后面的2种情况。
jQuery.extend()在插件中友一个很重要的功能是扩展已经有的object的对象。
比如:
var newSrc=$.extend(dest,src1,src2,src3...)
它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并。
示例:
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})
得到的结果是:
result={name:"Jerry",age:21,sex:"Boy"}
详细的 可以查看:jQuery.extend 函数详解 里面对这个方法有很好的讲解。

官网:JQuery.extend()与JQuery.fn.extend()
使用命名空间
虽然在jQuery命名空间中,我们禁止使用了大量的javaScript函数名和变量名。但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突,因此我们习惯将一些方法封装到另一个自定义的命名空间。

复制代码 代码如下:


jQuery.myPlugin = {
foo:function() {
alert('This is a test. This is only a test.');
},
bar:function(param) {
alert('This function takes a parameter, which is "' + param + '".');
}
};


采用命名空间的函数仍然是全局函数,调用时采用的方法:

复制代码 代码如下:


$.myPlugin.foo();
$.myPlugin.bar('baz');



二.第一个Jquery插件
如果需要写一个JQuery插件,你需要在$.fn对象后面增加一个属性名,这个属性名 其实 就是你的插件名。它的一般框架如下:

复制代码 代码如下:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdjzff.html