在《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);
}

完整代码地址