顺序语句

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

 

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

 

示例1

?

1 2 3 4

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

这是Web前端开发过程中的一个登录场景，从form表单中获取用户名和密码，调用登录函数完成登录。很明显这几行代码之间有依赖性，第二三句依赖于第一句，第四句依赖于第二三句。它们的依赖关系从代码中发现，有依赖关系的是不能随意调换语句顺序。

 

示例2

?

1 2 3 4

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

这几句的依赖关系就没有那么明显了，你很难了解它内部的逻辑，即每一个语句被调用后它做了什么，有没有修改公用变量数据，对后续语句有没有影响。这实际是一个旅游订单结算业务，computeAdult计算成人的价格(成人价格*成人数量)，computeChild计算儿童的价格(儿童价格*儿童数量)，computeCoupon计算优惠券的价格(优惠券面值*数量)，computeTotal则等于 "成人+儿童-优惠券"。

 

对于有依赖关系的顺序语句，应该通过以下方式增强其可读性

1. 使子程序名凸显依赖关系

比如示例2的计算支付总价的，都以computeXXX格式，至少这样能猜到是在做同一件事，需要拆为几个步骤。

 

2. 利用子程序的参数凸显依赖关系

比如示例2，可以每次都把价格参数传入

?

1 2 3

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

由于所有的子程序都使用了price，你会从中得到暗示，这几个子函数可能操作了相同的数据变量。

 

当然还有一种更好方式，把子程序操作的结果变成下一个子程序的输入，这样依赖关系就很显眼了

?

1 2 3

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

 

3. 用注释对复杂的依赖关系进行说明

如果还担心某些依赖关系不够清晰，那就用注释说明它以弥补代码的不足。

 

二、无依赖关系的顺序语句

无依赖关系的顺序语句即是一条语句并不依赖上一条语句，它们只是各自完成不同的功能，相互之间没有交集。

 

或许只有的语句可以随意写，比如

?

1 2 3 4 5 6 7 8 9 10 11

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元素，改变后显示出来。作为一个普遍性原则，要让程序自上而下阅读，而不是目光被牵着跳来跳去。改成以下就清晰了许多

?

1 2 3 4 5 6 7 8 9 10 11

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

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

 

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