通过检查jQuery元素更好地理解Javascript

Question

由于jQuery是广泛使用且成熟的协作成果，因此我不禁要看一下它的源代码，以编写更好的Javascript。 我一直在使用jQuery库以及PHP应用程序，但是当我看一下这个相当复杂的库的时候，我意识到我对Javascript还不了解多少。 恩，我对SO社区有一些疑问。 首先，请考虑以下代码...

$('#element').attr('alt', 'Ivan is SUPER hungry! lolz');

与

$('#element').attr({'alt': 'Ivan is an ugly monster! omfgz'});

现在，这是说attr()方法旨在接受属性名称，属性名称和值或成对值映射吗？ 有人可以简短地解释一下地图实际上是什么以及它与Javascript中的数组不同的重要方式吗？

继续前进，整个图书馆都被包裹在这项业务中...

(function(window, undefined) { /* jQuery */ })(window);

我知道换行的括号会导致类似于body onLoad="function();"的行为body onLoad="function();" ，但这种做法叫什么，它与使用onLoad事件处理程序有什么不同？ 另外，我无法在那末尾(window)正面或反面。 这里的window对象到底发生了什么？

我认为对象与Javascript中的函数没有区别吗？ 如果我错了，请纠正我，但是$()是包含所有jQuery的对象，但它看起来就像一个方法。 这是另一个带有代码示例的快速问题...

$('#element').attr('alt', 'Adopt a Phantom Cougar from Your Local ASPCA');

...内部应该看起来像这样（也许我错了）...

function $(var element = null) {
    if (element != null) {
        function attr(var attribute = null, var value = null) {
            /* stuff that does things */
        }
    }
}

这是在Javascript中定义对象及其子方法和属性的常规过程吗？ 比较Javascript与PHP，您是否使用句号. 使用->从对象检索方法的方式是否相同？

我为此冗长，我为此表示歉意，但是对这些问题的回答将向我展示很多有关jQuery和Javascript的信息。 谢谢！

Answer 1

1.方法重载

$('#element').attr('alt', 'Ivan is SUPER hungry! lolz');

与

$('#element').attr({'alt': 'Ivan is an ugly monster! omfgz'});

var attr = function (key, value) {
  // is first argument an object / map ?
  if (typeof key === "object") {
    // for each key value pair
    for (var k in key) {
      // recursively call it.
      attr(k, key[k]);
    }
  } else {
    // do magic with key and value
  }
}

2.关闭

(function(window, undefined) { /* jQuery */ })(window);

不用作onload处理程序。 它只是在函数内部创建新作用域。

这意味着var foo是局部变量，而不是全局变量。 它还创建了一个真正的undefined变量以使用，因为未指定的参数会传入undefined

这将window.undefined = true ，这是有效/允许的。

（窗口）位在最后。 这里的窗口对象到底发生了什么？

它通过使其局部化来微优化窗口访问。 局部变量访问比全局变量访问快约0.01％

我认为对象与Javascript中的函数没有区别吗？

是的，没有。 所有功能都是对象。 $()只是返回一个新的jQuery对象，因为在内部它会调用return new jQuery.fn.init();

3.您的摘要

function $(var element = null) {

Javascript不支持默认参数值或可选参数。 模拟此的标准做法如下

function f(o) {
  o != null || (o = "default");
}

比较Javascript与PHP，您是否使用句号。 使用->从对象检索方法的方式是否相同？

您可以使用foo.property或foo["property"]访问对象的属性，属性可以是任何类型，包括函数/方法。

4.问题中隐藏的其他问题

有人可以简短地解释一下地图实际上是什么以及它与Javascript中的数组不同的重要方式吗？

使用var a = []创建的数组仅包含一个键值对列表，其中所有键均为正数。 它还具有所有Array methods 。 数组也是对象。

地图只是一个对象。 一个对象只是一袋键值对。 您在对象的键下分配一些数据。 该数据可以是任何类型。

Answer 2

对于attr ，如果您提供一个对象而不是一个键值对，它将在每个属性上循环。 查找attr:在jQuery的代码中，然后您将看到它使用access 。 然后寻找access:您将看到key类型是否为对象的检查，开始循环。

函数中的换行是为了防止内部的所有代码都可以从外部访问，并引起不必要的问题。 传递的唯一参数是允许设置全局变量和访问DOM的window 。 我想undefined是要更快地检查此特殊值。

我有时读过jQuery，但我不是从它开始的，可能是您应该先获得一些好书，以使您首先了解Javascript的某些高级功能，然后将您的知识应用于jQuery的特定知识。

Answer 3

1-是的attr可以接受用于获取值的属性名称，用于设置一个值的名称和值或属性名称和值的映射以用于设置多个属性

2-映射基本上是JavaScript object例如：

var map = {
    'key1' : 'value1',
    'key2' : 'value2'
};

3- (function(window, undefined) { /* jQuery */ })(window); 被称为anonymous function因为它没有名称。 在这种情况下，它也会立即执行。

一个简单的例子是：

function test(){
    ...
}

test();

//As an anonymous function it would be:

(function(){
    ...

}();

//And it you wanted to pass variables:

function test(abc){
    ...
}

test(abc);

//As an anonymous function it would be:

(function(abc){
    ...

}(abc);

这将使其不同于load事件，因为它是函数而不是事件。

4- window作为变量传递，因为它在jQuery内部使用

5- Objects和functions相同，因为JavaScript中的所有内容都是一个object 。 jQuery的功能如下：

var obj = {
    "init" : function(){


    }
}

6-是的，您可以使用. 检索object上的value ，但也可以使用[]例如：

var map = {
    "test" : 1
}


map.test //1
map["test"] //1 

希望这能回答您的许多问题，如果我错过了任何事情，请告诉我。

Answer 4

jQuery 1.6.1

测试是typeof key === "object"

如果是这样，那么您通过了{....}

jQuery.fn.extend({
  attr: function( name, value ) {
    return jQuery.access( this, name, value, true, jQuery.attr );
  },

// Mutifunctional method to get and set values to a collection
// The value/s can be optionally by executed if its a function
access: function( elems, key, value, exec, fn, pass ) {
    var length = elems.length;

    // Setting many attributes
    if ( typeof key === "object" ) {
        for ( var k in key ) {
            jQuery.access( elems, k, key[k], exec, fn, value );
        }
        return elems;
    }

    // Setting one attribute
    if ( value !== undefined ) {
        // Optionally, function values get executed if exec is true
        exec = !pass && exec && jQuery.isFunction(value);

        for ( var i = 0; i < length; i++ ) {
            fn( elems[i], key, exec ? value.call( elems[i], i, fn( elems[i], key ) ) : value, pass );
        }

        return elems;
    }

    // Getting an attribute
    return length ? fn( elems[0], key ) : undefined;
},