《编写可维护的Javascript》学习总结

时间 2019-11-16

原文原文链接

第一部分

1、基本规范

1.缩进：通常以四个空格为一个缩进。javascript

2.语句结尾：最好加上分号，由于虽然“自动分号插入（ASI）”机制在没有分号的位置会插入分号，可是ASI规则复杂并且会有特殊状况发生css

// 源代码
function aaa() {
    return 
    {
         title: 'aaaa',
         id: '2222'
    }    
}

// ASI解析
function aaa() {
    return;
    {
         title: 'aaaa',
         id: '2222'
    }    
}

此时return换行会返回undefined

3.行的长度：不该超过80个字符html

4.换行：通常在运算符（好比逗号）后换行，而后增长两个层级（一个层级为四个空格的话，增长的就是八个空格）。java

当给变量赋值时，第二行位置应当和赋值运算符位置保持对齐编程

var result = aaaa + bbbb + ccccc + dddd + eeee + 
             fffffffff + gggggg + hhhh

5.空行：适当空行增长代码可读性数组

在方法之间
在方法中的局部变量和第一条语句之间
在多行或单行注释前
逻辑片断间

6.命名方法：驼峰式框架

变量：应用名词进行命名 var name = "skq"函数

函数：应以动词为函数名前缀 function doSomething(){}测试

常量：使用大写字母和下划线命名 var MAX_COUNT = 10;ui

7. 注释

单行注释后要有一个空格 // 注释
多行注释，要与前一段代码前有一个空行

// 这是一个数组
var aaa = [1,2,3,4];

/*
 * 这是一个函数
 * 有一个变量为aaa
 */

function aaa() { 
　　var aaa = [1,2,3,4]; 
}

2、语句和表达式

1.switch - default

default可省略

2.for - break&&continue

break: 终止本次循环

continue: 跳出本次循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
        var arr = [1, 2, 3, 4];
        var len = 2;

        function aaa(data) {
            console.log(data);
        }

        for (var i = 0; i < arr.length; i++) {
            if (i === len) {
                break;
            }
            aaa(arr[i]); // 1,2
        }

        for (var i = 0; i < arr.length; i++) {
            if (i === len) {
                continue;
            }
            aaa(arr[i]); // 1,2,4
        }

    </script>
</head>
<body>
    
</body>
</html>

避免使用continue，尽可能使用if语句

3.for-in

在使用for-in时，它不只遍历对象的实例属性，一样还遍历从原型集成来的属性。当遍历自定义对象属性时，每每会由于意外的结果终止。因此用hasOwnProperty()在来for-in循环过滤出实例属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    var obj = {
        name: 'aaa',
        age: 11
    }
    for (attr in obj) {
        if (obj.hasOwnProperty(attr)) {
            console.log(obj[attr]);
        }
    }

    </script>
</head>
<body>
    
</body>
</html>

3、变量、函数和运算符

1. var的使用

建议var合并成一条语句

var aaa = 10,
    bbb = aaa + 10,
    ccc,
    ddd;

2.具备强制类型转换机制：等号（==）

推荐使用 === 和！==，不会涉及强制类型转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    alert(false == 0); // true
    alert(true == 1);  // true
    alert(true == 2);  // false
    </script>
</head>
<body>
    
</body>
</html>

3. eval(), setIterval(), setTimeout(), 和 Funtion中传入字符串时，均可当作代码来执行，避免传入字符串

var myfunc = new Function("alert('Hi')");

4、编程实践

1. 将css从JavaScript中抽离

用className替代style（除了定位的状况）

5、事件处理

1.隔离应用逻辑

把应用逻辑单拎出来，这样就可复用于不少地方了

2.不要分发事件对象（event）

最佳办法是让事件处理程序使用event对象来处理事件，而后拿到全部须要的数据传给应用逻辑

6、避免空比较

一、检测原始值

检测类型：Boolean、Number、String、null、undefined

方法：typeof

注意： null不该用于检测语句，若是要对比的确实为null，用 === 或者==!来精确判断

二、检测引用值（object）

内置引用类型：Object、Array、Date、Error

方法：instanceof (不只检测对象的构造器，还检测原型链)

* instanceof不使用函数和数组

三、检测函数

方法：typeof

* typeof 能够跨帧（frame），可是IE8及更早版本有问题（返回Object）

  /**
　　*  underscore源码
   */
  if (typeof /./ != 'function' && typeof Int8Array != 'object') {
    _.isFunction = function(obj) {
      return typeof obj == 'function' || false;
    };
  }

四、检测数组

/**
 * underscore给出的方案
 */
 var nativeIsArray  = Array.isArray;

 _.isArray = nativeIsArray || function(obj) {
    return toString.call(obj) === '[object Array]';
 };

// 书中给出方案　　
function isArray(value) {

   　　 if (typeof Array.isArray === “function”)  {

        　　return Array.isArray(value);

    　　} else {

       　　 return Object.prototype.toString.call(value) === "[object Array]"

   　　 }

　　}

4、将配置数据从代码中分离

一、配置数据类型

写死在代码里的值
URL：好比API的url
展示给用户的字符串：好比报错提示
重复的值
任何可能变化的值

二、抽离配置文件

三、把配置数据放在一个独立的文件里

5、文件和目录结构

基本目录结构

build 放置最终构建后的文件，理想状况下不该该提交
src 放置全部源文件，包括用来进行文件分组的子目录
test或tests 放置全部的测试文件

6、附录总结

1. 缩进为4个空格（？可能由于这本写的时间比较长了？如今多个比较有名的框架都是两个空格为一个缩进，不过这个我搜了一下，也看我的习惯和团队规范）

2.一行不超过80个字符