javascript中的模块和名字空间是不可区分的内容。
我们定义的每个单独的函数,都是作为全局对象的一个属性。而javascript代码模块化,所必须遵守的最重要的规则就是:避免定义全局变量。因为,当定义一个全局变量时,都有被 其它模块覆盖的危险。所以模块化编码要用如下方式:
javascript模块化的第一条规则:一个模块不应该为全局名字空间添加多于一条的标记。解释:上例中的[color=blue] var ModuleClass = {};[/color]其实是在全局名字空间(全局对象)的一个属性。通俗的讲:除了给全局命名空间定义一个模块的命名空间,其它的你一句代码都不要写)
将上面的代码放入一个*.js文件中,以便模块的复用,并且使文件名与名字空间名要一致。假设我们将上面的代码放入[color=indigo]ModuleClass.js[/color]文件当中(这时,你的名字空间与文件名要一致)。现在又出现了一个新的问题:
如果名字冲突怎么办?即两个人同时使用了同一个文件名。大家知道,同一目录下是不允许有相同的文件名的,所以可以把这两个文件放入不同的目录下面。如[color=darkblue]util/MoudleClass.js[/color] 和 [color=darkblue]tools/MoudleClass.js[/color],这时我们文件中的空间就不能跟以前那样了,而是如下面所示:
[color=blue]util/ModuleClass.js[/color]代码:
[color=blue]tools/ModuleClass.js[/color]代码:
这样就不会出冲突了。当然,有人会问了,要是有人定义的文件夹名也是一样的,那不照样冲突?首先,这样的机率不大,如果真的有,我们可以使用java的命名方式。如下:
命名空间为:[color=red]com.公司名.项目名.util.空间名;[/color]
实际路径为:[color=red]com/公司目录/项目目录/util/空间名.js[/color]
现在我们只以[color=red]com.util.ModouleClass[/color]命名空间为例来看一段代码:
我们定义的每个单独的函数,都是作为全局对象的一个属性。而javascript代码模块化,所必须遵守的最重要的规则就是:避免定义全局变量。因为,当定义一个全局变量时,都有被 其它模块覆盖的危险。所以模块化编码要用如下方式:
var ModuleClass = {};
ModuleClass.函数名1=function(){
函数体;//这个函数看起来是一个对象的方法。对,可以利用对象作为一个名字空间
}
ModuleClass.函数名2=function(){
函数体;
}
使用对象作为一个名字空间,将所有的函数及变量都放在其中。这样,即使函数或变量重名( 即不同对象中有相同函数名),它们不在一个名字空间中,这样就不会有被覆盖的危险了。
javascript模块化的第一条规则:一个模块不应该为全局名字空间添加多于一条的标记。解释:上例中的[color=blue] var ModuleClass = {};[/color]其实是在全局名字空间(全局对象)的一个属性。通俗的讲:除了给全局命名空间定义一个模块的命名空间,其它的你一句代码都不要写)
将上面的代码放入一个*.js文件中,以便模块的复用,并且使文件名与名字空间名要一致。假设我们将上面的代码放入[color=indigo]ModuleClass.js[/color]文件当中(这时,你的名字空间与文件名要一致)。现在又出现了一个新的问题:
如果名字冲突怎么办?即两个人同时使用了同一个文件名。大家知道,同一目录下是不允许有相同的文件名的,所以可以把这两个文件放入不同的目录下面。如[color=darkblue]util/MoudleClass.js[/color] 和 [color=darkblue]tools/MoudleClass.js[/color],这时我们文件中的空间就不能跟以前那样了,而是如下面所示:
[color=blue]util/ModuleClass.js[/color]代码:
var util;
if(!util) util = {};//第一级域名
util.ModuleClass = {};//第二级域名
util.ModuleClass.函数名1=function(){
函数体;
}
util.ModuleClass.函数名2=function(){
函数体;
}
[color=blue]tools/ModuleClass.js[/color]代码:
var tools;
if(!tools) tools={};//一级域名
tools.ModuleClass = {};//二级域名
tools.ModuleClass.函数名1=function(){
函数体;//这个函数看起来是一个对象的方法。对,可以利用对象作为一个名字空间
}
tools.ModuleClass.函数名2=function(){
函数体;
}
这样就不会出冲突了。当然,有人会问了,要是有人定义的文件夹名也是一样的,那不照样冲突?首先,这样的机率不大,如果真的有,我们可以使用java的命名方式。如下:
命名空间为:[color=red]com.公司名.项目名.util.空间名;[/color]
实际路径为:[color=red]com/公司目录/项目目录/util/空间名.js[/color]
现在我们只以[color=red]com.util.ModouleClass[/color]命名空间为例来看一段代码:
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(){ 函数体; }
};