javaScript NameSpace 簡單說明介紹

2019-11-20 22:30:45

字體：大中小

來源：轉載

供稿：網友

打造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對象window['myNameSpace']。

復制代碼代碼如下:

 
(function(){ 
    if(!window.myNamespace){window['myNameSpace']={};} 
    function $(id){ 
        return document.getElementById(id); 
    } 
    function alertNodeName(id){ 
        alert($(id).nodeName); 
    } 
    window['myNameSpace']['showNodeName'] = alertNodeName; 
})(); 

這樣我們就打造了一個自己的命名空間。

復制代碼代碼如下:

 
<!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> 