面向过程:就是将要实现一个功能所需要的步骤一步一步的写出来出来,要做到面面俱到、有条不絮。
例如:在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元素的话。那就再调用上面的对象并传入相应的参数就可以了。所以说:面向对象就是将面向过程的代码进行封装,并将其核心的参数抽象化,使其可以复用,从而减少代码量的一个模式。
最后要明确一个概念:面向对象不是面向过程的代替,而是面向过程的封装。所以不管你如何的面向对象,最终还是要靠一步一步的过程来实现你想要的功能的。