Javascript基础知识篇(6): 高质量开发准则(上)

　　很多从事web开发的项目都离不开Javascript，我个人也在目前的公司中用到了很多，但是感觉还不是很到位，尤其是对Javascript的开发规范上。可能有些朋友要说，我实现一个简单的的功能(如两个数相加)，需要遵守什么规范吗？我回答：需要。还有的会问：我的项目进度非常紧张，我有必要按照你说的规范一步一步来吗？我还是回答：需要。为什么呢？我认为与其在项目开发完毕的维护过程中，反复的调试还不如提前遵守开发规范，养成良好的编码习惯。结合我个人一直以来的职业习惯，我总结了以下几点，作为抛砖引玉。保持一致的编码风格。具体做法：

(1).函数都必须拥有函数名(匿名函数除外)，并以tab作为函数内容的缩进，函数体应包含在{}中(最好前{在函数名后)。

function sayHello() {//注意大括号的位置
    alert("Hello, Miracle");
    return true;
}

(2).函数体即使只有一句话(switch除外)，也建议用{}封闭起来。这样有利于以后需求变更和维护，以防止新手忘记添加{}。

if(x == y) {
    alert("We have a match!");
} else {
    alert("We have a problem!");
}

switch (prompt("What is your favorite fruit?", "banana")) {
    case "banana":
        alert("Well done. Bananas are full of potassium.");
        break;
    case "mango":
        alert("Exotic and tasty!");
        break;
    default:
        alert("That's not to my taste, but keep it up to get your 5 days.");
        break;
}

(3).注重大小写。一般准则如下：

a.大多数的变量和函数均以小写开头，采用驼峰法进行书写。

b.构造函数和类(实质是函数)均以大写开头。

c.所有的常量都是由大写组成并以"_"相连。

// Calendar构造函数
var Calendar = function() {
    // 大写标识常量
    var DAYS_IN_ONE_WEEK = 7;
    // 小写代表函数及变量
    var count;
    function add() {
    }
    // 变量及函数遵守驼峰法书写
    var currentDate;
    function updateCurrentDate() {
    }
}

(4).使用有描述语义的变量，避免使用"魔幻数"(即变量直接由一些常量数字计算而成)。

// currentDate代表"当前日期",userName代表"用户名"
var currentDate;
function setCurrentDate() {
}
var userName;
function updateUserName() {
}
// daysInAYear和seatsOnThePlane均为"魔幻数"
var daysInAYear = 52 * 7; 
var seatsOnThePlane = 25 * 6; 
//改进方案
var WEEKS_IN_A_YEAR = 52;
var DAYS_IN_A_WEEK = 7;
var daysInAYear = WEEKS_IN_A_YEAR * DAYS_IN_A_WEEK; 
var SEAT_ROWS_ON_PLANE = 25;
var SEATS_PER_ROW = 6;
var seatsOnThePlane = SEAT_ROWS_ON_PLANE * SEATS_PER_ROW;

(5).函数功能尽量单一，不要融入太多"复杂"逻辑，尽量按职责拆分成对应的子函数。

// 反馈用户对水果的爱好程度
function feedbackOnUsersFavoriteFruit() {
    // 用户喜欢的水果
    var favoriteFruit = prompt("What is your favorite fruit?", "None");
    var score = 0;
    // 根据喜欢的水果计算得分
    switch (favoriteFruit.toLowerCase()) {
        case "banana":
            score = 6;
            break;
        case "apple":
            score = 4;
            break;
        default:
            break;
    }
    //根据分数来统计结果
    if (score > 5) {
        alert("You picked one of my favorites too!");
    } else if (score > 0) {
        alert("Credit for choosing a fruit, at least!");
    } else {
        alert("Not sure about your choice of fruit!");
    }
}

从上面的函数我们看出：包含获取喜欢水果和计算得分两项职责(实际项目中很可能是多项职责)，我们在这里加以拆分。

// 用户喜欢的水果
function getFavoriteFruit() {
    return prompt("What is your favorite fruit?", "None");
}
// 根据喜欢的水果计算得分
function getFruitScore(fruit) {
    var score = 0;
    switch (fruit.toLowerCase()) {
        case "banana":
            score = 6;
            break;
        case "apple":
            score = 4;
            break;
        default:
            break;
    }
    return score;
}
//根据分数来统计结果
function getMessageByScore(score) {
    var message = "";
    if (score > 5) {
        message = "You picked one of my favorites too!";
    } else if (score > 0) {
        message = "Credit for choosing a fruit, at least!";
    } else {
        message = "Not sure about your choice of fruit!";
    }
    return message;
}
//最开始的函数
function feedbackOnUsersFavoriteFruit() { 
    var favoriteFruit = getFavoriteFruit();
    var score = getFruitScore(favoriteFruit);
    alert(getMessageByScore(score));
}

(6).习惯利用scriptDoc为函数添加注释。包含项目文件描述(包含功能、作者及版本等)，函数功能描述(包含参数，返回值，示例程序)。

/**
* @projectDescription 该文件用于日期对象操作
*
* @author Miracle He hmiinyu@sina.com
* @version 1.0
*/

/** 传入一个数并计算它的平方并返回四舍五入后的整数结果
*
* Examples:
* square(2.5); => 6
* square(2); => 4
* @param {Float} 传入计算的数
* @return {Integer} 返回四舍五入后的整数结果
*/
function square(number) {
    return Math.round(number * number);
}

(7).习惯使用"//TODO：[功能描述]"标记未完成的功能。以便于团队其他成员进行添加。

function checkPasswordStrength(password) {
    // TODO: 请完成密码强度检查
    return true;
}

(8).避免编写解决"不存在"问题的代码。即在项目开发中仅仅只编写与你问题相关的代码，而不是刻意添加与问题不相关的代码。如果你认为所做的代码能达到通用的层次，则建议将它封装到工具类中，而不是散列到各个业务文件中。这样可以更好的维护代码和提高重用性。举个例子，有时做项目经常碰到在前端页面获取MasterPage或者UserControl中某一个子控件时，在外部文件中不能使用$("#<%=id.ClientID%>")的方式来获取控件，因此我封装了一个函数并放到oa.lib.js中(oa是项目名，可自定义)。

/*DOM*/
oa.prototype.dom = {
    //根据ID获取对应的元素
    get: function (id, tag) {
        if (tag == undefined) return $("#" + id);
        switch (tag.toLowerCase()) {
            case "drop":
                return $("select[name$=" + id + "]");
            case "radio":
                return $("input[name$=" + id + "]");
            case "check":
            case "table":
                return $("table[id$=" + id + "]");
            case "input":
                return $("input[id$=" + id + "]");
            case "link":
                return $("a[id$=" + id + "]");
        }
    },
    //获取一组ID指定的元素
    gets: function (ids, tag) {
        var arr = ids; //ids可为数组或以逗号分隔的ID列表
        if (!(ids instanceof Array)) {
            arr = ids.split(',');
        }
        var elems = oa.dom.get(arr[0], tag);
        for (var i = 1; i < arr.length; i++) {
            elems = elems.add(oa.dom.get(arr[i], tag));
        }
        return elems;
    }
};
dom = oa.dom;

而当用户调用时，就很简单了。

<!--html-->
<asp:Content ID="Content3" ContentPlaceHolderID="content" runat="server">
     <asp:TextBox ID="txtSubject" runat="server" Text="科目"></asp:TextBox>
</asp:Content>
<!--javascript-->
dom.get("txtSubject", "input");

(9).保持Javascript(行为)，HTML(结构)，CSS(展现)分离，js和css以外部文件方式导入到html中。不要将三者混搭，这样极不专业也难以维护。我还是举个例子来说明。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>*****</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="Contents/styles/index.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/lib/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script src="Scripts/plugins/jquery.include.js" type="text/javascript"></script>
    <script src="Scripts/import/index.js" type="text/javascript"></script>
    <link rel="shortcut icon" href="Contents/images/common/favicon.ico" type="image/x-icon" />
</head>
<body>
    <form id="form1" runat="server">
    <div class="top">
        <iframe src="Shared/Header.aspx" width="100%" scrolling="no" marginwidth="0" marginheight="0"
            frameborder="0" height="85px" id="header"></iframe>
    </div>
    <div class="content">
        <div class="side">
            <iframe src="Shared/Menu.aspx" height="100%" frameborder="0" scrolling="auto" id="menu">
            </iframe>
        </div>
        <div class="bar">
            <iframe src="Shared/MenuBar.aspx" height="100%" frameborder="0" scrolling="auto" id="menubar">
            </iframe>
        </div>
        <div class="main">
            <iframe src="Shared/PageContainer.aspx" height="100%" frameborder="0" scrolling="auto"
                id="page"></iframe>
        </div>
    </div>
    <div class="bottom">
        Copyright ? 2007 - 2012 ***. All Rights Reserved
    </div>
    </form>
</body>
</html>

然后是外部文件(js,css)，我这里就不列出具体内容了。

(10).尽量编写有"防护性"的代码，即对你编写的代码保持很好的逻辑判断和异常处理。下面我们来看一个示例。

var hr = document.getElementById("horizontal-rule");
if (hr) { // 如果对象存在的前提下执行
    hr.parentNode.removeChild(hr); 
}

当你对你的代码不太确认时，请添加异常处理，以更好的进行调试。

try {
    // 以下代码不合法将导致异常
    document.getElementById("horizontal-rule").propertyName.toString();
} catch (error) {
    alert("An error occurred.");
)

请注意，才这里catch中的参数error，包含异常产生的原因和类型等信息。

try {
    // varx 不是有效的关键字，因此将抛出语法错误异常
    varx x = 0;
} catch (error) {
    // 以下列举六种对应的错误
    if (error instanceOf TypeError) {
        // 类型错误...
    } else if (error instanceOf SyntaxError) {
        // 输出错误消息
        alert(error.message); 
    } else if (error instanceOf RangeError) {
        // 超界错误
    } else if (error instanceOf EvalError) {
        // eval()执行错误
    } else if (error instanceOf ReferenceError) {
        // 非法引用错误
    } else if (error instanceOf URIError) {
        // URI解码错误
    }
}

有时为了满足业务需要，也可以自定义异常。

// 定义自定义异常
var domObjectNotFoundException = new Error("DOM object not found");
function getDOMObjectById(id) {
    var domObject = document.getElementById(id);
    if (!domObject) {
        // 当对象不存在时抛出错误
        throw domObjectNotFoundException;
    }
    return domObject;
}
try {
    // 假定我们获取一个不存在的对象
    getDOMObjectById("this-id-is-not-on-the-page").style.width = "100px";
} catch (error) {
    if (error instanceOf domObjectNotFoundException) {
        // 输出错误
        alert(error.message); 
    } else {
        // 做其他错误处理
    }
}

类似于很多面向对象的高级语言，你还能使用try/catch/finally形式，在finally在放置你必须执行的代码，不管是否产生异常。

try {
    getDOMObjectById("this-id-is-not-on-the-page").style.width = "100px";
} catch (error) {
    alert(error.message);
} finally {
    alert("不管你的对错，我依然光顾!");
}

后续还有很多规范，我会逐步总结下来....