Лучшее понимание Javascript путем изучения элементов jQuery

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();", но как называется эта практика и отличается ли она от использования обработчика событий 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

Это gaurds againts 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

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

это отличает его от события загрузки, поскольку это функция, а не событие.

4 - window передается как переменная, поскольку она используется внутри jQuery

5 - Objects и functions тоже самое, что и в JavaScript все равно object. jQuery делает что-то вроде этого:

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


    }
}

6 - Да, вы можете использовать . для получения value на object, но вы также можете использовать [], например:

var map = {
    "test" : 1
}


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

Я надеюсь, что это ответит на ваши многочисленные вопросы, дайте мне знать, если я что-то пропустил.

Answer 3

Для attr, если вы дадите объект вместо пары ключ-значение, он будет зацикливаться на каждом свойстве.Найдите код attr: в коде jQuery, и вы увидите, что он использует access.Затем найдите access:, и вы увидите, что есть проверка типа key, если это объект, запустите цикл.

Обертывание в функции, чтобы предотвратить весь код внутрибыть доступным извне, и вызвать нежелательные проблемы.Единственные передаваемые параметры - window, которые позволяют устанавливать глобальные переменные и получать доступ к DOM.undefined Полагаю, это для ускорения проверки этого специального значения.

Я иногда читаю jQuery, но я не начинал с него, возможно, вам стоит найти несколько хороших книг, чтобы составить вам идеюсначала о некоторых расширенных возможностях, которые имеет Javascript, а затем примените свои знания к специфике jQuery.

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