web前台技术学习总结(3)-轻便型全站javascript部署

核心提示： 可以把代码分为三段:第一段,建立了一个叫做Douban的对象,为其添加了EventMonitor的属性. 这个Douban元素很重要,后来知道这样做的好处是这个Douban元素能作为命名空间,让自定的变量不会'污染'全局命名空间(就是window对象),最近才知道,这样的设计模式

可以把代码分为三段:

第一段,建立了一个叫做Douban的对象,为其添加了EventMonitor的属性. 这个Douban元素很重要,后来知道这样做的好处是这个Douban元素能作为命名空间,让自定的变量不会'污染'全局命名空间(就是window对象),最近才知道,这样的设计模式叫做singleton. 至于EventMoniter属性其实是一个构造函数,用来创建的对象能在页面范围内用observer的设计模式实现对事件的订阅 (subscribe),发布(publish).不过在这一版本的douban.js文件中好像很少有这个东西的使用.

第二段很精彩,正是load_event_monitor函数实现了'把js当CSS来用'.具体实现是这样的:当一个html元素同时拥有名称为j和以 a_开头的类时,在DOM之后js就执行相应的Douban对象的以init_开头的属性.比如:当input元素拥有class=j a_search_text属性时,js就会eval相应的Douban.init_search_text().在 load_event_monitor内部,用re正则表达式去匹配出要找的元素属性,然后用eval来执行相应的代码;这个函数唯一的参数root就是待加入js特性的元素. 在DOM完成载入后,douban.js把document作为load_event_monitor的参数运行,让整个文档所有待加入js特性元素初始化.

第三段就是初始化相应元素的代码,也就是日后需要维护的地方.这里的代码比较整洁,都是以Douban.init_开头,看到变量名称,其功能就一目了然.

山寨版的代码以及小技巧

读懂豆瓣的代码后,就开始部署自己的山寨版代码,实施方法大致差不多(只不过把Douban对象换成了XM),就不再赘述,文章结尾有demo网址.这里介绍用这种方法的几种技巧.

可复用的confirm框.

XM.init_confirm　=　function(o)　{
　　if(!o.name){
　　　　$(o).click(function(){
　　　　　　var　text　=　o.title　||　$(o).text();
　　　　　　return　confirm("确定要"+text+"?");
　　　　});
}

使用示例

<a　href="/delete"　title="删除这个帖子"　class="j　x_init_confirm">删除</a>

点击这个链接后会弹出确认框,提示"确定要删除这个帖子吗?",点击确定将前往删除页面,点"取消"可以取消操作

整理变量. 原理很简单,在XM对象下再建立命名空间来分类相应变量,比如

XM.URL　=　{
　　user_avatar:　'/Content/i/ud.gif',
　　group_avatar:'/Content/i/gd.gif',
　　topic_thumb:　'/Content/i/tnd.gif'
};

其他技巧会在本系列的后续文章中穿插提到. 大家有什么疑问和建议,欢迎评论,希望共同提高!

http://files.cnblogs.com/kenandalda/douban.js

编缉推荐阅读以下文章

• web前台技术学习总结(2)-用jQuery自定义的请求JSON方法
• web前台技术学习总结(1)-CSS实现全浏览器兼容的ellipsis