【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);  //调用函数添加新样式
    }
}

转载于:https://www.cnblogs.com/positive/p/3679226.html

猜你喜欢

转载自blog.csdn.net/weixin_34384681/article/details/93495783