順序語句

順序語句是程序語言控制結構中最基礎，最簡單和最容易理解的一種，它確定了為完成某個功能先做什么，后做什么。分為有依賴關系的順序語句和無依賴關系的順序語句。

 

一、有依賴關系的順序語句

 

示例1

var myForm = document.forms['myForm']
var uname = myForm.uname.value
var pwd = myForm.pwd.value
login(uname, pwd)

這是Web前端開發過程中的一個登錄場景，從form表單中獲取用戶名和密碼，調用登錄函數完成登錄。很明顯這幾行代碼之間有依賴性，第二三句依賴於第一句，第四句依賴於第二三句。它們的依賴關系從代碼中發現，有依賴關系的是不能隨意調換語句順序。

 

示例2

order.computeAdult() 
order.computeChild()
order.computeCoupon()
var total = order.computeTotal()

這幾句的依賴關系就沒有那么明顯了，你很難了解它內部的邏輯，即每一個語句被調用后它做了什么，有沒有修改公用變量數據，對后續語句有沒有影響。這實際是一個旅游訂單結算業務，computeAdult計算成人的價格(成人價格*成人數量)，computeChild計算兒童的價格(兒童價格*兒童數量)，computeCoupon計算優惠券的價格(優惠券面值*數量)，computeTotal則等於 "成人+兒童-優惠券"。

 

對於有依賴關系的順序語句，應該通過以下方式增強其可讀性

1. 使子程序名凸顯依賴關系

比如示例2的計算支付總價的，都以computeXXX格式，至少這樣能猜到是在做同一件事，需要拆為幾個步驟。

 

2. 利用子程序的參數凸顯依賴關系

比如示例2，可以每次都把價格參數傳入

order.computeAdult(price) 
order.computeChild(price)
order.computeCoupon(price)

由於所有的子程序都使用了price，你會從中得到暗示，這幾個子函數可能操作了相同的數據變量。

 

當然還有一種更好方式，把子程序操作的結果變成下一個子程序的輸入，這樣依賴關系就很顯眼了

price = order.computeAdult(price) 
price = order.computeChild(price)
price = order.computeCoupon(price)

 

3. 用注釋對復雜的依賴關系進行說明

如果還擔心某些依賴關系不夠清晰，那就用注釋說明它以彌補代碼的不足。

 

二、無依賴關系的順序語句

無依賴關系的順序語句即是一條語句並不依賴上一條語句，它們只是各自完成不同的功能，相互之間沒有交集。

 

或許只有的語句可以隨意寫，比如

var $nav = $('#nav')
var $toolbar = $('#toolbar')
var $content = $('#content')

$toolbar.width(900)
$nav.heiht(300)
$content.css('color', 'gray')

$toolbar.show()
$content.show()
$nav.show()

這實際在操作三個dom元素，改變后顯示出來。作為一個普遍性原則，要讓程序自上而下閱讀，而不是目光被牽着跳來跳去。改成以下就清晰了許多

var $nav = $('#nav')
$nav.heiht(300)
$nav.show()

var $toolbar = $('#toolbar')
$toolbar.width(900)
$toolbar.show()

var $content = $('#content')
$content.css('color', 'gray')
$content.show()

這段代碼把每一個對象的引用都放在一起，把它們“局部化”。

 

對於無依賴關系的順序語句，應該把相關的語句組織在一起。因為它們處理的是相同的數據，執行類似的任務。而一旦把相關的語句組織在一起，可能會發現它們之間有很強的聯系，這時你可能會想把這些語句提取到一個子程序里。一個個相互獨立的子程序慢慢把功能實現了，代碼也清晰了。