jQuery扩展

发布时间:2019-05-20 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了jQuery扩展脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

jq--CDN

jq -- jQuery码解析@H_360_5@

1、jQuery.extend() 与 jQuery.fn.extend()
把jQuery看成一个封装js类 这样好理解
$.extend是扩展的jQuery这个类 为jQuery类添加类方法 可以理解为静态方法 只跟这个类本身有关 跟具体的实例化对象是没关系的。
jQuery.fn.extend() 拓展的是jquery对象(原型)的方法 得用在jQuery对象上面

区别

两者调用方式不同
      jQuery.extend() 由传入的全局函数来调用 主要是用来拓展全局函数 如$.inIT() $.ajax();
      jQuery.fn.extend() 由具体的实例对象来调用 可以用来拓展个选择器 例如$.fn.each();
两者主要功能作用不同
      jQuery.extend(object) 为扩展jQuery类本身 为自身添加新的方法
      jQuery.fn.extend(object) 给jQuery对+B187象添加方法
(function($) {
    $.extend({
        sPEakExtend:function(e) {
            alert("$.extend"+" === "+ e);
        }
    });
    $.fn.extend({
        speakExtend:function(e) {
            // 此处没有必要将this包在$号中如$(this),因为this已经是一个jQuery对象。
            // $(this)等同于 $($('#element')); 直接使用 this.
            alert("$.fn.extend"+" === "+e);
        }
    })
})(jQuery);
$.speakExtend("静态方法");
$(".main").speakExtend("对象专属");

jQ -- 插件封装

编写一个jQuery插件就是给jQuery.fn加入​​新的功能属性,此处添加的对象属性的名称就是你插件的名称。
在插件的范围里, 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();

实现简单插件

(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元素的高度

维护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);
// 返回 this 后续调用 css()
$('div').lockDimensions('width').css('color', 'red');

默认值和选项
对于比较复杂的和提供了许多选项可定制的的插件,最好有一个当插件被调用的时候可以被拓展的默认设置(通过使用$.extend)。
在这个例子中,调用tooltip插件时覆写了默认设置中的location选项,background-color选项保持默认值;

(function ($) {
    $.fn.tooltip = function (options) {
        //创建一些默认值,拓展任何被提供的选项
        var settings = $.extend({
            'location': 'top',
            'background-color': 'blue'
        }, options);
        return this.each(function () {
            // Tooltip插件代码
        });
    };
})(jQuery);

$('div').tooltip({
    'location': 'left'
});

插件方法
在任何情况下,一个单独的插件不应该在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);

$('div').tooltip(); // 调用init方法

$('div').tooltip({
    foo: 'bar'
}); // 调用init方法 

$('div').tooltip('hide'); // 调用hide方法

$('div').tooltip('update', 'This is the new tooltip content!'); // 调用Update方法

事件
允许绑定事件命名空间。如果你的插件绑定一个事件,一个很好的做法是赋予此事件命名空间。

具体详情在下面链接中

数据
通常在插件开发的时候,可能需要记录或者检查你的插件是否已经被初始化给了一个元素。 使用jQuery的data方法是一 个很好的基于元素的记录变量的途径。

具体详情在下面链接中

总结和最佳做法

始终包裹在一个封闭的插件:
    (function($) {
    /* plugin goes here */
    })(jQuery);
在插件的功能范围内不要冗余包裹this关键字
除非插件返回特定值,否则总是返回this关键字来维持chainability 。
传递一个可拓展的默认对象参数而不是大量的参数给插件。
不要在一个插件中多次命名不同方法。
始终命名空间的方法,事件和数据。

封装插件--1
封装插件--2

脚本宝典总结

以上是脚本宝典为你收集整理的jQuery扩展全部内容,希望文章能够帮你解决jQuery扩展所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。