注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

拥有自己的梦想,跟随心的召唤

平凡是福

 
 
 

日志

 
 

编写 jQuery 插件  

2012-10-03 16:42:46|  分类: JQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
以下描述如何编写基本的 jQuery 插件,基本的插件代码结构,命名空间、事件、数据的使用等:
1) 基本代码结构
(function($) {
  $.fn.myPlugin = function(options) {  
    // 创建默认配置,并与用户配置合并
    var settings = $.extend( {
      'location': 'top',
      'background-color': 'blue'
    }, options);

    // 在这里编写插件代码

    // 返回插件元素的 jQuery 对象:这不是必须的,但这是最佳实践方法,从而维持插件返回值的可连接性
    return this;
  };
})(jQuery);

2) 上下文
函数内的this上下文对象已经是jQuery对象,因此无需使用 $(this) 重新包装就可直接使用 jQuery 的相关方法。

3)使用命名空间
(function( $ ){
  var methods = {
    init : function(options) { ... },
    show : function() { ... },
    hide : function() { ... },
    update : function(content) { ... }
  };

  $.fn.myPlugin = 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.myPlugin' );
    }    
  };
})(jQuery);

// 调用初始化方法
$('div').myPlugin(); 
// 调用初始化方法并传入默认参数
$('div').myPlugin({foo : 'bar'});
// 调用hide方法
$('div').myPlugin('hide'); 

4)事件
如果你的插件要绑定事件,最好将插件名称添加为要绑定事件的命名空间,如要绑定 'resize' 事件,则绑定时使用 'resize.myPlugin'作为事件名称,这样在取消绑定时使用此名称就可以避免与其它插件绑定的同类事件产生冲突。
(function( $ ){
  var methods = {
     init : function( options ) {
       return this.each(function(){
         $(window).bind('resize.myPlugin', methods.reposition);
       });
     },
     destroy : function( ) {
       return this.each(function(){
         $(window).unbind('.myPlugin');
       })
     }
......
  };
......
})(jQuery);

5) 数据
开发插件时,通常都需要维护插件的状态和检查插件是否已经初始化。可以使用 jQuery 的 data 方法来实现变量或元素状态的追踪。通常直接使用插件的名称作为这些数据追踪对象的名称。
(function( $ ){
  var methods = {
     init : function( options )
        ......
        this.data('myPlugin', {
           target : ...,
        });
        ......
     },
     destroy : function( ) {
         ......
         var data = $this.data('myPlugin');
         data.target.remove();
         $this.removeData('myPlugin');
       })
     }
     ......
  };
......
})(jQuery);

参考:
  评论这张
 
阅读(800)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017