认识前端工程化

前端工程化的含义


1、持续集成。

2、规范化。

3、模块化。

4、单元和功能测试。

5、自动化。

持续集成


用 Git 术语来说，持续集成就是 各个开发人员的开发代码频繁地合并进主干，始终保持代码是最新的、可用的、可随时发布的状态的这个过程。

持续集成主要通过 Git 的合并分支体现

规范化


规范化指多人合作开发时约定遵守的开发规范。如：目录命名规则、变量命名规则、模块化接口说明、后台接口说明、等等诸如以上共识均可以算作规范化。

模块化


前端模块化尤为重要，甚至是前端工程化要做的最重要的事，它的主要思想是：

划分软件成多个实际的模块，以降低系统复杂度。

而模块本身，又可以是多个子模块的集合，又进一步降低模块的复杂度。

而且模块化之后的软件也很易于团队分工，向持续集成输出了一个正向回馈。

单元和功能测试


测试主要有两种：

单元测试就是测试函数的输入和输出是否符合预期。

功能测试就是测试模块和网页的行为是否符合预期。

特别地，针对第一种，如果要测试如下函数，则还需写多额外的代码用于测试 add ：

1
2
3
4
5
// add.js 
// 求和 a + b 
function add(a, b){
    return a + b; 
}

以下是供测试 add 函数的额外代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// test4main.js 
// For Test 
function testAdd(func, inputArr, except){
    var a = inputArr[0] 
      , b = inputArr[1]
      , result = func(a, b);
    
    if (result === except) {
        console.log(`[√] 函数 ${func.name} 测试通过`); 
        console.log(`    输入： ${inputArr}`); 
        console.log(`    输出： ${result}`); 
        return true; 
    } else {
        console.log(`[×] 函数 ${func.name} 测试驳回`); 
        console.log(`    输入： ${inputArr}`); 
        console.log(`    输出： ${result}`); 
        return false; 
    }
}

上面定义好了 add 函数和对应的改卷员 testAdd，现在还差一个函数用于调用 testAdd :

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
27
28
29
30
31
32
// testAll.js 
// 多组测试数据 
var datas = [
    {
        input: [1, 2], 
        output: 3
    }, 
    {
        input: [3, 6], 
        output: 9
    }, 
    {
        input: [-4, 10], 
        output: 6
    }, 
    {
        input: [-1, -2], 
        output: -3
    }
]; 
datas.map(test => {
    return testAdd(add, test.input, test.output); 
}); 
// => 
// [√] 函数 add 测试通过
//     输入： [1, 2]
//     输出： 3
// ..... 
// .....
// 等等

以上即为一个简单的测试过程，由此总结，测试需要的两个要素：

1、测试断言 （指的是 testAdd 函数）

2、测试用例 （指的是 datas 里面的）

自动化


自动化主要是三个内容：

1、开发的自动化

2、测试的自动化

3、部署的自动化