jQuery.extend和jQuery.fn.extend之间的区别?


82

我想了解jquery插件的语法,因为我想将两个插件合并为一个。还需要能够间隔或停止运行多次的信号灯。

无论如何,这种语法与

jQuery.fn.extend({
    everyTime: function(interval, label, fn, times) {
        return this.each(function() {
            jQuery.timer.add(this, interval, label, fn, times);
        });
    },
    oneTime: function(interval, label, fn) {
        return this.each(function() {
            jQuery.timer.add(this, interval, label, fn, 1);
        });
    },

这个

$.fn.blink = function(options)
    {

因为看起来first(without =)是一次设置多个方法的方法。这是正确的吗?另外,当我在这里的时候,向jquery对象添加元素和一些逻辑的原因是什么?

jQuery.extend({
    timer: {
        global: [],
        guid: 1,
        dataKey: "jQuery.timer",

(来自计时器插件)


如果你的学习定制的jQuery插件的开发,我建议阅读此线程 stackoverflow.com/questions/1117086/...
CrandellWS

Answers:


89

jQuery.extend用于扩展具有附加功能的任何对象,但是jQuery.fn.extend用于扩展jQuery.fn对象,实际上它可以一次性添加多个插件功能(而不是分别分配每个功能)。

jQuery.extend

var obj = { x: function() {} }

jQuery.extend(obj, { y: function() {} });

// now obj is an object with functions x and y

jQuery.fn.extend

jQuery.fn.extend( {
        x: function() {},
        y: function() {}
});

// creates 2 plugin functions (x and y)

1
谢谢,这很清楚分配多个对象,但是我仍然不确定何时应该使用jquery.extend。为什么将在fn.extend中执行的操作传递给jquery.extend?我也可以为此提出一个新问题,因为我问了两个问题。
理查德

13
jQuery.extend()实际上是一个便捷函数,可以在您自己的javascript代码中使用它来以通用方式扩展对象。它是jQuery“实用程序”功能的一部分(不用于DOM操作)
Philippe Leybaert 2010年

74
jQuery.extend({
    abc: function(){
        alert('abc');
    }
});

用法:$.abc()。(不需要选择器,例如$.ajax()。)

jQuery.fn.extend({
    xyz: function(){
        alert('xyz');
    }
});

用法:$('.selector').xyz()。(需要选择器,如$('#button').click()。)

主要用于实现$.fn.each()

希望对您有所帮助。


20

jQuery.extend和jQuery.fn.extend之间的区别?

实际上,除了它们的基本参考没有别的。在jQuery源中,您可以阅读:

jQuery.extend = jQuery.fn.extend = function() { … };

那么它是怎样工作的?该文档的内容如下:

将两个或更多对象的内容合并到第一个对象中。

这只是一个for-in-loop,用于复制属性,并带有标记以递归嵌套对象。还有一个功能:

如果仅提供一个参数$.extend(),则意味着省略了目标参数

 // then the following will happen:
 target = this;

因此,如果函数jQuery本身(没有显式目标)被调用,它将扩展jQuery命名空间。如果调用了该函数jQuery.fn(没有显式目标),它将扩展所有(插件)方法所在的jQuery原型对象。


我的赞!对此。我在查看源代码以了解jQuery如何扩展自身
dekdev

15

这篇博客文章有很好的描述:

$.fn.extend({
myMethod: function(){...}
});
//jQuery("div").myMethod();

$.extend({
myMethod2: function(){...}
});
//jQuery.myMethod2();

语录:

通常,应将jQuery对象扩展为函数,并将jQuery.fn对象扩展为方法。与方法相对的功能不是直接从DOM访问的。


1
“直接从DOM”访问方法意味着什么?
Dan Nissenbaum '16

1
directly from the DOM指函数调用与对象属性/原型调用(在本机DOM对象周围的jQuery包装器上)的非常基本的JavaScript概念。查看示例并尝试发现差异,并思考为什么示例中的代码不可互换。
吉通科阿

9
$.fn.something= function{};

指向jQuery.prototype并允许通过“ this”访问dom元素。现在您可能会使用$(selector).something();所以这可以像插件功能一样$(selector).css();

$.something = function{};

向jQuery对象本身添加属性或函数,并且您不能将“ this”用于dom访问现在您可以将其用作$.something(); 这作为实用程序功能$.trim()

$.fn.extend({function1(), function2()}) and  $.extend({function1(), function2()}) 

允许同时添加多个功能。如果我们提供多个对象,则可以将它们用于合并两个对象文字。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.