jQuery扩大

jq–CDN

jQ — jQuery源码剖析

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

    原文作者:快乐的单身汉
    原文地址: https://segmentfault.com/a/1190000018465797
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