基于ES5的prototype进行模块化开发

发表于 | 分类于 | 阅读次数:

目前前端的模块化开发/多人协作开发基本上分为以下几类：

  • 按功能划分不同的文件，最后进行组合
  • 按页面或者模块进行划分，多人编写不同的JS/HTML文件，最后组合
    经常为了项目进度，会出现多人开发同一个页面的情况，这样的话，经常会发生代码冲突的现象，除非提前及其规划地约定好页面内的模块，
  • 其实还有一种以prototype进行模块划分的非常好的方式，prototype内部的变量可以进行隔离，个人在prototype内部进行各自的功能开发，也不会出现代码冲突的情况，对外暴露其他模块需要的接口即可，对多人协同开发非常友好。

页面结构开发

首先编写好页面的基础html结构和基础js，主要是在js文件内进行模块隔离，参考如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 如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()

编写页面的结构模块

在完成页面类的基础结构后，根据不同页面功能编写功能模块，比如页面内的查询参数可以当作独立模块，表格也可以当作独立模块，多人开发时，个人开发独立的模块即可，模块之间通过类内部的方法(接口)进行通信

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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()
}