定义Javascript命名空间 进入全屏
良好的Javascript编码规范,应该有“命名空间”的概念,即便在Javascript中,本身不存在。
如果一个WEB应用中,绑定到window对象下的子对象太多,显然是非常不好的,简单的说,需要归类,统一管理。
尤其在基于Javascript的模块化开发中,命名空间体现的尤为重要,Extjs和YUI在这方面的规范,非常值得借鉴。
百度空间的前端项目,每个页面都是被设计为一个独立的web应用,有其独立的命名空间;
对于元素较多,结构复杂的页面或分拆为多个模块,各模块具有单独的命名空间。
这里,把用作命名空间注册的方法摘出来:
/** * 注册命名空间 * @param {String} fullNS 完整的命名空间字符串,如qui.dialog * @param {Boolean} isIgnorSelf 是否忽略自己,默认为false,不忽略 * @author zhaoxianlie(xianliezhao@foxmail.com) * @example * window.registNS("QingFeed.Text.Bold"); */ window.registNS = function(fullNS,isIgnorSelf){ //命名空间合法性校验依据 var reg = /^[_$a-z]+[_$a-z0-9]*/i; // 将命名空间切成N部分, 比如baidu.libs.Firefox等 var nsArray = fullNS.split('.'); var sEval = ""; var sNS = ""; var n = isIgnorSelf ? nsArray.length - 1 : nsArray.length; for (var i = 0; i < n; i++){ //命名空间合法性校验 if(!reg.test(nsArray[i])) { throw new Error("Invalid namespace:" + nsArray[i] + ""); return ; } if (i != 0) sNS += "."; sNS += nsArray[i]; // 依次创建构造命名空间对象(假如不存在的话)的语句 sEval += "if(typeof(" + sNS + ")=='undefined') " + sNS + "=new Object();else " + sNS + ";"; } //生成命名空间 if (sEval != "") { return eval(sEval); } return {}; };
这部分代码会在通用js文件中定义,每个页面或每个应用,只需要通过如下方式注册自己的命名空间。
比如一个“回到顶部”的模块,会被这样定义:
/** * 注册命名空间 */ window.registNS('Alienfe'); /** * 回到顶部 * @return {[type]} */ Alienfe.back2top = (function(){ var init = function(){ // 代码在这里写。。。 }; return { init : init }; })(); // 初始化 Alienfe.back2top.init();
命名空间,就类似java中的package,如果模块结构够复杂,命名空间可以这样注册:
/** * 注册命名空间 * 这表示:Alienfe这个大应用下,有blog模块,blog模块下还有tag子模块 */ window.registNS('Alienfe.blog.tag');
接下来就可以在这个tag子模块下进行开发了:
Alienfe.blog.tag = (function(){ var init = function(){ // TODO }; var destroy = function(){ // TODO }; return { init : init, destroy : destroy }; })();
调用命名空间下的方法,也非常清晰:
// 初始化tag子模块 Alienfe.blog.tag.init();
这里就不再举例了。