乐趣区

编写可维护的前端代码

jiezi

最近在看 JavaScript 高级程序设计，看到可维护代码的编写，做一下笔记与总结，方便以后查看。

1. 代码约定

1.1 可读性

  • 代码的格式化 使用若干个空格来进行缩进，因为制表符在不同编辑器种的显示效果不同
  • 注释
    函数和方法 注明参数，返回值，前提假设 ….
    大段代码
    复杂的算法 说明算法逻辑，方便别人查看，也方便自己查阅
    Hack 说明浏览器的差异，防止别人修改时没考虑到误删 …

1.2 变量和函数命名

  • 不要使用没有意义或容易引起歧义的名字，如：foo，doSomething…
  • 变量名尽量用名词，如：car，person….
  • 函数名用动词开始，如：getName(); 返回值为 boolean 用 is 开头
  • 变量和函数使用可以说清楚方法作用和变量含义的名称，不要担心长度，后期可以压缩

1.3 变量类型透明

类型透明也就是在变量定义的时候可以知道变量的类型

主要有以下三种方式：

  • 初始化变量

    var found = false; // boolean
var count = -1; // number

    缺点：不能使用在函数声明中的函数参数（现在通过 ES6 中的函数参数初始化解决）

  • 使用匈牙利标记法 o 表示对象，s表示字符串 …

    var bFound; // boolean
var iCount; // int

    缺点：代码难以阅读

  • 使用类型注释 类型注释放到变量名右边，初始化前面

    var found /*:Boolean*/ = false;
var count /*:int*/ = -1;

    缺点：不能使用 js 多行注释

  • 使用 typeScript（终极）

2. 松散耦合

2.1 解耦 HTML/JavaScript

JavaScript 中使用 HTML

  • 不要使用 js 插入 HTML，可以通过在页面中隐藏元素，当页面渲染后，通过 js 显示该元素，而不是生成
  • 通过 Ajax 请求获取 HTML

HTML 中使用 JavaScript

  • 将 js 文件写成独立文件，script 标签引入

2.2 解耦 CSS/JavaScript

  • 通过动态修改样式类，而不是修改特定样式

    // 不建议写法
element.style.color = 'red';
element.style.backgroundColor = 'blue';

// 建议写法
// css
.dit{
    color: red;
    background-color: blue;
}

// js
element.className = 'edit';

2.3 解耦应用逻辑 / 事件处理程序

有以下几条原则：

  • 勿将 event 对象传给其他方法，只传函数中需要的数据
  • 任何可以在应用层面动作都应该可以在不执行任何事件处理程序的情况下进行

  • 任何事件处理程序都应该处理事件，然后将处理转交给应用逻辑

    // 不建议写法
function handleKeyPress(event){if(event.keyCode === 13){
        var target = event.target;
        var value = 5 * parseInt(target.value);
        if(value > 10){document.getElementById('id').style.display = 'block';
        }
    }
}

// 建议写法
// 好处：如果我点击鼠标也执行相同逻辑，那么直接调用 validateValue 就可以了
// 应用逻辑
function validateValue(value){value = 5 * parseInt(value);
    
    if(value > 10){document.getElementById('id').style.display = 'block';
    }
}

// 事件处理程序
function handleKeyPress(event){if(event.keyCode === 13){
        var target = event.target;
        validateValue(target.value);
    }
}

未完待续 ……

退出移动版