即日起在codingBlog上分享您的技术经验即可获得积分,积分可兑换现金哦。

「Jquery」编写Jquery插件

微信 大风吹呀 12℃ 0评论
本文目录
[隐藏]

今天做到一个功能发现重复了,准备组件化,对应前端来说,一般使用jquery插件比较通用,于是复习一下插件的写法。搜索一下,发现有一篇将的很多,抽取精华记录下来。

1.保持 chainability

前面的例子返回了页面上最高 div 的一个整数值,但很多时候插件只是以某种方式修改元素集合,并把它们传给调用链的下一个方法。 这正是 jQuery 设计的漂亮之处,也是它如此流行的原因之一。为保持插件的 chainability ,必须确保插件返回 this 关键字。

(function( $ ){

  $.fn.lockDimensions = function( type ) {  

    return this.each(function() {

      var $this = $(this);

      if ( !type || type == 'width' ) {
        $this.width( $this.width() );
      }

      if ( !type || type == 'height' ) {
        $this.height( $this.height() );
      }

    });

  };
})( jQuery );

--
$('div').lockDimensions('width').css('color', 'red');

插件在立即作用域中返回了 this 关键字,保持了 chainability ,所以 jQuery 集合可以被其它方法操作,例如 .css()。因此,若插件无需真正的返回值,你应该一直在插件函数的立即作用域中返回 this 关键字。同样,如你所想,调用插件时的参数会被传递到插件函数的立即作用域中。在上例中,字符串 “width” 成了插件函数的 type 参数。

2.名称空间

合理地为插件定义名称空间是插件开发中很重要的一部分。 正确的定义名称空间可以确保你的插件很难被其它插件或同一页面中的其它代码所覆盖。名称空间也可以让插件开发者的日子好过一些,因为它能帮你跟踪你的方法、事件和数据。

3.插件方法

单个插件永远不要在 jQuery.fn 对象中声明一个以上的名称空间

(function( $ ){

  $.fn.tooltip = function( options ) { 
    // 这
  };
  $.fn.tooltipShow = function( ) {
    // 不
  };
  $.fn.tooltipHide = function( ) { 
    // 好
  };
  $.fn.tooltipUpdate = function( content ) { 
    // !!!  
  };

})( jQuery );

这非常不好,因为它搞乱了 $.fn 名称空间。 要修正这个问题,你应该把所有插件方法收集到一个对象定义当中,并通过传递方法名称字符串调用。

(function( $ ){

  var methods = {
    init : function( options ) { 
      // 这 
    },
    show : function( ) {
      // 很
    },
    hide : function( ) { 
      // 好
    },
    update : function( content ) { 
      // !!! 
    }
  };

  $.fn.tooltip = function( method ) {

    // Method calling logic
    if ( methods[method] ) {
      return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.tooltip' );
    }    

  };

})( jQuery );

// 调用  init 方法
$('div').tooltip(); 

// 调用  init 方法
$('div').tooltip({
  foo : 'bar'
});

--
// 调用 hide 方法
$('div').tooltip('hide'); 

--
// 调用 update 方法
$('div').tooltip('update', 'This is the new tooltip content!');

这种插件架构使你可以在插件的父闭包中封装所有方法,调用时先传方法名称字符串,接下来再把你需要的其它参数传给该方法。这种封装和架构是 jQuery 插件社区的一个标准,已经被无数插件所使用,包括 jQueryUI 中的插件和小部件。

4.事件

bind 方法有个鲜为人知的特性:它支持为绑定事件定义名称空间。如果你的插件要绑定事件,最好为其定义名称空间。这样,回头想 unbind 的时候就不会影响到相同事件类型上的其它已绑定事件。要为事件定义名称空间,把 “.” 附到要绑定的事件类型后面即可。

(function( $ ){

  var methods = {
     init : function( options ) {

       return this.each(function(){
         $(window).bind('resize.tooltip', methods.reposition);
       });

     },
     destroy : function( ) {

       return this.each(function(){
         $(window).unbind('.tooltip');
       })

     },
     reposition : function( ) { 
       // ... 
     },
     show : function( ) { 
       // ... 
     },
     hide : function( ) {
       // ... 
     },
     update : function( content ) { 
       // ...
     }
  };

  $.fn.tooltip = function( method ) {

    if ( methods[method] ) {
      return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
    } else if ( typeof method === 'object' || ! method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error( 'Method ' +  method + ' does not exist on jQuery.tooltip' );
    }    

  };

})( jQuery );


--
$('#fun').tooltip();
// Some time later...
$('#fun').tooltip('destroy');

在本例中,当 tooltip 被 init 方法初始化的时候,它把 reposition 方法绑定到 window 对象的 resize 事件上,名称空间为 “tooltip”。 之后,如果开发者想要销毁对象,可以把插件的名称空间(即 “tooltip”)传给 unbind 方法,以便解除本插件对所有事件的绑定。这使得我们可以安全的地解除本插件的事件绑定,避免意外影响插件之外绑定的事件。

转载请注明:CodingBlog » 「Jquery」编写Jquery插件

喜欢 (0)or分享 (0)
发表我的评论
取消评论

*

表情