Запустить javascript-код с помощью $(function, etc).
Я изучаю Backbone и примеры приложений todo от http://todomvc.com/
Я заметил, что есть три способа запуска кода в файлах:
$(function() {
// code here
});
$(function( $ ) {
// code here
});
(function() {
// code here
}());
Я не понимаю различий и когда я должен использовать один над другим.
Я также видел, как некоторые люди использовали это, чтобы начать свой код:
$(document).ready(function(){
// code here
});
Из того, что я видел, это полный способ правильно писать?
В более общем виде, должен ли я всегда включать код javascript в нечто подобное в каждом файле?
Спасибо за ваш совет.
Ответы
Ответ 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
}());
- это только функция с нулевыми параметрами, которая немедленно вызывается с нулевыми параметрами.