Подтвердить что ты не робот

Запустить javascript-код с помощью $(function, etc).

Я изучаю Backbone и примеры приложений todo от http://todomvc.com/ Я заметил, что есть три способа запуска кода в файлах:

$(function() {
 // code here
});

$(function( $ ) {
 // code here
});

(function() {
 // code here
}());

Я не понимаю различий и когда я должен использовать один над другим.

Я также видел, как некоторые люди использовали это, чтобы начать свой код:

$(document).ready(function(){
  // code here
});

Из того, что я видел, это полный способ правильно писать?

В более общем виде, должен ли я всегда включать код javascript в нечто подобное в каждом файле?

Спасибо за ваш совет.

4b9b3361

Ответ 1

  • $(document).ready(function(){}) гарантирует, что ваш код работает на DOM, так что вы получите доступ к DOM. Подробнее об этом можно узнать в документации jQuery.

  • $(function(){}) - это просто псевдоним # 1. Любой код здесь будет ждать готовности DOM (см. Документы).

  • $(function($){}) эквивалентен # 1 и # 2, вы получаете только чистую ссылку на jQuery в локальной области (см. примечание ниже). Вы также можете пройти в $ к функции в # 1, и она сделает то же самое (создайте локальную ссылку на jQuery).

  • (function(){}()) - это просто self-executing-anonymous-function, используемая для создания нового закрытия.

Обратите внимание, что ни одна из них не является специфичной для Backbone. Первые 3 специфичны для jQuery, а # 4 - просто ванильный JavaScript.


Примечание. Чтобы понять, что происходит в № 3 выше, помните, что $ является псевдонимом jQuery. Однако jQuery не является единственной библиотекой, которая использует переменную $. Поскольку $ может быть перезаписан кем-то другим, вы хотите убедиться, что внутри вашей области $ всегда ссылается на jQuery - следовательно, аргумент $.


В конце концов, это в основном сводится к следующим двум опциям:

  • Если ваш JavaScript загружен в head, вам нужно подождать, когда документ будет готов, поэтому используйте это:

    jQuery(function($) {
        // Your code goes here.
        // Use the $ in peace...
    });
    
  • Если вы загрузите свой JavaScript внизу документа (перед закрывающим тегом body - который вы обязательно должны делать), тогда нет необходимости ждать готовности документа (поскольку DOM уже построена к тому моменту, когда парсер добирается до вашего script), и SEAF (AKA IIFE) будет достаточно:

    (function($) {
        // Use the $ in peace...
    }(jQuery));
    

PS Для хорошего понимания закрытий и области видимости см. JS101: краткий урок по области.

Ответ 2

Думаю, имеет смысл начать, осознав, что $ = jQuery. Цель, которая ниже при чтении об пространствах имен в анонимных функциях будет иметь больше смысла. Но в сущности, вы можете использовать любой из них. Использовать jQuery() вместо $(), если они используют несколько библиотек, и использовать $ для другого.

$(document).ready(function(){
    // Here we have jQuery(document) firing off the ready event
    // which executes once the DOM has been created in 
    // order to ensure that elements you are trying to manipulate exist.
});

​$(function () {
    // Short-hand version of $(document).ready(function () { });
});

Дополнительная информация о Document.ready()

Помещение $ в круглую скобку гарантирует псевдоним jQuery $ (вы можете быть в безопасности, это всегда означает jQuery таким образом).

$(function ($) { /* code here : $ always means jQuery now */ }); 

Наконец, у вас есть IIFE (выражение с вытесненной функцией) - Обоснование IIFE

(function (myNameSpace, $) {
    // This is an anonymous function - it is ran instantly
    // Usually used for namespaces / etc
    // This creates a scope/wrapper/closure around everything inside of it
}(window.myNameSpace, jQuery));

В верхней части (с совпадением с jQuery внизу) означает, что $ (знак доллара) означает jQuery в пределах имени name. Это делается для того, чтобы другие библиотеки не сталкивались с тем, что разработчик намеревается/хочет использовать $с.

(function (myNameSpace, $) {
    // Now because of all of this scope/wrapper/closure awesome...
    // you can create -INTERNAL- variables (sort of like Private variables from other langs) 
    // this variable cannot be accessed outside the namespace unless it is returned / exposed

    var internalVariable = '123'; // Internal

    // Even Internal functions!
    function privateFunction () {
        console.log('this is private!');
    }

    // --------------------------------------------------------
    // Public -method- of nameSpace exposing a private variable
    // Notice we're using the myNameSpace object we exposed at the top/bottom

    myNameSpace.nameSpaceMethod = function () {
        privateFunction(); // we can call the private function only inside of the namespace
        return internalVariable; // now we could get this variable
    };
}(window.myNameSpace, jQuery)); // notice these mirror the above arguments in the anon function

Дополнительная информация об анонимных функциях

Теперь, если мы вне пространства имен, мы можем увидеть, как эти внутренние/общедоступные методы и переменные выполняются:

// This will come up undefined
alert(internalVariable);

// This will trigger a -method- of the myNameSpace namespace - and alert "123"
// Showcasing how we access a Public method - which itself has access to the internal variable
// and exposes it to us!
alert(myNameSpace.nameSpaceMethod());
​

Ответ 3

Эти два:

$(function() {
 // code here
});

$(document).ready(function(){
  // code here
});

Прямо эквивалентны, они как способ запускать некоторый jQuery при загрузке документа. Первая - это только более короткая версия последней.

Этот:

(function() {
 // code here
}());

- это только функция с нулевыми параметрами, которая немедленно вызывается с нулевыми параметрами.