я наткнулся на следующую JavaScript:Какова цель этого javascript?
<body>
<script type="text/javascript">
(function() {
alert('test');
})();
</script>
И мне было интересно, что цель иметь код внутри функции есть? Не будет ли это сделать то же самое, если бы это было просто написано так:
<body>
<script type="text/javascript">
alert('test');
</script>
Обычно это используется для создания частной области действия и не загрязняет глобальную область. В этом случае, однако, нет никакой пользы.
Пример:
(function() {
var counter = 0;
$('#elem').click(function() {
counter += 1;
alert('#elem has been clicked ' + counter + ' times!');
});
}());
Здесь счетчик переменная является частным кода внутри функции включения. Другие функции, определенные в закрывающей функции, имеют доступ к этим переменным (они закрывают переменными, они являются замыканиями).
Это обычно называется Immediately Invoked Function Expression
Это часто используется, чтобы гарантировать, что все переменные, используемые в коде принимает значения из этого фрагмента кода только - локальная область видимости. Они игнорируют переменные, определенные вне фрагмента.
var a = 10;
(function() {
alert(a); // undefined
var a = 5;
alert(a); // 5
})();
Другой ее основное назначение заключается в обеспечении код будет работать в одной библиотеке JavaScript (например, JQuery), даже при наличии нескольких библиотек (например, Prototype, Mootools), которые используются на этой странице. Вы бы сделать что-то вроде ...
(function($) {
alert('test');
// You can now use the jQuery $ in here
// And not worry about the Prototype $ being used instead
})(jQuery);
Пропустив jQuery объект в функцию, он получает локальную переменную сферу имени $, которая будет иметь приоритет над глобальной областью действия прототип $ (который имеет доступны совершенно разные методы).
В то время как это используется большинством плагинов jQuery, это ** далеко не является основным использованием этого шаблона **. – arnaud576875
Обновлено, чтобы исправить это, мой плохой :) – Joe
«Они игнорируют переменные, определенные за пределами фрагмента». неправильно. Попробуйте убрать второй «var a = 5». Это является побочным эффектом того факта, что в JS все объявления var неявно перемещаются в начале функции (и именно по этой причине JSLint дает предупреждение для кода, подобного этому) – xanatos
В этом случае, да. Но.
Ввод кода внутри функции, а затем ее выполнение, является одним из способов изолировать переменные, так как у JavaScript действительно есть только две области: глобальная и функция. Если бы существовала переменная, определенная до alert, скажем, сохраняя все это в рамках другой функции, создается новая область, предотвращая уничтожение глобальной переменной с тем же именем.
В этом случае это не так много. alert("test") будет работать независимо от того, что и не будет использоваться повторно.
Но в общем случае, обернув свой JavaScript (часто полный файл) в анонимной функции, вы можете предотвратить загрязнение глобальных переменных и функций, что помогает избежать конфликтов с другим кодом.
Здесь я показал вам, почему у вас есть возможность функции с предупреждением. Я хотел, чтобы люди знали, когда они нажимают на мою кнопку, они могут только щелкнуть ее один раз, поэтому я добавил предупреждение. Функция - это то, что я создаю (кнопка, которая добавляет голосование &, а затем отображает количество голосов), а предупреждение - просто дополнение.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Vote!</title>
<script type="text/javascript">
function countClicks() {
var x = 0;
x += 1
document.getElementById("counting").innerHTML = x;
var clickLimit = 1; //Max number of clicks
if(x>=clickLimit) {
alert('you can only click once')
}
else
{
ClickCount++;
return true;
}
}
</script>
</head>
<body>
<div style="margin-left:100px;">
<input type="button" value="VOTE" name="clickOnce" onclick="return countClicks();" />
<div id="counting"></div>
</body>
</html>
+1 для связанной статьи. Очень информативно. – MTLPhil