面向对象编程举例

举例1

设置页面中的div和p的边框为1px solid red

传统的处理办法

// 任务需求:
// 1> 获取div标签
var divs = document.getElementsByTagName( 'div' );
// 2> 遍历获取到的div标签
for(var i = 0; i < divs.length; i++) {
    //3> 获取到每一个div元素,设置div的样式
    divs[i].style.border = "1px dotted black";
}

// 4> 获取p标签
var ps = document.getElementsByTagName("p");
// 5> 遍历获取到的p标签
for(var j = 0; j < ps.length; j++) { 
    // 获取到每一个div元素 设置p标签的样式
    ps[j].style.border = "1px dotted black"; 
}

使用函数进行封装优化

// 通过标签名字来获取页面中的元素 
function tag(tagName) { 
    // var dvs = document.getElementsByTagName(tagName); 
    // return dvs; 
    return document.getElementsByTagName(tagName); 
}

// 封装一个设置样式的函数 
function setStyle(arr) { 
    for(var i = 0; i < arr.length; i++) { 
        // 获取到每一个div元素 
        arr[i].style.border = "1px solid #abc"; 
    } 
}
var dvs = tag("div");
var ps = tag("p");
setStyle(dvs); 
setStyle(ps);

使用面向对象的方式

// 更好的做法：是将功能相近的代码放到一起 
var itcast = { 
    getEle: { 
        tag: function (tagName) { 
            return document.getElementsByTagName(tagName); 
        }, 
        id: function (idName) { 
            return document.getElementById(idName); 
        } 
    },    
    setCss: { 
        setStyle: function (arr) { 
            for(var i = 0; i < arr.length; i++) { 
                arr[i].style.border = "1px solid #abc"; 
            } 
        }, 
        css: function() {}, 
        addClass: function() {}, 
        removeClass: function() {} 
        // ... 
    } 
    // 属性操作模块 
    // 动画模块 
    // 事件模块 
    // ... 
};

var divs = itcast.getEle.tag();
itcast.setCss.setStyle(divs);

举例2

创建一个 div 标签, 并设置其样式, 加入页面中

传统的处理办法

//1. 首先找对象
//2. 任何操作应该交给对象完成
// 任务需求:
// 1> 创建一个 div 标签
var div = document.createElement( 'div' );
// 2> 将 div 加到页面中
document.body.appendChild( div );
// 3> 设置 div 的样式
div.style.border = '1px dashed red';
div.style.width = '400px';
div.style.height = '300px';

使用面向对象的方式

// 面向对象的方式去思考:
// 1, 抽取对象( 名词提炼法 ): div, body
// 2, 分析属性与方法( 动词提炼 ): 加到, 设置样式

var divTag = new DivTag(); // 内部应该创建 dom 对象
// 构造函数内部应该创建 dom 对象 div, 同时将其设置为属性
// 需要一个 div 的构造函数
function DivTag() {
    this.DOM = document.createElement( 'div' );
    this.__加到 = function ( node ) {
        // 需要将 this.DOM 加到 node 中
        node.appendChild( this.DOM );
    };
    this.__设置样式 = function ( name, value ) {
        // 设置 this.DOM 的样式
        this.DOM.style[ name ] = value;
    };
}

var divTag = new DivTag();

divTag.__设置样式( 'border', '1px solid red' );
divTag.__设置样式( 'width', '400px' );
divTag.__设置样式( 'height', '100px' );
divTag.__设置样式( 'backgroundColor', 'pink' );