xml地图|网站地图|网站标签 [设为首页] [加入收藏]

主题:jQuery插件开发全解析,jquery插件

主旨:jQuery插件开荒全拆解深入分析,jquery插件

jQuery插件的开采饱含三种:

生龙活虎种是类等级的插件开垦,即给jQuery增多新的大局函数,约等于给jQuery类自身增添方法。jQuery的大局函数就是归于jQuery命名空间的函数,另生机勃勃种是目的品级的插件开采,即给jQuery对象增加方法。下边就三种函数的支出做详细的表达。

1、类等级的插件开垦

类级其他插件开采最直白的领会正是给jQuery类增加类方法,能够清楚为抬高静态方法。规范的事例便是$.AJAX()这些函数,将函数定义于jQuery的命名空间中。关于类级其余插件开拓能够应用如下两种格局实行扩充:

1.1 加多二个新的大局函数

丰硕四个大局函数,我们只需如下概念:

 

 

 

 

1.2 增添多个全局函数

增多八个全局函数,可利用如下概念:

1.3 使用jQuery.extend(object); 

 

1.4 使用命名空间

固然在jQuery命名空间中,大家严令禁用了汪洋的javaScript函数名和变量名。可是依旧不可防止有个别函数或变量新秀于其他jQuery插件冲突,由此大家习贯将一些办法封装到另二个自定义的命名空间。

 

