前言：
平时在编写前端页面的时候，当页面的组件和逻辑过于复杂所导致的对应的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({
}))
}