浅谈面向对象和面向过程

面向过程：就是将要实现一个功能所需要的步骤一步一步的写出来出来，要做到面面俱到、有条不絮。

例如：在JavaScript如果需要在页面当中插入一个DOM元素。按照面向过程的设计方法就是：

var div = document.createElement(“div”);
document.body.appendChild(div);

如果需要让这元素显示出来这需要：

div.style.width = “100px”;
div.style.height = “100px”;
div.style.backgroundColor = “blue”;

这样就可以在页面中显示边长为100px蓝色的区块。而如果你还想再要在页面插入一个DOM元素，这就需要将上面类似的代码再写一遍。这就是面向过程的设计方式。

而面向对象：就是找到或创建一个可以实现你想要功能的对象，然后调用这个对象来实现想要的功能。

首先我们定义一个对象：

function createElem(elem) {
    //创建DOM对象。
    this.DOM = document.createElement(elem);

    //设置样式  
    this.css = function(obj) {
        for(var key in obj) {
            if (obj.hasOwnProperty(key)) {
                this.DOM.style[key] = obj[key];
            }
        }
        return this;
    }

    //设置属性
    this.setAttributes = function(obj) {
        for (var key in obj) {
            this.DOM.setAttribute(key, obj[key]);
        }
        return this;
    }

    //插入到页面中    
    this.appendTo = function(node) {
        node.appendChild(this.DOM);
        return this;
    }

    return this;
}

在调用这个对象
```
//要设置的样式    
var obj = {
    "width" : "100px",
    "height" : "100px",
    "backgroundColor" : "blue"
}

//调用创建的对象。
createElem("div").
        css(obj).
        appendTo(document.body).
        setAttributes({"id" : "main","class" : "box"});
```
这样的话同样在页面上显示出一个边长为100px 的蓝色区块。并且，如果想要再插入一个DOM元素的话。那就再调用上面的对象并传入相应的参数就可以了。所以说：面向对象就是将面向过程的代码进行封装，并将其核心的参数抽象化，使其可以复用，从而减少代码量的一个模式。
最后要明确一个概念：面向对象不是面向过程的代替，而是面向过程的封装。所以不管你如何的面向对象，最终还是要靠一步一步的过程来实现你想要的功能的。

浅谈面向对象和面向过程

猜你喜欢