写给大家的编程书（5）

小华是苦逼的网页设计师，目前公司安排他给怪鸽子餐厅做网页。经过几天的奋战，小华终于完成了怪鸽子餐厅网页的设计。

“周末快乐哦！明天怪鸽子餐厅要验收项目，我和小刚过去，这一次给你36个赞！”，老大拍着小华的肩膀。

噩耗是凌晨传来的。

“怪鸽子餐厅的人对网页各种不满意。所有餐厅名不要红色的，不要居中，菜单要绿色的。。。所有页面都要改！明天来加班吧，这个客户伤不起的。”老板在电话里呼喊着。

收！我们现在试着站在小华的角度处理这次“事故”。

前面的例子只是点菜页的一个片段。小华做了十几个页面：点菜页、菜品介绍页、怪鸽子餐厅介绍页、推荐菜品页。。。

先去掉“怪鸽子餐厅”的红色，不要居中！

<h1>
	<center>
		<font color="red">
			<b>
				怪鸽子餐厅
			</b>
		</font>
	</center>
</h1>

改为：

<h1>
			<b>
				怪鸽子餐厅
			</b>
</h1>

擦！十几个页面都有餐厅名，逐一打开，查找、修改一晃就是半小时。

菜单要绿色的！

<li>
		<font color="blue">
			<em>
				香辣鸽子
			</em>
		</font>
</li>

改为：

<li>
		<font color="green">
			<em>
				香辣鸽子
			</em>
		</font>
</li>

擦！七八个页面都有菜单项，逐一打开，查找、修改一晃就是一下午。

修改完毕，发布上去，末班车都回家了。小华拖着疲倦的身躯到公司楼下等Taxi，能救火这件事还是很幸福的，小华阿Q一下。

噩耗又在凌晨传来了，“幸运顾客页面的‘怪鸽子餐厅’还是红色的，没有居中，还有那个弹出框把'怪鸽子'写成‘怪鸭子’了。怪鸽子餐厅已经开始做电视广告了，必须马上改掉”。

小华摸黑回到公司，打开计算机君，幸福感全无，擦，为什么有一处检查漏了！

咳咳，修改返工是一种治标不治本的做法。要更好地解决问题，必须做更为深刻地思考，甚至需要技艺的演进。

事后梳理一下这个问题，我们可以找到一些原因：

网页结构极为复杂，是一个大杂烩。包含了内容、样式、行为。

“过度耦合”这个术语可以描述这种状态。耦合的代价是丧失独立性和复用性，随着工程规模的递增，复杂性会呈指数性增长。（就像解开十个在一起的结比解开一个单独的结难得多一样）

耦合的工程随着代码量的增加，coder要花更多时间去检查（如果代码转手了，接受的新coder要花更多时间去读懂之前的代码），任意一环脱节，系统都会崩溃。或者说，工程像AIDS的患者，对风险的抵御一天天降低，最后可能被一个小问题击溃。

每次都要定义菜单的颜色，而且是同样的代码：既浪费了设计师的时间又增加了网页的大小，降低了网页文件传播的时效性（见第一篇）。

“解耦”是一个对症下药的技术术语。让代码结构自由，各个功能各司其职、各个模块高度可复用，不相互依赖：让代码功能明确，更加健壮。

在网页设计这个大场景下，解耦的中心是： 让内容、样式、行为分离。

回想主页君最开始学习这些时遇到的困难，我们采取逐步分离的方法，先介绍内容、样式的分离，最后介绍行为的分离。

迫不及待地想结束掉HTML的部分，开始新的篇章，但是还有一个最重要的部分没有解决，下篇开始做一个小结吧！