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

豆瓣代码研究

当时读豆瓣的代码也费了不少劲. 我发现在豆瓣的html中有些元素的类(class)名称很特别,比如(注意class属性的值)

<input　type="text"　name="search_text"　class="j　a_search_text　greyinput"　autocomplete="off"/>

而且这些元素一般都是有js来增强交互效果的,比如表单元素,推荐按钮等;在douban.js中也存在很多与上述一些元素类名称命名一致的变量,比如

Douban.init_search_text　=　function(o){
　　//这里是相关代码
}

于是我就想,豆瓣应该是这样想的:把js当CSS来用,当赋予某些元素特定的类名称时,该元素就会拥有相应的js特性, 比如上面说的input元素拥有类名称a_search_text,于是就拥有了Douban.init_search_text这个变量(或者说函数) 赋予的js特性.这是怎么实现的呢?为了方便说明,把douban.js简化如下,省略了细致末节,大家可以大致看出主干:

//------第一段------
var　Douban　=　new　Object();
Douban.EventMonitor　=　function(){
　　this.listeners　=　new　Object();
}
Douban.EventMonitor.prototype.broadcast=function(widgetObj,　msg,　data){/*代码省略了*/};
Douban.EventMonitor.prototype.subscribe=function(msg,　callback){/*代码省略了*/};
Douban.EventMonitor.prototype.unsubscribe=function(msg,　callback){/*代码省略了*/};
//------第二段------
var　event_monitor　=　new　Douban.EventMonitor();
function　load_event_monitor(root)　{
　　var　re　=　/a_(\w+)/;
　　var　fns　=　{};
　　$(".j",　root).each(function(i)　{
　　　　var　m　=　re.exec(this.className);
　　　　if　(m)　{
　　　　　　var　f　=　fns[m[1]];
　　　　　　if　(!f)　{
　　　　　　　　f　=　eval("Douban.init_"+m[1]);
　　　　　　　　fns[m[1]]　=　f;
　　　　　　}
　　　　　　f　&&　f(this);
　　　　}
　　});
}
$(function()　{
　　load_event_monitor(document);
});
//------第三段------
Douban.init_evc　=　function(o)　{/*...*/};
Douban.init_enb　=　function(o)　{/*...*/};
Douban.init_folder_n　=　function(o){/*...*/};
Douban.init_unfolder　=　function(o){/*...*/};
...

编缉推荐阅读以下文章

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