Javascript区块编码的一个示例
在《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);
- }
完整代码地址http://panweizeng.com/images/javascript/code_lookBack.js