javaScript NameSpace 简单说明介绍

 更新时间:2013年07月18日 16:54:26   作者:  
命名空间,一看就知道主要目的是为了避免冲突。下面就来说一下如何打造自己的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>

相关文章

  • 详解JavaScript中的自定义事件编写

    详解JavaScript中的自定义事件编写

    这篇文章主要介绍了JavaScript中的自定义事件编写,自定义事件是在浏览器中编写Web页面操作功能的基本方式,需要的朋友可以参考下
    2016-05-05
  • 谈谈关于JavaScript 中的 MVC 模式

    谈谈关于JavaScript 中的 MVC 模式

    本文介绍了模型-视图-控制器模式在 JavaScript 中的实现,有需要的朋友可以参考一下
    2013-04-04
  • javascript数组操作(创建、元素删除、数组的拷贝)

    javascript数组操作(创建、元素删除、数组的拷贝)

    这篇文章主要介绍了javascript数组操作,包括创建、元素的访问、元素删除、数组的拷贝等操作,还有其它示例,需要的朋友可以参考下
    2014-04-04
  • 关于reduce的介绍及用法说明

    关于reduce的介绍及用法说明

    这篇文章主要介绍了关于reduce的用法及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-07-07
  • ES6基础知识介绍

    ES6基础知识介绍

    ECMAScript 6.0(以下简称 ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
    2022-04-04
  • Javascript 二维数组

    Javascript 二维数组

    Javascript二维数组的实现代码,需要的朋友可以参考下。
    2009-11-11
  • JavaScript 闭包详细介绍

    JavaScript 闭包详细介绍

    这篇文章主要介绍了JavaScript 闭包的相关资料,需要的朋友可以参考下
    2016-09-09
  • JavaScript中OnLoad几种使用方法

    JavaScript中OnLoad几种使用方法

    在前几个项目的开发中遇到onload使用的几种情形,接下来详细介绍下
    2012-12-12
  • JavaScript稀疏数组示例教程

    JavaScript稀疏数组示例教程

    这篇文章主要为大家介绍了JavaScript稀疏数组的使用示例教程详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • ES5学习教程之Array对象

    ES5学习教程之Array对象

    这篇文章主要给大家介绍了ES5中新增的Array对象的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧。
    2017-04-04

最新评论