这个javascript的目的是什么?
我遇到了以下javascript:这个javascript的目的是什么?,javascript,Javascript,我遇到了以下javascript: <body> <script type="text/javascript"> (function() { alert('test'); })(); </script> (功能(){ 警报(“测试”); })(); 我很好奇把代码放在函数里面的目的是什么?如果只是这样写的话,这不是也会发生同样的事情吗 <body> <
<body>
<script type="text/javascript">
(function() {
alert('test');
})();
</script>
(功能(){
警报(“测试”);
})();
我很好奇把代码放在函数里面的目的是什么?如果只是这样写的话,这不是也会发生同样的事情吗
<body>
<script type="text/javascript">
alert('test');
</script>
警报(“测试”);
它通常用于确保代码中使用的所有变量的值仅取自此代码片段-局部范围。它们忽略在代码段外部定义的变量
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
对象传递到函数中,它获得本地作用域变量名$
,它将优先于全局作用域原型$
(它有完全不同的可用方法)。通常用于创建私有作用域,并且不会污染全局作用域。然而,在这种情况下,没有任何好处
例如:
(function() {
var counter = 0;
$('#elem').click(function() {
counter += 1;
alert('#elem has been clicked ' + counter + ' times!');
});
}());
这里,计数器变量是封闭函数内部代码的私有变量。封闭函数中定义的其他函数可以访问这些变量(它们关闭变量;它们是闭包)
这通常称为,在这种情况下,是的。但是
将代码放入函数中,然后立即执行它,是隔离变量的一种方法,因为JavaScript实际上只有两个作用域:全局和函数。如果在
警报之前定义了一个变量,比如说,将其全部保留在另一个函数中会创建一个新的作用域,从而防止损坏同名的全局变量。在这种情况下,它没有多大作用<代码>警报(“测试”)
将在任何情况下运行,并且不会重复使用
但更一般地说,通过将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>
投票!
函数countClicks(){
var x=0;
x+=1
document.getElementById(“计数”).innerHTML=x;
var clickLimit=1;//最大点击次数
如果(x>=单击限制){
警报('您只能单击一次')
}
其他的
{
点击计数++;
返回true;
}
}
虽然大多数jQuery插件都使用这种模式,但这远远不是这种模式的主要用途。为了解决这个问题,我更新了一个选项:)“它们忽略在代码段之外定义的变量。”这是错误的。试着去掉第二个var a=5
。这是JS中所有var声明都隐式移动到函数开头这一事实的副作用(这也是JSLint对类似代码发出警告的原因)