插件封装 入门一

Posted 2022-02-17 rainwater

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

1 jQuery.fn.myPlugin = function() 
2 //你自己的插件代码 
3 ;

     为什么不用$符号呢？为了避免和其他JavaScript库冲突，我们最好将jQuery传递给一个自我执行的封闭程序，jQuery在此程序中映射为符号，这样可以避免$号被其他库覆写。

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

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

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

(function ($) 
    $.fn.myPlugin = function () 
        //此处没有必要将this包在$号中如$(this)，因为this已经是一个jQuery对象。
        //$(this)等同于 $($(‘#element‘));
        this.fadeIn(‘normal‘, function () 
        //此处callback函数中this关键字代表一个DOM元素
        );
    ;
)(jQuery);
$(‘#element‘).myPlugin();

　　现在，我们做一个利用.height()返回页面中高度最大的div元素的高度。

(function ($) 
    $.fn.maxHeight = function () 
        var max = 0;
        this.each(function () 
            max = Math.max(max, $(this).height());
        );
        return max;
    ;
)(jQuery);
var tallest = $(‘div‘).maxHeight(); //返回高度最大的p元素的高度

　　维护Chainability

很多时候，一个插件的意图仅仅是以某种方式修改收集的元素，并把它们传递给链中的下一个方法。 这是jQuery的设计之美，是jQuery如此受欢迎的原因之一。 因此，要保持一个插件的chainability，你必须确保你的插件返回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);
14 $(‘p‘).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);
$(‘p‘).tooltip(
    ‘location‘: ‘left‘
);

 

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

    ‘location‘: ‘left‘,
    ‘background-color‘: ‘blue‘,

 

  资料来源于http://www.php.cn/js-tutorial-393917.html