现代Javascript之命名空间

转载自重庆PHP:[url]http://www.php-chongqing.com/index.php/article/31[/url]
写过Java的同学,对命名空间一定不会陌生,通过命名空间可以很好的解决类名、函数名、变量名冲突。
Javascript本身并不支持命名空间,不过我们可以模拟实现。Javascript里实现命名空间的方式有好几种,这里写下我最喜欢、最常用的方式。顺利说一下,我们的社区也是采用这种方式,截点社区的js代码:

/**
* php-chongqing.com global javascript
*
* Depend jquery.1.4.2, jquery-ui-1.8.15.custom.js, jquery.metadata.js, jquery.validate.js, prettify.js
* @author bing.peng
*/
var cq = {
version: '0.1',
/** 导航选中效果 */
nav: function() {
var url = location.toString();
$("#nav a[href='"+ url +"']").addClass("selected");
$("#meun-box a[href='"+ url +"']").addClass("selected");
}
};

/**
* 用户对象
* 检测用户登陆状态、弹出登陆框及完成登陆
*/
cq.User = function(){};
cq.User.prototype = {
initLogin: function() {
// do something...
},
isLogin: function() {
// do some thing...
}
}

/**
* 附件对象,文章/问题附件
* 完成我的社区页面中附件的上传、更新、删除等
*/
cq.Annex = function(){ // do something }
cq.Annex.prototype = {
uploaded: function() {
// do something
}
}

首先,我们用简单对象方式创建对象cq,在cq对象里定义了版本属性和nav导航选中方法,因为导航方法很常用,基本每个网页都会用,所以我直接定义到了cq对象里,假如要调用nav方法,就直接写:
cq.nav();


接着我们在cq对象下,利用原型定义的方式定义了User对象,注意我们是在cq对象下定义的User对象,也就是说我们把cq模拟成了我们的命名空间,调用User对象代码:

var user = new cq.User();
user.initLogin();

var annex = new cq.Annex();
annex.uploaded();

是不是很像Java的命名空间?利用这种简单/原型混合的方式,我们轻松的模拟出了类java的命名空间。在用Javascript构建大型应用时,命名空间是必不可少的,因为变量名、函数名、类名太难取了,^_^,这种写法还有助于提高代码的可读性... 有时间我们再讨论其它方式的命名空间。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值