命名空间 || 名字空间 :
javascript中的模块和名字空间是不可区分的内容。
javascript中的模块和名字空间是不可区分的内容。
JavaScript 的命名空间并不是真正的命名空间, 只是在脚本内部创建一个封闭的小空间, 必须通过特定的空间名称才能对空间内部的代码进行访问。
作用：
这样可以防止同名函数和变量发生冲突, 也可以更方便地管理代码, 就像 .NET 的命名空间 (namespace) 和 Java 的包 (package) 一样.
这样可以防止同名函数和变量发生冲突, 也可以更方便地管理代码, 就像 .NET 的命名空间 (namespace) 和 Java 的包 (package) 一样.
为什么需要命名空间?
1. JavaScript 是不会禁止你重复定义函数和变量的, 但他只会使用最后定义的版本, 也就是说, 这将导致前面的失效, 令系统出错. 比如, $(id) 是最常用的, 也许你会毫不犹豫的在自己的脚本上定义这个函数, 但是当你用上 prototype/jQurey, 你就会发现, 它和 prototype/jQuery 的函数冲突, 并导致你的页面出错.
怎么办? 这时候就需要命名空间了. 使用之后就能防止和某些插件的代码发生冲突.
2. 如果你要为自己准备一套常用的函数, 或者自己搭建一个 framework, 那这个方法可以使你的代码维护起来更加方便. 例如我们的cn.*
1. JavaScript 是不会禁止你重复定义函数和变量的, 但他只会使用最后定义的版本, 也就是说, 这将导致前面的失效, 令系统出错. 比如, $(id) 是最常用的, 也许你会毫不犹豫的在自己的脚本上定义这个函数, 但是当你用上 prototype/jQurey, 你就会发现, 它和 prototype/jQuery 的函数冲突, 并导致你的页面出错.
怎么办? 这时候就需要命名空间了. 使用之后就能防止和某些插件的代码发生冲突.
2. 如果你要为自己准备一套常用的函数, 或者自己搭建一个 framework, 那这个方法可以使你的代码维护起来更加方便. 例如我们的cn.*
怎么使用命名空间?
var Namespace = Namespace || {};
Namespace.name = "F7";
Namespace.getName = function(){
alert(this.name);
};
Namespace.setName = function(str){
this.name = str || "kang";
};
var Namespace = Namespace || {};
Namespace.name = "F7";
Namespace.getName = function(){
alert(this.name);
};
Namespace.setName = function(str){
this.name = str || "kang";
};
javascript模块化的第一条规则：一个模块不应该为全局名字空间添加多于一条的标记。
解释：上例中的 var Namespace = {};其实是在全局名字空间（全局对象）的一个属性。通俗的讲：除了给全局命名空间定义一个模块的命名空间，其它的你一句代码都不要写。
解释：上例中的 var Namespace = {};其实是在全局名字空间（全局对象）的一个属性。通俗的讲：除了给全局命名空间定义一个模块的命名空间，其它的你一句代码都不要写。
将上面我们建立的ModuleClass模块保存成一个JS，进行整站通用。
定义的模块名称一样该怎么办？
首先，这样的机率不大，如果真的有，我们可以使用java的命名方式。如下：
命名空间为：com.公司名.项目名.空间名;
也可以向我们的china_class一样，采用cn = cn || {};特定的名称，不允许从新定义cn，只能扩展cn.*
首先，这样的机率不大，如果真的有，我们可以使用java的命名方式。如下：
命名空间为：com.公司名.项目名.空间名;
也可以向我们的china_class一样，采用cn = cn || {};特定的名称，不允许从新定义cn，只能扩展cn.*
还有其他的一些形式：
/* 直接定义window下的属性的形式 */
(function() {
// 通过 ID 获取 Element 对象
function $(id) {
return document.getElementById(id);
}
// 显示对应 ID 的对象的节点类型名字
function myMethod(id) {
alert($(id).nodeName);
}
// 这是对外的接口
window['Namespace']= {}
window['Namespace']['$'] = $;
})();
Namespace.$("id");
// 通过 ID 获取 Element 对象
function $(id) {
return document.getElementById(id);
}
// 显示对应 ID 的对象的节点类型名字
function myMethod(id) {
alert($(id).nodeName);
}
// 这是对外的接口
window['Namespace']= {}
window['Namespace']['$'] = $;
})();
Namespace.$("id");
/* 返回方法属性给变量的形式 */
var Namespace = (function() {
var name = "F7";
function getName(id) {
alert(name);
};
function setName(str) {
name = str || "kang";
};
return {
getName:getName,
setName:setName
};
})();
Namespace.getName();
var name = "F7";
function getName(id) {
alert(name);
};
function setName(str) {
name = str || "kang";
};
return {
getName:getName,
setName:setName
};
})();
Namespace.getName();
