早该知道的7个JavaScript技巧(1)(2)

时间:2013-03-06 14:58来源:未知作者:admin 点击: 次

分享到：

匿名函数和模块化在JavaScript里最令人懊恼的事情是变量没有使用范围。任何变量，函数，数组，对象，只要不在函数内部，都被认为是全局的，这就是说

匿名函数和模块化

在JavaScript里最令人懊恼的事情是变量没有使用范围。任何变量，函数，数组，对象，只要不在函数内部，都被认为是全局的，这就是说，这个页面上的其它脚本也可以访问它，而且可以覆盖重写它。

解决办法是，把你的变量放在一个匿名函数内部，定义完之后立即调用它。

例如，下面的写法将会产生三个全局变量和两个全局函数：

var name = 'Chris';  
var age = '34';  
var status = 'single';  
function createMember(){  
 // [...]  
}  
function getMemberDetails(){  
 // [...]  
}

如果这个页面上的其它脚本里也存在一个叫 status 的变量，麻烦就会出现。

如果我们把它们封装在一个 myApplication 里，

这个问题就迎刃而解了：

var myApplication= function(){  
var name = 'Chris';  
var age = '34';  
var status = 'single';  
function createMember(){  
// [...]  
 }  
function getMemberDetails(){  
 // [...]  
 }  
}();

但是，这样一来，在函数外面就没有什么功能了。如果这是你需要的，那就可以了。你还可以省去函数的名称：

(function(){  
var name = 'Chris';  
var age = '34';  
 var status = 'single';  
 function createMember(){  
// [...]  
 }  
 function getMemberDetails(){  
 // [...]  
 }  
})();

如果你想在函数外面也能使用里面的东西，那就要做些修改。

为了能访问 createMember() 或 getMemberDetails(),

你需要把它们变成 myApplication的属性，从而把它们暴露于外部的世界:

var myApplication = function(){  
 var name = 'Chris';  
 var age = '34';  
 var status = 'single';  
 return{  
 createMember:function(){  
// [...]  
 },  
 getMemberDetails:function(){  
 // [...]  
 }  
 }  
}();  
//myApplication.createMember() 和  
//myApplication.getMemberDetails() 就可以使用了。

这被称作 module 模式或 singleton。

Douglas Crockford 多次谈到过这些，Yahoo User Interface Library YUI 里对此有大量的使用。

但这样一来让我感到不便的是，我需要改变句式来使函数和变量能被外界访问。更甚者，调用时我还需要加上myApplication 这个前缀。所以，我不喜欢这样做，我更愿意简单的把需要能被外界访问的元素的指针导出来。这样做后，反倒简化了外界调用的写法：

 var myApplication = function(){  
 var name = 'Chris';  
 var age = '34';  
 var status = 'single';  
 function createMember(){  
 // [...]  
 }  
 function getMemberDetails(){  
 // [...]  
 }  
 return{  
 create:createMember,  
 get:getMemberDetails  
 }  
}();  
//现在写成 myApplication.get()和 myApplication.create() 就行了。