【DOM编程艺术】对styleHeaderSibling函数进行抽象

把一个非常具体的东西改进为一个较为通用的东西的过程叫做抽象

先看下styleHeaderSibling函数,会发现它仅适用于h1元素,而且className属性值intro也是硬编码在函数里的:

function styleHeaderSibling(){
    var headers=document.getElementsByTagName('h1');
    for(var i=0;i<headers.length;i++){
        var elem=getNextElement(headers[i].nextSibling);  //调用函数获取h1后面的元素节点
        addClass(elem,'intro');  //调用函数添加新样式
    }
}

把这些具体的值转为函数的参数,就可以让它成为一个更通用的函数。把改进后的新函数命名为styleElementSibling并给它添加两个

参数----tage和theclass:

function styleElementSibling(tag,theClass){
    var elems=document.getElementsByTagName(tag);
    for(var i=0;i<elems.length;i++){
        var elem=getNextElement(headers[i].nextSibling);  //调用函数获取h1后面的元素节点
        addClass(elem,theClass);  //调用函数添加新样式
    }
}

 

posted @ 2014-04-21 21:27  Western Journey  阅读(144)  评论(0编辑  收藏  举报