02_JS面向对象

知识点

• 面向对象的概念
• 面向对象编程举例
• 设置页面中的div和p的边框为1px solid red
• 创建一个 div 标签, 并设置其样式, 加入页面中

面向对象的基本概念

面向过程和面向对象的对比

Example 1：洗衣服

面向过程的思维方式：
    step 1:收拾脏衣服
    step 2:打开洗衣机盖
    step 3:将脏衣服放进去
    step 4:设定洗衣程序
    step 5:开始洗衣服
    step 6:打开洗衣机盖子
    step 7:晒衣服

面向对象的思维方式：
    洗衣机需要什么对象？
    女朋友    
    洗衣机

在面向对象的思维方式中：我们只关心要完成事情需要的对象。

总结：面向对象是一种解决问题的思路，一种编程思想。

对象是什么呢？

万物皆对象

JavaScript中的对象是什么？

在JavaScript中，所谓的对象，就是键值对的集合。

比如要描述一个人，这个人有name,age,gender,体现在代码中：

{ name:"张三", age:18, gender:"Male" }

比如要做一个学生管理系统，那学生就是要设计的对象，学生拥有name,age,gender,address,phone,体现在代码中：

{ name:"刘亦菲", age:18, gender:"female", address:"上海", phone:"110" }

总结

• 面向过程关注的实现功能的步骤，是如何把功能拆解后一步步的实现
• 面向对象则是关注的实现功能的一系列的对象

面向对象编程举例

设置页面中的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);

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

传统的处理办法

Jquery方式

也是面向对象的方式

$("body").append("
");

使用面向对象的方式

// 面向对象的方式去思考:
// 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' );

例：