jQuery插件小结

•编写jQuery插件,是从添加一个新的函数属性到jQuery.fn对象开始的,其中新的函数属性名为你要编写插件的名称:
•jQuery.fn.myPlugin = function() {
•  // Do your awesome plugin stuff here
•};
<!--[if ppt]-->•<!--[endif]-->
•然而为了确保你的插件不会与其他可能使用$符号的javascript库冲突,将jQuery对象当做参数传递到一个可立即执行的函数表达式中(IIFE),该函数表达式会通过$符号来映射jQuery对象,这样在该函数表达式内,$符号将不会被在其可执行的作用域中的其他库所覆盖。
•(function( $ ) {
•  $.fn.myPlugin = function() {
•   // Do your awesome plugin stuff here };

   })( jQuery );

•编写一个实现了一些功能的插件。
•(function( $ ){
•   $.fn.maxHeight = function() {
•   var max = 0;
•  this.each(function() {
•  max = Math.max( max, $(this).height() );
•     });
•   return max;
•   };
• })( jQuery );
•var tallest = $('div').maxHeight();
•通过调用 .height() 来获取页面最高div元素的高度。
 
•包含可选项的复杂可定制化插件,增加能在被调用时可扩展(使用$.extend)的默认设置。避免在调用插件时传递大量参数,在调用时使用一个需要覆盖掉的参数对象。如下
•(function( $ ){
•  $.fn.tooltip = function( options ) {
•  var settings = $.extend( {
•     'location' : 'top',
•  'background-color' : 'blue'
•  }, options);  
•  return this.each(function() {
•  });
•   };
• })( jQuery );
• $('div').tooltip({ 'location' : 'left' });
•当使用给定的可选项调用 tooltip 插件方法后,默认的 'location' 属性会被设置成 'left', 而 'background-color' 属性则保持不变。
 
•一个单独的插件在jQuery.fn对象上的命名空间都不应超过一个。
•应该将所有插件的方法存放在一个对象字面量中,然后通过传递方法的字符串名称来调用。
•(function( $ ){
•  var methods = {
•   init : function( options ) { //   },
•   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 );
•$('div').tooltip();
•$('div').tooltip({ foo : 'bar' });
•$('div').tooltip('hide');
•$('div').tooltip('update', 'This is the new tooltip content!');
•通过先传递方法的字符串名称,再传递其他一些这个方法可能用到的参数来调用。这种方式的方法封装和架构在jQuery插件社区是一种标准并被无数的插件采用,包括jQuyerUI插件和组件。
 
 

相关推荐