汇盛国际平台:jQuery 插件封装的方法

标签:关于我们    日期:2018-03-05 13:10    录入:汇盛国际平台    浏览:

  

[jquery封装插件]jQuery 插件封装的方法

  

扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间。这篇文章将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱。

  

  

一、入门  

  

编写一个jQuery插件开始于给jQuery.fn加入??新的功能属性,此处添加的对象属性的名称就是你插件的名称:  

  

. 代码如下:  
  

  
  
  jQuery.fn.myPlugin = function(){  //你自己的插件代码  };
  
  

用户非常喜欢的符号哪里去了?它仍然存在,但是,为了避免和其他JavaScript库冲突,我们最好将jQuery传递给一个自我执行的封闭程序,jQuery在此程序中映射为符号,这样可以避免$号被其他库覆写。

  

  

. 代码如下:  

  
  
  (function ($) {  $.fn.m??yPlugin = function () {  //你自己的插件代码  };  })(jQuery);
  
  

在这个封闭程序中,我们可以无限制的使用$符号来表示jQuery函数。

  

  

二、环境  

  

现在,我们可以开始编写实际的插件代码。 但是,在这之前,我们必须得对插件所处的环境有个概念。 在插件的范围里, this关键字代表了这个插件将要执行的jQuery对象, 这里容易产生一个普遍的误区,因为在其他包含callback的jQuery函数中,this关键字代表了原生的DOM元素。这常常会导致开发者误将this关键字无谓的包在jQuery中,如下所示。

  

  

. 代码如下:  

  
  
  (function ($) {  $.fn.m??yPlugin = function () {  //此处没有必要将this包在$号中如$(this),因为this已经是一个jQuery对象。

  //$(this)等同于 $($('#element'));  this.fadeIn('normal', function () {  //此处callback函数中this关键字代表一个DOM元素  });  };  })(jQuery);  $('#element').myPlugin();

  
  

三、基础知识  

  

现在,我们理解了jQuery插件的基础知识,让我们写一个插件,做一些事情。

  

  

. 代码如下:  

  
  
  (function ($) {  $.fn.m??axHeight = function () {  var max = 0;  this.each(function () {  max = Math.max(max, $(this).height());  });  return max;  };  })(jQuery);  var tallest = $('div').maxHeight(); //返回高度最大的div元素的高度
  
  

这是一个简单的插件,利用.height()返回页面中高度最大的div元素的高度。

  

  

四、维护Chainability  

  

很多时候,一个插件的意图仅仅是以某种方式修改收集的元素,并把它们传递给链中的下一个方法。 这是jQuery的设计之美,是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收集的元素可以继续被jQuery方法如.css控制。 因此,如果你的插件不返回固有的价值,你应该总是在其作用范围内返回this关键字。 此外,你可能会推断出,传递给插件的参数将会在插件的作用范围内被传递。 因此,在前面的例子,字符串'width'变成了插件的类型参数。

  

  

五、默认值和选项  

  

对于比较复杂的和提供了许多选项可定制的的插件,最好有一个当插件被调用的时候可以被拓展的默认设置(通过使用$.extend)。 因此,相对于调用一个有大量参数的插件,你可以调用一个对象参数,包含你了你想覆写的设置。

  

  

. 代码如下:  

  
  
  (function ($) {  $.fn.tooltip = function (options) {  //创建一些默认值,拓展任何被提供的选项  var settings = $.extend({  'location': 'top',  'background-color': 'blue'  }, options);  return this.each(function () {  // Tooltip插件代码  });  };  })(jQuery);  $('div').tooltip({  'location': 'left'  });
 
★★★小编:汇盛国际注册 整理文章,欢迎大家转载 ★★★