jQuery插件开发模式详解

JQuery插件开发

一般来说，jQuery插件的开发可以分为两种类型：一种是挂在jQuery命名空间中的全局函数，也可以称为静态方法；另一种是jQuery对象级方法，即挂在jQuery原型下的方法，这样通过选择器得到的jQuery对象实例也可以共享这个方法。

I. jQuery扩展

1、$.扩展(对象)

类似于的扩展方法。Net，它用于扩展jQuery。那么它可以以$的形式调用。

$ (function () {$)。extend({ fun1: function(){ alert('为jQuery扩展fun 1函数！');} });$ . fun 1()；})2、$.fn.extend(对象)

扩展jQuery的对象。

$ . fn . extend({ fun 2: function(){ alert('执行方法2 '))；} });$(' # id1 '). fun 2()；您可以使用谷歌查看：

以上写法相当于：

$ . fn . fun 2=fun(){ alert('执行方法2 ')；} $(this . fun 2()；第二，私有领域

其定义如下：

(函数($){ })(jQuery)；//相当于var fn=function(xxoo){ }；fn(jQuery)；下面的代码弹出123。

$(function(){ var fn=function(xxoo){ }；fn(警报(123))；})第三，定义插件的基本步骤

1.定义范围

为了开发一个jQuery插件，插件代码必须与外部世界隔离。外部代码不允许直接访问插件内部代码，插件内部代码不影响外部。

//步骤1定义插件私有范围

(函数($){ })(jQuery)；这确保了插件内部的代码与外部世界隔离。

2.展开jQuery

定义范围后，插件需要扩展到jQuery，以便在外部调用。

//步骤1定义私有范围(函数($) {//步骤2插件扩展方法名$ . fn . my frame=function(options){ })(jquery)；3.缺省值

定义jQuery插件后，如果希望某些参数有默认值，可以用这种方式指定。

//步骤1定义私有范围(函数($) {//步骤3插件默认值属性var defaults={Id: '#id1 '，}；//第二步：插件$ .fn.myframe的扩展方法名=function(options){//第三步：合并用户自定义属性，默认属性(如果选项为空，使用默认值)varoptions=$。扩展(默认值、选项)；} })(jQuery)；4.支持jQuery选择器

//步骤1定义私有范围(函数($) {//步骤3插件默认值属性var defaults={Id: '#id1 '，}；//第二步：插件$ .fn.myframe的扩展方法名=function(options){//第三步：合并用户自定义属性，默认属性(如果选项为空，使用默认值)varoptions=$。扩展(默认值、选项)；}//步骤4支持jQuery选择器this . each(function(){ })；})(jQuery)；5.支持jQuery的链式调用

//步骤1定义私有范围(函数($) {//步骤3插件默认值属性var defaults={Id: '#id1 '，}；//第二步：插件$ .fn.myframe的扩展方法名=function(options){//第三步：合并用户自定义属性，默认属性(如果选项为空，使用默认值)varoptions=$。扩展(默认值、选项)；}//步骤4支持jQuery选择器//步骤5支持链式调用(返回步骤4)返回this . each(function(){ })；})(jQuery)；6.插件的内部方法

//步骤1定义私有范围(函数($) {//步骤3插件默认值属性var defaults={Id: '#id1 '，}；//步骤6在插件中定义函数varmy fun=function(obj){ alert(obj)；}//步骤2插件的扩展方法名$ . fn . my frame=function(options){//步骤3合并用户定义的属性，默认属性(如果options为空，则使用默认值)varoptions=$。扩展(默认值、选项)；}//步骤4支持jQuery选择器//步骤5支持链式调用(return step 4) return this .每个(function () {//步骤6定义插件中的函数MyFun(this)；});})(jQuery)；由于范围的原因，目前允许插件在内部使用步骤6的私有函数。

以上就是本文的全部内容，希望对大家有所帮助，谢谢大家的支持！