顺序语句

顺序语句是程序语言控制结构中最基础，最简单和最容易理解的一种，它确定了为完成某个功能先做什么，后做什么。分为有依赖关系的顺序语句和无依赖关系的顺序语句。

一、有依赖关系的顺序语句

示例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()

这段代码把每一个对象的引用都放在一起，把它们“局部化”。

对于无依赖关系的顺序语句，应该把相关的语句组织在一起。因为它们处理的是相同的数据，执行类似的任务。而一旦把相关的语句组织在一起，可能会发现它们之间有很强的联系，这时你可能会想把这些语句提取到一个子程序里。一个个相互独立的子程序慢慢把功能实现了，代码也清晰了。