前言：

　　平時在編寫前端頁面的時候，當頁面的元件和邏輯過於複雜所導致的對應的Js裡的內容也相應的複雜了起來，即使開始寫的時候刻意去注意了程式碼的規範及時做好了註釋，但是如果缺乏一種完善的控制程式碼的規範或者說是方法仍然免不了後期的Js檔案的內容看起來複雜而冗餘，即使當時作為開發者瞭解程式碼的功能，但隨著時間的推移如果需要對程式碼進行維護和複用再去看如此複雜而冗餘的程式碼仍然是一件極其傷腦筋的事情，那麼如何使用一種很好的規範或者方法來編寫高複用性和理解性的Js程式碼呢？下面我推薦一種通過prototype使用物件進行模組化程式設計的思想。

1.prototype的簡單理解

　　在開始模組化程式設計之前，我們先要了解一下prototype屬性，我參考過其他博主對該屬性的理解講的都挺詳細的，這裡簡單總結一下我們需要用到的知識點。

　　首先prototype是物件（函式）的屬性，它是唯一標識該物件的，其次我們可以通過prototype為物件（函式）建立方法和屬性，這裡的方法和屬性類似Java中的定義類中的屬性和方法，這樣我們在建立一個例項的時候可以通過例項呼叫這些屬性和方法。簡單示例如下：

 1 #建立一個函式類Page
 2 function Page(){
 3 
 4 }
 5 
 6 #通過prototype為該(物件)函式新增函式
 7 Page.prototype.run = function(){
 8         #添加了run方法
 9 }

10 #建立一個例項page
11 page = new
 
 Page()

12 #通過prototype為(物件)函式新增屬性
13 Page.prototype.data = 1
14 
15 #例項化物件呼叫新增的屬性
16 console.log(page.data)

2.頁面丶元件即物件

　　在理解了prototype之後首先我們需要確定一種思維方式，就是頁面的每一個元件也就是標籤都可以看成一個物件的屬性也可以看成一個物件，當然要根據具體的應用來確定，順便說一句題外話，我個人認為前端的開發方式非常“自由”，一種方案可能存在很多種的解決方案，我這裡只是列舉一種有價值的方案希望能讓讀者有所啟發，比如：

　　對於一個按鈕組，它裡面有按鈕1，2，3；這樣我們把整個按鈕組看成一個物件，把三個按鈕當成物件中的三個屬性，這樣可以為按鈕組的物件定義一個專門處理三個屬性也就是三個按鈕的方法，比如定義方法分別對三個按鈕設定監聽。

　　再比如整個頁面我們可以把它看成一個物件，頁面中的各個元件也就是標籤看成一個個的屬性，這樣我們可以為這個物件(頁面)定義不同的方法，比如定義方法一處理導航欄，定義方法二處理頁面中的列表等等，這樣不同的方法處理不同的元件，這樣寫的程式碼是不是看起來更規範，維護也更方便呢？

3.為元件(物件)賦予行為

　　上面理解了元件即物件的思維之後，我通過一個實際的例子來進行示範：假設一個頁面，頁面中有兩個按鈕，這樣我們可以把整個頁面看成一個物件，然後把兩個按鈕看成物件中的屬性(這裡抓取標籤使用Jquery)

#啟動函式
$(function(){
    var page = new Page()
    page.clickBt1()
    page.clickBt2()
})

#建立頁面物件,裡面兩個屬性(標籤)按鈕
function Page(){
    this.bt1 = $('#bt1')
    this.bt2 = $('#bt2')
}
#定義第一個按鈕的監聽方法
Page.prototype.clickBt1 = function(){
    var self = this
    self.bt1.click(function({
          #如何處理第一個按鈕的點選事件
    }))
}
#定義第二個按鈕的監聽方法
Page.prototype.clickBt2 = function(){
    var self = this
    self.bt1.click(function({
           #如何處理第二個按鈕的點選事件
    }))
}

　　甚至考慮到程式碼的可讀性，我們還可以為物件專門定義一個run方法用於啟動所有的內部方法，如下：

$(function(){
    var page = new Page()
    page.run()
})

function Page(){
    this.bt1 = $('#bt1')
    this.bt2 = $('#bt2')
}

#函式執行的所有方法，包含定義的類中所有元件處理的方法
Page.prototype.run = function(){
    var self = this
    self.clickBt1()
    self.clickBt2()
}


Page.prototype.clickBt1 = function(){
    var self = this
    self.bt1.click(function({
            
    }))
}

Page.prototype.clickBt2 = function(){
    var self = this
    self.bt1.click(function({
            
    }))
}