目前前端的模塊化開發(fā)/多人協(xié)作開發(fā)基本上分為以下幾類：
- 按功能劃分不同的文件馁启，最后進(jìn)行組合
- 按頁面或者模塊進(jìn)行劃分，多人編寫不同的JS/HTML文件秋度，最后組合
經(jīng)常為了項(xiàng)目進(jìn)度炸庞，會(huì)出現(xiàn)多人開發(fā)同一個(gè)頁面的情況，這樣的話荚斯，經(jīng)常會(huì)發(fā)生代碼沖突的現(xiàn)象埠居，除非提前及其規(guī)劃地約定好頁面內(nèi)的模塊， - 其實(shí)還有一種以prototype進(jìn)行模塊劃分的非常好的方式事期，prototype內(nèi)部的變量可以進(jìn)行隔離滥壕，個(gè)人在prototype內(nèi)部進(jìn)行各自的功能開發(fā)，也不會(huì)出現(xiàn)代碼沖突的情況兽泣，對外暴露其他模塊需要的接口即可绎橘，對多人協(xié)同開發(fā)非常友好。
頁面結(jié)構(gòu)開發(fā)
首先編寫好頁面的基礎(chǔ)html結(jié)構(gòu)和基礎(chǔ)js唠倦，主要是在js文件內(nèi)進(jìn)行模塊隔離称鳞，參考如下代碼
// 如index頁面
// index.js
// 首先定義一個(gè)index的ES5類，并且定義好該類的初始化方法及內(nèi)部定義模塊并對其進(jìn)行實(shí)例化
function Index(){
this.CONST()
this.INIT()
}
Index.prototype.CONST = function(){
// 在這里定義頁面內(nèi)部的局部變量稠鼻，并且不會(huì)污染外部環(huán)境胡岔，統(tǒng)一使用自定義的get/set方法進(jìn)行存取
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()
編寫頁面的結(jié)構(gòu)模塊
在完成頁面類的基礎(chǔ)結(jié)構(gòu)后，根據(jù)不同頁面功能編寫功能模塊枷餐，比如頁面內(nèi)的查詢參數(shù)可以當(dāng)作獨(dú)立模塊靶瘸，表格也可以當(dāng)作獨(dú)立模塊苫亦，多人開發(fā)時(shí)，個(gè)人開發(fā)獨(dú)立的模塊即可怨咪，模塊之間通過類內(nèi)部的方法(接口)進(jìn)行通信
Index.prototype.SearchValues = function(){
var self = this
var queryParams = {}
// 對外暴露獲取參數(shù)的接口/方法屋剑，但不會(huì)暴露內(nèi)部變量
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模塊內(nèi)進(jìn)行如下處理
Index.prototype.INIT = function(){
//首先加載各功能模塊
this.SearchValues()
this.TableModule()
// 模塊加載完成之后再初始化功能
this.renderTable()
}
