β

编写可维护的JavaScript 记录

rankber 60 阅读

随便记录一些书中重要的,因为当你真正自己写一个相对完整的前端项目,
你会发现你没有命名规范,没有一些模式,没有一些注释你以后就真的别想维护了。

代码格式及命名规范

代码4空格缩进,每行不要超过80个字符,如果判断条件过长,那么换行在运算符后换行的代码缩进也为4个空格
每个函数语句结尾不加分号, 每个流控制语句之前加入空行 方法之间也要加入空行
在方法中的局部变量和第一条语句之间最好也要加入空行,方便阅读。
在多行或单行注释之前适当加入空行

常量用全大写字母 驼峰式命名变量名函数或方法的前缀是动词,变量的前缀是名词 例如

 can has is get set 
 var URL MAX_COUNT

特殊值null用来初始化一个变量,这个变量可能是一个对象
当函数的参数期望是对象时,用作参数传入,当函数的返回值期望是以象时,用作返回值
null 就相当于对象的占位符
undefined是一个特殊值 是一个类型,undefined typeof 的运算符混淆
多行注释 注释前加空格,星号后加空格当代码不是很清晰时才加注释,难于理解的代码,可能被误认为错误的代码,块语句左右加间隔。

UI层的松耦合

如果两个组件耦合太紧,则说明一个组件和另一个组件直接相关,这样的话修改一个组件的逻辑
那么另一个组件逻辑也需修改。
当你能够做到修改一个组件而不需要更改其他的组件时,你就做到了松耦合。

事件处理

检测数组最优雅的方案

    function isArray(val) {
        if(typeof Array.isArray === "function") {
            return Array.isArray(val);
        } else {
        return Object.prototype.toString.call(value) === "[object Arrat]";
        }
    }

检测属性(检测一个属性是否在对象上存在时)
in 简单的判断对象的属性是否存在
hasOwnProperty也可以达到同样的目的,检查实例对象的某个属性

将配置数据从代码中分离出来

配置数据是应用中写死的值,那即然是配置就应当更灵活些。

    var config = {
            URL:"XX",
            MESSAGE:"XX"
        }
    function validate(value) {
        if(!value) {
            alert(config.MESSAGE);
        }
    }

抛出自定义错误

throw 抛出错误信息
如果没有通过try-catch 语句捕获,抛出任何值都将引发一个错误。

    function getDivs (element) {
        if(element && element.getElementsByTagName) {
        return element.getElementsByTagName("div");
        } else {
            throw new Error("getDivs":Argument mus be a DOM element);
        }
    }

浏览器嗅探

最好不要使用用户代理而是去检测对象属性等方法(特性检测)window.getElementById

自动化

基本结构

build 用来放放置最终构建后的文件
src 用来放置所有的源文件
tests 用来放置所有的测试文件
有时间看看开源的jQuery和BackBone等代码如何构建编译的

风格指南

    //TODO 说明代码还未完成,应当包含下一步要做的事
    //HACK 说明代码实现走了一个捷径,应当包含为何使用hack
    //XXX 说明代码是有问题的并应当尽快修复
    //FIXME 说明代码是有问题的并应尽快修复
    //REVIEW 说明代码任何可能的改动都需要评
    //TODO: 我希望找到一种更好的方式
    doSomething()

    /*
     * HACK: 不得不针对IE 6去做除理
     * 可能再下一版本去掉
     */
     if (document.all) {
        fuck ie    
     }

     //REVIEW: 有更好的方法吗?
     if (document.all) {

     }
作者:rankber
知其然,知其所以然
原文地址:编写可维护的JavaScript 记录, 感谢原作者分享。

发表评论