本文介绍如何在JavaScript中通过匿名函数(闭包)构建伪命名空间,以封装和保护内部函数、对象及变量。同时演示如何将特定内部函数挂载到window对象,使其在命名空间外部可被调用,从而平衡代码隔离性与全局访问需求。
JavaScript 命名空间封装与全局暴露实现指南
构建JavaScript命名空间的方法十分直观:只需将自定义的函数、对象或变量包裹在一个匿名函数内,即可形成一个伪命名空间。
基础实现代码如下:
(function(){
function $(id){
return document.getElementById(id);
}
function alertNodeName(id){
alert($(id).nodeName);
}
})(); 采用这种伪命名空间机制,能够有效封装并保护内部的所有函数、对象和变量。由于这些元素处于同一函数作用域内,它们彼此之间可以相互访问;然而,位于该伪命名空间外部的脚本则无法直接调用这些内部函数。
若需让外部脚本能够调用这些函数,首先需要初始化一个window对象。
具体实现代码如下:
(function(){
if(!window.myNamespace){window['myNameSpace']={};}
function $(id){
return document.getElementById(id);
}
function alertNodeName(id){
alert($(id).nodeName);
}
})(); 接下来,将需要对外暴露的函数(也可选择不重命名)赋值给window对象中的myNameSpace属性。
完整代码如下:
(function(){
if(!window.myNamespace){window['myNameSpace']={};}
function $(id){
return document.getElementById(id);
}
function alertNodeName(id){
alert($(id).nodeName);
}
window['myNameSpace']['showNodeName'] = alertNodeName;
})(); 通过上述步骤,即可成功构建一个自定义的命名空间。
完整HTML示例代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<SCRIPT LANGUAGE="JavaScript">
<!--
(function(){
function $(id){
return document.getElementById(id);
}
function alertNodeName(id){
alert($(id).nodeName);
}
window['myNameSpace'] = {};
window['myNameSpace']['showNodeName'] = alertNodeName;
})();
function Test(){
myNameSpace.showNodeName("T");
}
//-->
</SCRIPT>
</HEAD>
<BODY onload="Test()">
<INPUT TYPE="text" NAME="T" ID="T" VALUE="Test">
</BODY>
</HTML>