当我们学习javascript,我们把所有的注意力都给了变量,函数,条件语句,循环和事件,很少注意到我们该如何组织我们的代码在一个紧密相连的结构里面。
我们拿下面的代码来做个试验:
var foo='hello';
var bar='world';
function baz(){
return foo+" "+bar;
}
console.log(baz());
这种风格的代码看起来好像没有什么问题,运行的很好,不会导致任何错误,在目前来看是的!
但是当这些代码,被应用在一个庞大的应用里面的时候,开始变成了一个大麻烦,全局命名空间里面被这些紧密相连的函数,变量充满,这将会导致许多的可能会有的未知的错误。
想要让你的代码变的优美和模块,在javascript中第一步要学习的就是自我执行匿名函数:
(function(){
console.log('hello world');
})();
第一部分就是匿名函数:
(function(){
//Normal codes goes here
})
真正有趣的部分是当我们向这个匿名函数结尾的的右边添加下面的东西:
();
这个小括号将导致前面的在前面的括号内的所有的代码被立即执行
所有的变量和函数--在匿名函数内定义的都不能被外面的代码访问,有效的利用了闭包将自己和外面的世界隔开了。
我们有这种设计模式把我们前面的栗子包裹起来:
(function(){
var foo='hello';
var bar='world';
function baz(){
return foo+" "+bar;
}
})();
console.log(foo);
console.log(bar);
console.log(baz());
最后的三行都会爆出错误。理由是foo,bar,baz()都没有定义,现在在上面的代码中外部的代码是无法访问匿名函数内部的代码的。为了访问内部代码我们需要将里面的一个定义为全局的对象
(function(){
var foo='hello';
var bar='world';
function baz(){
return foo+" "+bar;
}
window.baz=baz;
})();
//console.log(foo);//won't work
//console.log(bar);//won't work
console.log(baz());//'hello world'
我们可以传入参数到我们的匿名函数内部:
(function(window){
var foo='hello';
var bar='world';
function baz(){
return foo+" "+bar;
}
window.baz=baz;
})(window);
当你使你的代码变得有意义,这中设计模式将会变得很有好处,
全部和window有关的代码在函数内部可以被重新命名为另个名字比如“a”:
(function(a){
console.log(a===window);//true
})(window);
(function(a){
var x;
console.log(x===window);//false
console.log(x===undefined);//true
console.log(a===window);//true
})(window);
在函数内参数名纯粹是一种约定,起到占位符的作用,即使你不写参数名也没事还是会有参数,传入的实参将会被保存在一个arguments对象里面里面,访问参数就需要argument[i]
这种设计模式的好处在你以后的实践中将会越来越明显,自动执行匿名函数会允许你去创建更复杂的但是却更加的直观和结构化的大型项目,并且让项目变得易于管理。