jQuery插件开发--（转）

1，开始

可以通过为jQuery.fn增加一个新的函数来编写jQuery插件。属性的名字就是你的插件的名字：

  1. jQuery.fn.myPlugin = function(){
  2. //开始写你的代码吧！
  3. };

但是，那惹人喜爱的美元符号$哪里去了？她就是jQuery，但是为了确保你的插件与其他使用$的库不冲突，最好使用一个立即执行的匿名函数，这个匿名函数的参数是jQuery，这样其他的库就可以放心的使用$符号了。

  1. (function( $ ){
  2. $.fn.myPlugin = function() {
  3. // 开始吧！
  4. };
  5. })( jQuery );

这样更好了就。在闭包内，可以放心的使用$符号了～

2，上下文

现在已经可以编写我们的代码了，但是编写之前，我必须说一说上下文。在插件内部的范围中，this关键字指向的是jQuery对象。人们很容易误解这一点，因为在正常使用jQuery的时候，this通常指向的是一个DOM元素。不了解这一点，会经常使用$又包装了一次。

  1. (function( $ ){
  2. $.fn.myPlugin = function() {
  3. // 没有必要使用$(this)
  4. // $(this) 跟 $($(‘#element‘))是一样的
  5. this.fadeIn(‘normal‘, function(){
  6. //这里的this指的就是一个DOM元素了
  7. });
  8. };
  9. })( jQuery );
  10. $(‘#element‘).myPlugin();

3，基本开发

接下来写一个能用的插件吧。

  1. (function( $ ){
  2. $.fn.maxHeight = function() {
  3. var max = 0;
  4. this.each(function() {
  5. max = Math.max( max, $(this).height() );
  6. });
  7. return max;
  8. };
  9. })( jQuery );
  1. var tallest = $(‘div‘).maxHeight();

这是一个简单的插件，通过调用height()返回页面上height最大的div的height。

4，维护链式开发的特性

上一个例子是返回了一个整数，但是大多数情况下，一个插件紧紧是修改收集到的元素，然后返回这个元素让链条上的下一个使用。这是jQuery设计的精美之处，也是jQuery如此流行的原因之一。为了保证可链式，你必须返回this。

  1. (function( $ ){
  2. $.fn.lockDimensions = function( type ) {
  3. return this.each(function() {
  4. var $this = $(this);
  5. if ( !type || type == ‘width‘ ) {
  6. $this.width( $this.width() );
  7. }
  8. if ( !type || type == ‘height‘ ) {
  9. $this.height( $this.height() );
  10. }
  11. });
  12. };
  13. })( jQuery );
  1. $(‘div‘).lockDimensions(‘width‘).css(‘color‘,‘red‘);

因为该插件返回了this，所以保证了可链式，从而可以继续使用jQuery方法进行修改，如css()。如果你的插件如果不是返回一个简单值，你通常应该返回this。而且，正如你可能想到的，你传进去的参数也可以在你的插件中访问。所以在这个例子中，可以访问到type。

5，默认值和选项

为了一些复杂的，可订制的插件，最好提供一套默认值，在被调用的时候扩展默认值。这样，调用函数的时候就不用传入一大堆参数，而是传入需要被替换的参数。你可以这样做：

  1. (function( $ ){
  2. $.fn.tooltip = function( options ) {
  3. var settings = {
  4. ‘location‘         : ‘top‘,
  5. ‘background-color‘ : ‘blue‘
  6. };
  7. return this.each(function() {
  8. // 如果存在选项，则合并之
  9. if ( options ) {
  10. $.extend( settings, options );
  11. }
  12. // 其他代码咯
  13. });
  14. };
  15. })( jQuery );
  1. $(‘div‘).tooltip({‘location‘:‘left‘});

在这个例子中，调用插件后，默认的location会被替换城‘left‘，而background－color还是‘blue‘。这样可以保证高度可配置性，而不需要开发者定义所有可能的选项了。

6，命名空间

正确的命名空间对于插件开发十分重要，这样能确保你的插件不被其他插件重写，也能避免被页面上其他代码重写。命名空间可以使你更长寿，因为你能记录你自己的方法，事件，数据等。

a，插件方法

在任何情况下，都不要在一个插件中为jQuery.fn增加多个方法。如：

  1. (function( $ ){
  2. $.fn.tooltip = function( options ) { // 这样 };
  3. $.fn.tooltipShow = function( ) { // 是   };
  4. $.fn.tooltipHide = function( ) { // 不好的  };
  5. $.fn.tooltipUpdate = function( content ) { // 同学！  };
  6. })( jQuery );

不推荐这样使用，搞乱了$.fn命名空间。要纠正之，你可以把所有的方法放进一个对象中，然后通过不同的参数来调用。

  1. (function( $ ){
  2. var methods = {
  3. init : function( options ) { // THIS },
  4. show : function( ) { // IS   },
  5. hide : function( ) { // GOOD },
  6. update : function( content ) { // !!! }
  7. };
  8. $.fn.tooltip = function( method ) {
  9. // Method calling logic
  10. if ( methods[method] ) {
  11. return methods[ method ].apply( this, Array.prototype.slice.call( arguments, 1 ));
  12. } else if ( typeof method === ‘object‘ || ! method ) {
  13. return methods.init.apply( this, arguments );
  14. } else {
  15. $.error( ‘Method ‘ +  method + ‘ does not exist on jQuery.tooltip‘ );
  16. }
  17. };
  18. })( jQuery );
  1. $(‘div‘).tooltip({  // calls the init method
  2. foo : ‘bar‘
  3. });
  4. $(‘div‘).tooltip(‘hide‘); // calls the hide method
  5. $(‘div‘).tooltip(‘update‘, ‘This is the new tooltip content!‘); // calls the update method

jQuery自己的扩展也是使用这种插件结构。

b，事件

绑定事件的命名空间是比较不为人知的。如果你的插件绑定了某个事件，最好将它搞到一个命名空间中。这样，如果你以后需要解绑，就不会影响到其他绑定到这个事件上的函数了。你可以使用".<namespace>"来增加命名空间。

  1. (function( $ ){
  2. var methods = {
  3. init : function( options ) {
  4. return this.each(function(){
  5. $(window).bind(‘resize.tooltip‘, methods.reposition);
  6. });
  7. },
  8. destroy : function( ) {
  9. return this.each(function(){
  10. $(window).unbind(‘.tooltip‘);
  11. })
  12. },
  13. reposition : function( ) { // ... },
  14. show : function( ) { // ... },
  15. hide : function( ) { // ... },
  16. update : function( content ) { // ...}
  17. };
  18. $.fn.tooltip = function( method ) {
  19. if ( methods[method] ) {
  20. return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
  21. } else if ( typeof method === ‘object‘ || ! method ) {
  22. return methods.init.apply( this, arguments );
  23. } else {
  24. $.error( ‘Method ‘ +  method + ‘ does not exist on jQuery.tooltip‘ );
  25. }
  26. };
  27. })( jQuery );
  28. $(‘#fun‘).tooltip();
  29. // Some time later...
  30. $(‘#fun‘).tooltip(‘destroy‘);

在这个例子中，tooltip在init方法中初始化，它将reposition方法绑定到window对象的resize事件的tooltip名字空间下。稍候，如果开发者需要去掉这个tooltip，我们可以解绑这个绑定。这样就不会影响到其他绑定到window对象的resize事件的方法了。

c，数据

在开发插件的时候，你通常会有保持状态或者检查你的插件是否已经初始化的需要。使用jQuery的data方法是保持变量的很好的方法。但是，我们不把变量单独保存，而是放在一个对象中，这样就可以在一个名字空间下统一访问了。

  1. (function( $ ){
  2. var methods = {
  3. init : function( options ) {
  4. return this.each(function(){
  5. var $this = $(this),
  6. data = $this.data(‘tooltip‘),
  7. tooltip = $(‘<div />‘, {
  8. text : $this.attr(‘title‘)
  9. });
  10. // If the plugin hasn‘t been initialized yet
  11. if ( ! data ) {
  12. /*
  13. Do more setup stuff here
  14. */
  15. $(this).data(‘tooltip‘, {
  16. target : $this,
  17. tooltip : tooltip
  18. });
  19. }
  20. });
  21. },
  22. destroy : function( ) {
  23. return this.each(function(){
  24. var $this = $(this),
  25. data = $this.data(‘tooltip‘);
  26. // Namespacing FTW
  27. $(window).unbind(‘.tooltip‘);
  28. data.tooltip.remove();
  29. $this.removeData(‘tooltip‘);
  30. })
  31. },
  32. reposition : function( ) { // ... },
  33. show : function( ) { // ... },
  34. hide : function( ) { // ... },
  35. update : function( content ) { // ...}
  36. };
  37. $.fn.tooltip = function( method ) {
  38. if ( methods[method] ) {
  39. return methods[method].apply( this, Array.prototype.slice.call( arguments, 1 ));
  40. } else if ( typeof method === ‘object‘ || ! method ) {
  41. return methods.init.apply( this, arguments );
  42. } else {
  43. $.error( ‘Method ‘ +  method + ‘ does not exist on jQuery.tooltip‘ );
  44. }
  45. };
  46. })( jQuery );

使用data方法可以帮助你在插件的各个方法间保持变量和状态。将各种变量放在一个对象中，可以方便访问，也可以方便移除。

7，总结与最佳实践

编写jQuery插件可以充分利用库，将公用的函数抽象出来，“循环利用”。以下是简短的总结：

  • 使用(function($){//plugin})(jQuery);来包装你的插件
  • 不要在插件的初始范围中重复包裹
  • 除非你返回原始值，否则返回this指针来保证可链式
  • 不要用一串参数，而是使用一个对象，并且设置默认值
  • 一个插件，不要为jQuery.fn附上多个函数
  • 为你的函数，事件，数据附着到某个命名空间
时间： 2024-11-03 05:20:14

jQuery插件开发--（转）的相关文章

掌握jQuery插件开发

在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求.目前页面中常用的一些组件,都有多种jQuery插件可供选择,网络上也有很多专门收集jQuery插件的网站.利用jQuery插件确实可以给我们的开发工作带来便捷,但是如果只是会简单使用,而对其中的原理不甚了解,那么在使用过程中碰到问题或者对插件进行定制开发时就会有诸多疑惑.本文的目的就是可以快速了解jQuery插件

jQuery插件开发（一）：jQuery类方法

一.jQuery插件开发的方法 jQuery插件的编写方法主要有两种: 1.基于jQuery对象的插件 2.基于jQuery类的插件 二.基于jQuery类的插件 1.什么是jQuery类的插件? jQuery类方法其实就是jquery全局函数,即jquery对象的方法,实际上就是位于jquery命名空间的内部函数.这些函数有一个特征就是不操作DOM元素,而是操作 Javascript非元素对象.直观的理解就是给jquery类添加类方法,可以理解为添加静态方法 2.给jQuery类添加方法. /

jQuery插件开发精品教程(让你的jQuery更上一个台阶)

刘哇勇的部落格要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈. 学会使用jQuery并不难,因为它简单易学,并且相信你接触jQuery后肯定也使用或熟悉了不少其插件.如果要将能力上升一个台阶,编写一个属于自己的插件是个不错的选择. 本教程可能不是最精品的,但一定是最细致的. jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发

jQuery 插件开发

jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发的,有了模式,我们就能更好地组织我们的代码,并且从这些前人总结出来的模式中学到很多好的实践. jQuery插件开发方式主要有三种: 通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部件工厂方式创建 通常我们使用第二种方法来进行简单插件开发,说简单是相对于第三种方式.第三种方式是用来开发更高级jQuery部件的,该模式开发出来的部件带有很多jQ

JQuery插件开发精品教程，让你的jQuery提升一个台阶

本文转载自 http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html 要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈. 学会使用jQuery并不难,因为它简单易学,并且相信你接触jQuery后肯定也使用或熟悉了不少其插件.如果要将能力上升一个台阶,编写一个属于自己的插件是个不错的选择.

jQuery插件开发模式

http://www.cnblogs.com/gavin-num1/p/5655126.html jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发的,有了模式,我们就能更好地组织我们的代码,并且从这些前人总结出来的模式中学到很多好的实践. 根据<jQuery高级编程>的描述,jQuery插件开发方式主要有三种: 通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部件工厂方式创建 通常我们使

jQuery插件开发前准备

[前言] 关于jQuery的插件,网上一搜一大把,一开始在项目中使用别人写的插件的时候,真是佩服的五体投地,调用的时候简简单单的几句代码,就能实现很复杂的功能.那么如何开发自己的插件呢?其实并不难,从简单的开始,一步一步网上添加功能,最后咋们也能写出功能强大的插件. [jQuery插件开发模式] jQuery插件开发模式有三种: (1)通过$.extend()来扩展jQuery 多用于拓展工具方法,比如给一个数组封装一个方法,功能是将其中的重复元素删除:$.removeSameItem([1,1

jQuery插件开发---转载

要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈. 学会使用jQuery并不难,因为它简单易学,并且相信你接触jQuery后肯定也使用或熟悉了不少其插件.如果要将能力上升一个台阶,编写一个属于自己的插件是个不错的选择. 本教程可能不是最精品的,但一定是最细致的. jQuery插件开发模式 软件开发过程中是需要一定的设计模式来指导开发的,有了模式,

跟我一起学JQuery插件开发

http://www.cnblogs.com/Leo_wl/archive/2012/04/06/2435511.html 以前一直比较好奇,jquery插件是怎么开发的,怎么写属于自己的插件? 昨天在逛codeproject网站的时候,突然看到一篇文章:How to write plugin in Jquery. 如果对E文好的同学 ,可以看上面的连接. 现在我把上面网站的及结合自己的想法写这篇文章.希望能得到大牛们的支持和谅解...大鸟飞过...欢迎拍装. 资料来源: [1]How to w

jQuery 插件开发——PopupLayer(弹出层)

导读:上次写了一篇关于GridView的插件开发方法,上几天由于工作需要,花了一天左右的事件封装了popupLayer(弹出层)插件.今天有时间就记录一下自己的开发思想与大家分享下,同时也算是对这段时间的工作概要吧. 就我在开发过程中的理解和开发的经验,一般常用的弹出层有三类(其实还有一类就是弹出可以输入内容的,但是这种可以被替代,所以就特别拿出来写了):Confirm.Alert.LoadContent(url).其中Alert又可以分成五种(当然也可以是四种),分别是: "error&quo