面向過程：就是將要實現一個功能所需要的步驟一步一步的寫出來出來，要做到面面俱到、有條不絮。

  例如：在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元素的話。那就再呼叫上面的物件並傳入相應的引數就可以了。所以說：面向物件就是將面向過程的程式碼進行封裝，並將其核心的引數抽象化，使其可以複用，從而減少程式碼量的一個模式。

   
    最後要明確一個概念：面向物件不是面向過程的代替，而是面向過程的封裝。所以不管你如何的面向物件，最終還是要靠一步一步的過程來實現你想要的功能的。