目前前端的模块化开发/多人协作开发基本上分为以下几类：
- 按功能划分不同的文件，最后进行组合
- 按页面或者模块进行划分，多人编写不同的JS/HTML文件，最后组合
经常为了项目进度，会出现多人开发同一个页面的情况，这样的话，经常会发生代码冲突的现象，除非提前及其规划地约定好页面内的模块， - 其实还有一种以prototype进行模块划分的非常好的方式，prototype内部的变量可以进行隔离，个人在prototype内部进行各自的功能开发，也不会出现代码冲突的情况，对外暴露其他模块需要的接口即可，对多人协同开发非常友好。
页面结构开发
首先编写好页面的基础html结构和基础js，主要是在js文件内进行模块隔离，参考如下代码
// 如index页面
// index.js
// 首先定义一个index的ES5类，并且定义好该类的初始化方法及内部定义模块并对其进行实例化
function Index(){
this.CONST()
this.INIT()
}
Index.prototype.CONST = function(){
// 在这里定义页面内部的局部变量，并且不会污染外部环境，统一使用自定义的get/set方法进行存取
var data = {
val1: '123',
val2: '234'
}
this.get = function(key){
return data[key]
}
this.set = function(key,val){
data[key] = val
}
}
Index.prototype.INIT = function(){
}
var index = new Index()
编写页面的结构模块
在完成页面类的基础结构后，根据不同页面功能编写功能模块，比如页面内的查询参数可以当作独立模块，表格也可以当作独立模块，多人开发时，个人开发独立的模块即可，模块之间通过类内部的方法(接口)进行通信
Index.prototype.SearchValues = function(){
var self = this
var queryParams = {}
// 对外暴露获取参数的接口/方法，但不会暴露内部变量
self.getQueryParams = function(){
return queryParams
}
}
Index.prototype.TableModule = function(){
var self = this
var test = 123
var initTable = function(){
console.log(test)
}
// 同样对外暴露 initTable 方法
self.renderTable = initTable
}
// 在定义好页面功能模块及需要初始化的方法之后，在INIT模块内进行如下处理
Index.prototype.INIT = function(){
//首先加载各功能模块
this.SearchValues()
this.TableModule()
// 模块加载完成之后再初始化功能
this.renderTable()
}
