javaScript 命名空间

最新推荐文章于 2023-11-26 02:09:01 发布

daiwei15

最新推荐文章于 2023-11-26 02:09:01 发布

阅读量2.9k

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签： javascript function generator html 脚本 input

本文链接：https://blog.youkuaiyun.com/daiwei15/article/details/7660033

JavaScript 专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何通过使用匿名函数封装函数、对象和变量来创建JavaScript命名空间，以避免命名冲突，并展示了如何让这些封装的元素可以在外部被调用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

命名空间，一看就知道主要目的是为了避免冲突。下面就来说一下如何打造自己的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对象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>