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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/1991126/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 12:32:39  来源:igfitidea点击:

Difference between jQuery.extend and jQuery.fn.extend?

jquerysyntaxpluginsextend

提问by Richard

I am trying to understand the jquery plugin syntax, because I want to merge two plugins into one. The blinker that also needs to be able to stop de interval or run a number of times.

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

Anyway, is this syntax the same as

无论如何,这种语法是否与

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);
        });
    },

this

这个

$.fn.blink = function(options)
    {

because it looks like the first(without =) is a way to set multiple methods at once. Is this right? Also while I am here What would be the reason to add the elements and some logic to the jquery object?

因为看起来第一个(没有 =)是一种同时设置多个方法的方法。这是正确的吗?另外,当我在这里时,将元素和一些逻辑添加到 jquery 对象的原因是什么?

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

(this is from the timer plugin)

(这是来自计时器插件)

回答by Philippe Leybaert

jQuery.extend is used to extend any object with additional functions, but jQuery.fn.extend is used to extend the jQuery.fn object, which in fact adds several plugin functions in one go (instead of assigning each function separately).

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

jQuery.extend:

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

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

// creates 2 plugin functions (x and y)

回答by Dinesh

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

usage: $.abc(). (No selector required like $.ajax().)

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

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

usage: $('.selector').xyz(). (Selector required like $('#button').click().)

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

Mainly it is used to implement $.fn.each().

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

I hope it helps.

我希望它有帮助。

回答by Bergi

Difference between jQuery.extend and jQuery.fn.extend?

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

Actually, there is none apart from their base reference. In the jQuery source, you can read:

实际上,除了它们的基本参考之外,没有任何东西。在jQuery 源代码中,您可以阅读:

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

So how does it work? The documentationreads:

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

Merges the contents of two or more objects together into the first object.

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

It's just a for-in-loop that copies properties, pimped up with a flag to recurse nested objects. And another feature:

它只是一个用于复制属性的 for-in 循环,并带有一个标志来递归嵌套对象。还有一个特点:

If only one argument is supplied to $.extend(), this means the target argument was omitted

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

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

So if the function is called on jQueryitself (without explicit target), it will extend the jQuery namespace. And if the function is called on jQuery.fn(without explicit target), it will extend the jQuery prototype object where all the (plugin) methods are located.

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

回答by gavenkoa

This blog posthave nice description:

这篇博文有很好的描述:

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

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

Quotes:

引号:

As a general rule, you should extend the jQuery object for functions and the jQuery.fn object for methods. A function, as opposed to a method, is not accessed directly from the DOM.

作为一般规则,您应该为函数扩展 jQuery 对象,为方法扩展 jQuery.fn 对象。与方法相反,函数不能直接从 DOM 访问。

回答by Shishir Arora

$.fn.something= function{};

points to the jQuery.prototype and lets access dom elements through "this". Now u may use $(selector).something();So this works as plugin function like $(selector).css();

指向 jQuery.prototype 并让我们通过“this”访问 dom 元素。现在你可以使用$(selector).something();所以这可以作为插件功能使用$(selector).css();

$.something = function{};

adds a property or function to the jQuery object itself and u cannot use "this" for dom access Now u may use it as $.something(); this works as a utility function as $.trim()

向 jQuery 对象本身添加一个属性或函数,你不能使用“this”来访问 dom 现在你可以将它用作$.something(); 这作为一个效用函数$.trim()

but

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

allows adding more than 1 function at the same time.Also they can be used to merge two object literals in case we provide more than one objects.

允许同时添加 1 个以上的函数。此外,它们可用于合并两个对象文字,以防我们提供多个对象。