javascript中的模块和名字空间是不可区分的内容。
我们定义的每个单独的函数,都是作为全局对象的一个属性。而javascript代码模块化,所必须遵守的最重要的规则就是:避免定义全局变量。因为,当定义一个全局变量时,都有被 其它模块覆盖的危险。所以模块化编码要用如下方式:
var ModuleClass = {};
ModuleClass.函数名1=function(){
函数体;//这个函数看起来是一个对象的方法。对,可以利用对象作为一个名字空间
}
ModuleClass.函数名2=function(){
函数体;
}
使用对象作为一个名字空间,将所有的函数及变量都放在其中。这样,即使函数或变量重名( 即不同对象中有相同函数名),它们不在一个名字空间中,这样就不会有被覆盖的危险了。
javascript模块化的第一条规则:一个模块不应该为全局名字空间添加多于一条的标记。解释:上例中的
var ModuleClass = {};其实是在全局名字空间(全局对象)的一个属性。通俗的讲:除了给全局命名空间定义一个模块的命名空间,其它的你一句代码都不要写)
将上面的代码放入一个*.js文件中,以便模块的复用,并且使文件名与名字空间名要一致。假设我们将上面的代码放入
ModuleClass.js文件当中(这时,你的名字空间与文件名要一致)。现在又出现了一个新的问题:
如果名字冲突怎么办?即两个人同时使用了同一个文件名。大家知道,同一目录下是不允许有相同的文件名的,所以可以把这两个文件放入不同的目录下面。如
util/MoudleClass.js 和
tools/MoudleClass.js,这时我们文件中的空间就不能跟以前那样了,而是如下面所示:
util/ModuleClass.js代码:
var util;
if(!util) util = {};//第一级域名
util.ModuleClass = {};//第二级域名
util.ModuleClass.函数名1=function(){
函数体;
}
util.ModuleClass.函数名2=function(){
函数体;
}
tools/ModuleClass.js代码:
var tools;
if(!tools) tools={};//一级域名
tools.ModuleClass = {};//二级域名
tools.ModuleClass.函数名1=function(){
函数体;//这个函数看起来是一个对象的方法。对,可以利用对象作为一个名字空间
}
tools.ModuleClass.函数名2=function(){
函数体;
}
这样就不会出冲突了。当然,有人会问了,要是有人定义的文件夹名也是一样的,那不照样冲突?首先,这样的机率不大,如果真的有,我们可以使用java的命名方式。如下:
命名空间为:
com.公司名.项目名.util.空间名;
实际路径为:
com/公司目录/项目目录/util/空间名.js
现在我们只以
com.util.ModouleClass命名空间为例来看一段代码:
var com;
if(!com) com={};//如果com不存在,则新生成一个
else if(typeof com!="object"){//如果已存在,但不是一个对象,则抛出一个异常
throw new Error("com already exists and is not an object");
}
if(!com.util) com.util={};//如果com.util不存在则新生成一个
else if(typeof com.util!="object"){//如果com存在,但不是一个对象,则抛出一个异常
throw new Error("com.util already exists and is not an object");
}
if(!com.util.ModuleClass){//如果com.util.ModuleClass存在,则直接抛出异常
throw new Error("com.util.ModuleClass already exists");
}
com.util.ModuleClass = {//在com.util.ModuleClass不存在的情况下,我们才能正常使用在此命名空间下定义的代码
函数1:function(){ 函数体; },
函数2:function(){ 函数体; }
};
分享到:
相关推荐
JavaScript模块和名字空间是解决代码组织和防止全局变量冲突的关键概念。随着JavaScript应用程序变得越来越复杂,模块化成为了必要的开发模式。JavaScript本身并没有内置的语言特性来处理模块,但开发者可以通过遵循...
标签"JavaScript开发-地图"暗示了这个压缩包可能包含一个JavaScript库或模块,用于地图开发中的位置空间索引。"mourner-geokdbush-da7382a"这个文件名可能是该库的特定版本,"mourner"可能是作者的名字,"geokdbush...
第10章模块和名字空间 第11章使用正则表达式的模式匹配 第12章脚本化Java 第二部分客户端JavaScript 第13章Web浏览器中的JavaScript 第14章脚本化浏览器窗口 第15章脚本化文档 第16章层叠样式表和动态HTML 第17章...
犀牛JavaScript(第5版) JavaScript概述 语法结构 数据类型和值 变量 表达式和运算符 语句 对象和数组 函数 构造函数和原型 模块和名字空间 使用正则表达式的模式匹配 脚本化java 客户端 JavaScript
第10章 模块和名字空间 第11章 使用正则表达式的模式匹配 第12章 脚本化Java 第二部分 客户端JavaScript 第13章 Web浏览器中的JavaScript 第14章 脚本化浏览器窗口 第15章 脚本化文档 第16章 ...
在JavaScript中,匿名函数、函数直接量和闭包是三种非常重要的概念,它们在编程实践中有着广泛的应用。让我们逐一深入探讨这些概念。 1. **匿名函数**: 匿名函数是指没有名字的函数,通常作为表达式的一部分存在...
JavaScript 与Java虽然名字相似,但它们之间并无直接关系,JavaScript更加轻量级,主要应用于浏览器环境,处理DOM(文档对象模型)操作、事件处理、Ajax异步通信等。 手册中可能包括以下几个重要的JavaScript知识点...
在IT行业中,文件上传与下载是Web应用中的常见功能,特别是在协作、分享和存储平台中。...这个模块的源代码(如果包含在压缩包中)将是对这些知识点的具体实现,通过分析代码,可以更深入地学习和理解这些概念。
在深入学习JavaScript的过程中,还需要理解闭包、原型链、作用域、模块化等高级概念,掌握错误处理和调试技巧,了解性能优化的方法。随着技术的发展,JavaScript也在不断演进,ES6(ECMAScript 2015)及其后续版本...
书中还可能涵盖了ES6之后的版本,比如ES2015引入的类和模块,这些特性使得JavaScript更接近传统的面向对象语言。类提供了一种更简洁的语法来定义构造函数和原型,模块系统则解决了全局命名空间污染的问题,使得代码...
对于存在依赖关系的模块定义,可以在 `define` 函数的第一个参数中列出依赖模块的名字数组。 ```javascript define(["utils"], function(utils) { var greet = function(name) { return utils.format("Hello, %s!...
在QQ空间中,JavaScript代码可以实现计时器、动画效果、自动滚动等高级功能。 4. **AJAX**:异步JavaScript和XML,虽然名字里有XML,但如今更常与JSON一起使用。它允许不刷新整个页面的情况下更新部分内容,提升...
这个名为"matriz.java"的文件,尽管名字中包含了".java",但根据上下文,我们可以假设它实际上是JavaScript代码文件,可能包含了一系列用于矩阵操作的函数。这些函数可能包括但不限于矩阵的初始化(创建矩阵)、矩阵...
此外,JavaScript的模块系统允许开发者组织代码,避免全局命名空间污染。CommonJS是Node.js环境下的模块规范,而ES6引入了import和export关键字,实现了静态的模块导入导出。 JavaScript语言参考.chm文件很可能是...
JavaScript,也被称为JS,是一种广泛应用于网页和网络应用的脚本语言,主要在客户端运行,为用户提供动态交互体验。...无论是学习基础知识,还是深入研究高级特性,JavaScript都能提供广阔的学习空间和丰富的实践机会。
- **命名空间注释**:对于命名空间级别的注释,应该描述该命名空间的目的和作用域。 - **类注释**:类的注释应该描述类的功能和职责。 - **函数/方法注释**:函数或方法的注释应描述其功能、参数和返回值。 - **事件...
5. **模块化**:熟悉CommonJS、ES6模块或webpack等工具,以组织和管理代码,避免全局命名空间污染。 6. **GLIGEN GUI使用**:研究提供的"说明.txt"文档,理解组件的用法、属性和方法,学会如何自定义和扩展GUI。 7...
在Flexbox Froggy游戏中,玩家可能会通过解决各种布局问题来学习Flexbox的概念,例如如何设置方向、对齐方式、项目顺序,以及如何调整元素的大小和空间分布。这样的互动学习方式可以帮助开发者直观地理解Flexbox的...
格式化日期类,此外还有一个Helper管理器,核心模块中用来管理Helper的子模块: 一个Helper是指同时满足如下条件的一个对象: Helper是一个不带有可枚举proto属性的简单对象(这意味着你可以用for...in...枚举一个...