jQuery插件开发入门

扩展jQuery插件和方法的作用是非常强大的，它可以节省大量开发时间。

入门

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

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

为了避免和其他JavaScript库冲突，我们最好将jQuery传递给一个自我执行的封闭程序:

 (function ($) {
        $.fn.m​​yPlugin = function () {
            //你自己的插件代码
        };
    })(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），你必须确保你的插件返回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'
});

在这个例子中，调用tooltip插件时覆写了默认设置中的location选项，background-color选项保持默认值，所以最终被调用的设定值为：

 {
        'location': 'left',
        'background-color': 'blue'
    }

这是一个很灵活的方式，提供一个高度可配置的插件，而无需开发人员定义所有可用的选项。

插件方法

在任何情况下，一个单独的插件不应该在jQuery.fn jQuery.fn对象里有多个命名空间。
如下的写法是糟糕的：

(function ($) {
 
    $.fn.tooltip = function (options) {
        // this
    };
    $.fn.tooltipShow = function () {
        // is
    };
    $.fn.tooltipHide = function () {
        // bad
    };
    $.fn.tooltipUpdate = function (content) {
        // !!!
    };
 
})(jQuery);

这是不被鼓励的，因为它$.fn使$.fn命名空间混乱。 为了解决这个问题，你应该收集对象文本中的所有插件的方法，通过传递该方法的字符串名称给插件以调用它们。

 (function ($) {
     
        var methods = {
            init: function (options) {
                // this
            },
            show: function () {
                // is
            },
            hide: function () {
                // good
            },
            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);
     
    //调用init方法
    $('div').tooltip();
     
    //调用init方法
    $('div').tooltip({
        foo: 'bar'
    });
     
    // 调用hide方法
    $('div').tooltip('hide');
     
    //调用Update方法
    $('div').tooltip('update', 'This is the new tooltip content!');

这种类型的插件架构允许您封装所有的方法在父包中，通过传递该方法的字符串名称和额外的此方法需要的参数来调用它们。 这种方法的封装和架构类型是jQuery插件社区的标准，它被无数的插件在使用，包括jQueryUI中的插件和widgets。

总结

编写jQuery插件允许你做出库，将最有用的功能集成到可重用的代码，可以节省开发者的时间，使开发更高效。 开发jQuery插件时，要牢记：

  • 始终包裹在一个封闭的插件： 
(function($) {
    /* plugin goes here */
    })(jQuery);

  • 不要冗余包裹this关键字在插件的功能范围内。

  • 除非插件返回特定值，否则总是返回this关键字来维持chainability 。

  • 传递一个可拓展的默认对象参数而不是大量的参数给插件。

  • 不要在一个插件中多次命名不同方法。

转载地址：http://www.css88.com/archives/4821

 

posted @ 2017-03-09 08:42  风雨后见彩虹  阅读(506)  评论(0)  编辑  收藏  举报