02_JS面向?qū)ο?/h2>

知識點

• 面向?qū)ο蟮母拍?/li>
• 面向?qū)ο缶幊膛e例
• 設(shè)置頁面中的div和p的邊框為1px solid red
• 創(chuàng)建一個 div 標(biāo)簽, 并設(shè)置其樣式, 加入頁面中

面向?qū)ο蟮幕靖拍?/h1>

面向過程和面向?qū)ο蟮膶Ρ?/h5>

Example 1：洗衣服

面向過程的思維方式：
    step 1:收拾臟衣服
    step 2:打開洗衣機蓋
    step 3:將臟衣服放進(jìn)去
    step 4:設(shè)定洗衣程序
    step 5:開始洗衣服
    step 6:打開洗衣機蓋子
    step 7:曬衣服

面向?qū)ο蟮乃季S方式：
    洗衣機需要什么對象？
    女朋友    
    洗衣機

在面向?qū)ο蟮乃季S方式中：我們只關(guān)心要完成事情需要的對象。

總結(jié)：面向?qū)ο笫且环N解決問題的思路，一種編程思想。

對象是什么呢？

萬物皆對象

JavaScript中的對象是什么？

在JavaScript中，所謂的對象，就是鍵值對的集合。

比如要描述一個人，這個人有name,age,gender,體現(xiàn)在代碼中：

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

比如要做一個學(xué)生管理系統(tǒng)，那學(xué)生就是要設(shè)計的對象，學(xué)生擁有name,age,gender,address,phone,體現(xiàn)在代碼中：

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

總結(jié)

• 面向過程關(guān)注的實現(xiàn)功能的步驟，是如何把功能拆解后一步步的實現(xiàn)
• 面向?qū)ο髣t是關(guān)注的實現(xiàn)功能的一系列的對象

面向?qū)ο缶幊膛e例

設(shè)置頁面中的div和p的邊框為1px solid red

傳統(tǒng)的處理辦法

// 任務(wù)需求:
// 1> 獲取div標(biāo)簽
var divs = document.getElementsByTagName( 'div' );
// 2> 遍歷獲取到的div標(biāo)簽
for(var i = 0; i < divs.length; i++) {
    //3> 獲取到每一個div元素,設(shè)置div的樣式
    divs[i].style.border = "1px dotted black";
}

// 4> 獲取p標(biāo)簽
var ps = document.getElementsByTagName("p");
// 5> 遍歷獲取到的p標(biāo)簽
for(var j = 0; j < ps.length; j++) { 
    // 獲取到每一個div元素 設(shè)置p標(biāo)簽的樣式
    ps[j].style.border = "1px dotted black"; 
}

使用函數(shù)進(jìn)行封裝優(yōu)化

// 通過標(biāo)簽名字來獲取頁面中的元素 
function tag(tagName) { 
    // var dvs = document.getElementsByTagName(tagName); 
    // return dvs; 
    return document.getElementsByTagName(tagName); 
}

// 封裝一個設(shè)置樣式的函數(shù) 
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);

使用面向?qū)ο蟮姆绞?/h5>

// 更好的做法：是將功能相近的代碼放到一起 
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);

創(chuàng)建一個 div 標(biāo)簽, 并設(shè)置其樣式, 加入頁面中

傳統(tǒng)的處理辦法

<script type="text/javascript">
    //創(chuàng)建一個 div 標(biāo)簽, 并設(shè)置其樣式, 加入頁面中

    //面向過程的思維方式
    //1. 創(chuàng)建div
    var div = document.createElement("div");
    //2. 設(shè)置div樣式
    div.style.border = "1px solid #c0c0c0";
    div.style.width = "400px";
    div.style.height = "300px";
    //3. 添加div到body中去
    document.body.appendChild(div);
</script>

Jquery方式

也是面向?qū)ο蟮姆绞?/p>

$("body").append("<div style='border: 1px solid red; width: 400px; height: 300px;'></div>");

使用面向?qū)ο蟮姆绞?/h5>

// 面向?qū)ο蟮姆绞饺ニ伎?
// 1, 抽取對象( 名詞提煉法 ): div, body
// 2, 分析屬性與方法( 動詞提煉 ): 加到, 設(shè)置樣式

var divTag = new DivTag(); // 內(nèi)部應(yīng)該創(chuàng)建 dom 對象
// 構(gòu)造函數(shù)內(nèi)部應(yīng)該創(chuàng)建 dom 對象 div, 同時將其設(shè)置為屬性
// 需要一個 div 的構(gòu)造函數(shù)
function DivTag() {
    this.DOM = document.createElement( 'div' );
    this.__加到 = function ( node ) {
        // 需要將 this.DOM 加到 node 中
        node.appendChild( this.DOM );
    };
    this.__設(shè)置樣式 = function ( name, value ) {
        // 設(shè)置 this.DOM 的樣式
        this.DOM.style[ name ] = value;
    };
}

var divTag = new DivTag();

divTag.__設(shè)置樣式( 'border', '1px solid red' );
divTag.__設(shè)置樣式( 'width', '400px' );
divTag.__設(shè)置樣式( 'height', '100px' );
divTag.__設(shè)置樣式( 'backgroundColor', 'pink' );

例：

<script type="text/javascript">
    //使用函數(shù)將代碼封裝，使得復(fù)用性更高

    //使用函數(shù)封裝帶來的問題：
    //1.全局變量污染
    //2.代碼結(jié)構(gòu)不夠清晰，維護(hù)不方便


    //使用對象進(jìn)行封裝后的優(yōu)勢
    //1.暴露在全局的只有一個對象名 不會造成全局變量污染
    //2.使用對象將代碼進(jìn)行功能模塊的劃分，有利于日后的維護(hù)



    
    //設(shè)置頁面中的div和p的邊框為1px solid red
    //面向過程的方式
    function tag(tagName){
        return document.getElementsByTagName(tagName);
    }

    function setStyle(elements){
        for (var i = 0; i < elements.length; i++) {
            var obj = elements[i];
            obj.style.border = "1px solid red";
        }
    }
    setStyle(tag("div"));
    setStyle(tag("p"));

    //面向?qū)ο蟮姆绞?    var MJquery = {
        //獲取dom元素的方法放入一個對象中
        getElement:{
            tag: function(tagName){
                return document.getElementsByTagName(tagName);
            },
            id: function (id) {
                return document.getElementById(id);
            }
        },
        //設(shè)置樣式的方法放入一個對象中
        setCss:{
            setStyle: function (elements) {
                for (var i = 0; i < elements.length; i++) {
                    var obj = elements[i];
                    obj.style.border = "1px solid red";
                }
            },
            css: function (option) {

            },
            addClass: function () {

            }
        },
        //事件處理模塊
        dealEvent:{
            addEvent: function () {

            }
        }
    };
</script>

最后編輯于 ：2017.12.08 22:34:53

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。