在《JavaScript实现命名空间》这篇文章中提到了区块化编码,这里提供一个完整的示例。示例的代码是用于资讯首页提供网页快照功能的入口,不像日历、TabControl这种通用组件有现成的代码,所以需要自己写一个。代码名字就叫lookBack。lookBack是一个函数,然后使用prototype定义了一些原型成员,在同一个页面中可以使用lookBack的多个实例。由于原有开发包中监听事件的函数好像对onchange事件捕捉不到,所以这里单独把事件监听写入到lookBack中。主要代码是三个函数类型的原型成员,它们之间使用this引用,代码如下。
appendOption:function(node,nodeChildren,text,selectedIndex){
node.options.length = 0;//先将节点的选项清空
var childNode = null;
if(nodeChildren.constructor == Array){
for(var i in nodeChildren){
childNode = document.createElement("OPTION");
childNode.value = nodeChildren[i];
childNode.text = nodeChildren[i] + text;
node.options.add(childNode);
}
}
else {
for(i = 1; i <= nodeChildren; i++){
childNode = document.createElement("OPTION");
childNode.value = i;
childNode.text = i + text;
node.options.add(childNode);
}
}
node.options.selectedIndex = selectedIndex;
},
attachEvent:function(el,type,fn,range){
if (el.addEventListener)
el.addEventListener(type,function(){fn.apply(range)}, false);
else
el.attachEvent("on"+type, function(){fn.apply(range)});
},
init:function(){
this.appendOption($(this.yearHandler),[2006,2007,2008],this.yearText,2);
this.appendOption($(this.monthHandler),
12,
this.monthText,
this.currentTime.getMonth()
);
this.appendOption($(this.dayHandler),
parseInt(this.dayArray[this.currentTime.getMonth()]),
this.dayText,
this.currentTime.getDate()-1
);
this.appendOption($(this.hourHandler),[10,22],this.hourText,0);
this.attachEvent($(this.yearHandler),'change',this.yearOnChange,this);
this.attachEvent($(this.monthHandler),'change',this.monthOnChange,this);
this.attachEvent($(this.triggerHandler),'click',this.redirect,this);
}