通过那些技能(使用独立的插件名卡塔 尔(英语:State of Qatar),大家得以幸免命名空间内函数的冲突。

2、对象品级的插件开拓

指标级其余插件开拓须要如下的三种样式:、

形式1:  

形式2:

 

 

2.1 在JQuery名称空间下申澳优(Ausnutria Hyproca卡塔 尔(英语:State of Qatar)个名字

那是三个纯粹插件的剧本。假诺你的剧本中隐含八个插件,可能互逆的插件(举个例子: $.fn.doSomething() 和$.fn.undoSomething()卡塔尔国,那么您须求注解四个函数名字。可是,平时当大家编辑贰个插件时,力求仅使用贰个名字来含有它的装有内容。大家的言传身教插件命名称为“highlight“    

 

  1. $.fn.hilight = function() {    
  2.   // Our plugin implementation code goes here.    
  3. };    
  4. 作者们的插件通过如此被调用:  
  5. $('#myDiv').hilight();     

 

而是要是大家须要表明大家的实今世码为三个函数该怎么办?有点不清缘故:设计上的急需;那样做更易于或更易读的落实;何况这么更适合面向对象。 那真是一个小事,把功效完成分解成七个函数而不增增加余的命名空间。出于意识到和动用函数是javascript中最中央的类对象,大家得以这么做。就好像其余对象相近,函数能够被钦点为属性。因而大家曾经宣示“hilight”为jQuery的习性对象,任何其余的个性恐怕函数我们必要暴表露来的,都足以在"hilight" 函数中被声称属性。稍后继续。
2.2 接收options参数以决定插件的作为

让大家为我们的插件增多效果钦赐前程色和背景观的机能。大家也许会让选项像多少个options对象传递给插件函数。举例:   

  1. // plugin definition    
  2. $.fn.hilight = function(options) {    
  3.   var defaults = {    
  4.     foreground: 'red',    
  5.     background: 'yellow'    
  6.   };    
  7.   // Extend our default options with those provided.    
  8.   var opts = $.extend(defaults, options);    
  9.   // Our plugin implementation code goes here.    
  10. };    
  11. 大家的插件能够这么被调用:  
  12. $('#myDiv').hilight({    
  13.   foreground: 'blue'    
  14. });     

 

2.3 揭露插件的暗中同意设置

小编们应当对下面代码的少年老成种改革是暴光插件的私下认可设置。那对于让插件的使用者更易于用比较少的代码覆盖和改变插件。接下来我们开头利用函数对象。     

 

  1. // plugin definition    
  2. $.fn.hilight = function(options) {    
  3.   // Extend our default options with those provided.    
  4.   // Note that the first arg to extend is an empty object -    
  5.   // this is to keep from overriding our "defaults" object.    
  6.   var opts = $.extend({}, $.fn.hilight.defaults, options);    
  7.   // Our plugin implementation code goes here.    
  8. };    
  9. // plugin defaults - added as a property on our plugin function    
  10. $.fn.hilight.defaults = {    
  11.   foreground: 'red',    
  12.   background: 'yellow'    
  13. };     
  14. 今昔使用者可以满含像那样的一整套在她们的本子里:  
  15. //这一个只须求调用二次,且不料定要在ready块中调用  
  16. $.fn.hilight.defaults.foreground = 'blue';    
  17. 接下去大家得以像这么使用插件的不二等秘书诀,结果它设置蓝绿的前程色:  
  18. $('#myDiv').hilight();   

 

如您所见,大家允许使用者写少年老成行代码在插件的私下认可前景象。而且使用者照旧在急需的时候能够有选拔的遮盖那一个新的暗中认可值:

// 覆盖插件缺省的背景颜色 

$.fn.hilight.defaults.foreground = 'blue'; 

// ... 

// 使用多少个新的缺省设置调用插件 

$('.hilightDiv').hilight(); 

// ... 

// 通过传递配置参数给插件方法来覆盖缺省设置 

$('#green').hilight({ 

  foreground: 'green' 

});  

2.4 适当的暴光一些函数

这段将会一步一步对前方这段代码通过有意思的法子扩张你的插件(相同的时间让别的人增添你的插件卡塔 尔(英语:State of Qatar)。比方,大家插件的落到实处里面能够定义三个叫作"format"的函数来格式化高亮文本。我们的插件以往看起来像那样,私下认可的format方法的兑现部分在hiligth函数上面。

$.fn.cycle.transitions = { 

// ... 

}; 

其一技巧使别的人能定义和传递转变设置到Cycle插件。

2.5 保持个人函数的私有性

这种本事暴露你插件风流洒脱部分来被遮住是这一个强盛的。可是你供给细致思考你兑现中东窗事发的有个别。风流罗曼蒂克但被暴露,你供给在脑子中保持任何对于参数大概语义的退换只怕会破坏向后的包容性。叁个通理是,倘若您无法一定是或不是暴露特定的函数,那么你或然无需那么做。

那么大家怎么定义越多的函数而不搅乱命名空间也不暴光完毕啊?那正是闭包的效果。为了演示,大家将会加上其余三个“debug”函数到大家的插件中。那些 debug函数将为出口被入选的元素格式到firebug调控台。为了创建一个闭包,大家将包裹整个插件定义在三个函数中。 

  1.  (function($) {    
  2.   // plugin definition    
  3.   $.fn.hilight = function(options) {    
  4.     debug(this);    
  5.     // ...    
  6.   };    
  7.   // private function for debugging    
  8.   function debug($obj) {    
  9.     if (window.console && window.console.log)    
  10.       window.console.log('hilight selection count: ' + $obj.size());    
  11.   };    
  12. //  ...    
  13. })(jQuery);    

 

咱俩的“debug”方法不能够从外表闭包踏入,由此对于大家的落成是个人的。

2.6 支持Metadata插件

在你正在写的插件的底蕴上,增添对Metadata插件的支撑能使她更加强有力。个人来讲,小编爱怜那些Metadata插件,因为它令你选用十分的少的"markup”覆盖插件的选拔(这十二分有效当创立例羊时卡塔尔国。而且支持它极其轻便。更新:注释中有有个别优化指出。

  1. $.fn.hilight = function(options) {    
  2.   // ...    
  3.   // build main options before element iteration    
  4.   var opts = $.extend({}, $.fn.hilight.defaults, options);    
  5.   return this.each(function() {    
  6.     var $this = $(this);    
  7.     // build element specific options    
  8.     var o = $.meta ? $.extend({}, opts, $this.data()) : opts;    
  9.     //...      

 那一个改动行做了有个别作业:它是测量检验Metadata插件是或不是棉被服装置假若它被设置了,它能扩张大家的options对象通过收取元数据这行作为最终二个参数加多到JQuery.extend,那么它将会覆盖任何别的选项设置。今后大家能从"markup”处驱动行为,若是大家挑选了“markup”:

 调用的时候可以如此写: jQuery.foo(); 或 $.foo(); 

 

 

2.7 整合
上边使大家的事例完成后的代码:

    

  1. // 创立贰个闭包    
  2. (function($) {    
  3.   // 插件的定义    
  4.   $.fn.hilight = function(options) {    
  5.     debug(this);    
  6.     // build main options before element iteration    
  7.     var opts = $.extend({}, $.fn.hilight.defaults, options);    
  8.     // iterate and reformat each matched element    
  9.     return this.each(function() {    
  10.       $this = $(this);    
  11.       // build element specific options    
  12.       var o = $.meta ? $.extend({}, opts, $this.data()) : opts;    
  13.       // update element styles    
  14.       $this.css({    
  15.         backgroundColor: o.background,    
  16.         color: o.foreground    
  17.       });    
  18.       var markup = $this.html();    
  19.       // call our format function    
  20.       markup = $.fn.hilight.format(markup);    
  21.       $this.html(markup);    
  22.     });    
  23.   };    
  24.   // 私有函数:debugging    
  25.   function debug($obj) {    
  26.     if (window.console && window.console.log)    
  27.       window.console.log('hilight selection count: ' + $obj.size());    
  28.   };    
  29.   // 定义暴光format函数    
  30.   $.fn.hilight.format = function(txt) {    
  31.     return '<strong>' + txt + '</strong>';    
  32.   };    
  33.   // 插件的defaults    
  34.   $.fn.hilight.defaults = {    
  35.     foreground: 'red',    
  36.     background: 'yellow'    
  37.   };    
  38. // 闭包截至    
  39. })(jQuery);     

 

这段安顿已经让自家创立了强压符合典型的插件。笔者希望它能让您也能不负职务。

3、总结

jQuery为开辟插件提拱了七个法子,分别是:

jQuery.fn.extend(object);  给jQuery对象增多方法。
jQuery.extend(object);  为扩充jQuery类自身.为类增多新的方法。

3.1 jQuery.fn.extend(object);

fn 是如何事物吗。查看jQuery代码,就轻便察觉。

jQuery.fn = jQuery.prototype = {  

init: function( selector, context ) {//....   

//......  

};   

本来 jQuery.fn = jQuery.prototype.对prototype分明不会不熟悉啦。纵然 javascript 未有刚强的类的定义,可是用类来明白它,会更便于。jQuery正是八个打包得相当好的类,比如大家用 语句 $("#btn1") 会生成三个 jQuery类的实例。

jQuery.fn.extend(object); 对jQuery.prototype进得扩充,就是为jQuery类加多“成员函数”。jQuery类的实例能够行使这一个“成员函数”。

比方说我们要付出三个插件,做二个优秀的编辑框,当它被点击时,便alert 当前编写框里的剧情。能够如此做:

$.fn.extend({        

     alertWhileClick:function(){       

         $(this).click(function(){      

              alert($(this).val());       

          });       

      }       

});   

$("#input1").alertWhileClick(); //页面上为:<input id="input1" type="text"/>

$("#input1") 为三个jQuery实例,当它调用成员方法 alertWhileClick后,便完结了扩充,每一次被点击时它会先弹出近期编辑里的内容。

3.2 jQuery.extend(object); 

为jQuery类加多增添类方法,可以见到为抬高静态方法。如:

$.extend({  

    add:function(a,b){return a+b;}  

});  

便为 jQuery 增多三个为 add 的 “静态方法”,之后便足以在引进 jQuery 的地点,使用那几个情势了,$.add(3,4); //return 7

 

jQuery插件的支出富含三种: 大器晚成种是类品级的插件开垦,即给jQuery加多新的大局函数,也便是给jQue...

本文由永利澳门平台发布于计算机资讯,转载请注明出处:主题:jQuery插件开发全解析,jquery插件

您可能还会对下面的文章感兴趣: