![css2.1与css3 帮助文档手册[PDF]](http://every.pixeltells.com/wp-content/uploads/ta-thumbnails-cache/100x100-c/218-1-100x100-c.jpg)
» 浅谈设计中不可避免的耦合
2010/06/11 | 3评论 | 分享到：Google Reader | Twitter | 收藏到：百度 | QQ
今天谈到的这个问题，作为开发后台的程序员可能比较熟悉。概括的说，耦合就是指两个或两个以上的实体相互依赖于对方的一个量度。耦合作为名词在通信工程、软件工程、机械工程等工程中都有相关名词术语。（百度百科）这解释可能有点虚幻，在web设计中来说，以wordpress的架构为例，当设计师考虑新建一个主题的时候，在功能的需求方面可能会通过一些插件实现，如果插件和主题过于依赖，可能会遇到主题难以移植或者移植成本过高的现象，我们暂且把这种现象称为设计中的耦合。
这篇文章将以我个人的wordpress主题设计经验为引子，简略介绍我对设计者自身定位以及设计功能的看法。
谁来完成功能？
在这一点上，我几乎肯定的认同“插件来完成功能”的看法。插件同主题比较而言，用户具有更大更灵活的选择权利，当然，每一个用户有权决定他需要什么样的功能，然而，这样的设计原则会引致无法判断和控制的设计效果，这是设计者和用户都不想看到的后果。
MVC架构给出了答案，当然这并不是完美的答案：
- 筋（控制器Controller）- 负责转发请求，对请求进行处理。
- 表皮（视图View） – 界面设计人员进行图形界面设计。
- 骨架（模型Model） – 程序员编写程序应有的功能（实现算法等等）、数据库专家进行数据管理和数据库设计(可以实现具体的功能)。
谈到具体的开发例子，素说在为sunfeelings主题编码的时候遇到过这样的一个问题。使用第三方插件调用日志缩略图无疑将更有效和更灵活，但问题在于，第三方插件提供的DOM元素输出并不符合JQuery插件s3slider要求的格式。
<div class="xxx" id="xxxx">
<p style="....."><img src="..." /></p>
</div>
<!-- 这是缩略图插件输出的DOM结构 -->
<div id="xxx">
<ul id="..."><li class="..."><img src="..." /></li><ul>
</div>
<!-- 这是Jquery插件要求的标准DOM结构 -->
编码者不一定了解插件形成原理和输出结构语句（很多情况下这是web开发者的工作），如果希望坚持使用jquery插件提供的图片切换效果，必须要手动改变wordpress插件内部输出的代码结构，我认为这当然是违反设计原则的，因为我需要在发布这一主题的同时发布一组定制的插件。看起来确实不太方便？但国内的设计者确实有这么做的，我曾使用过一个中文wordpress主题，在不使用相关插件的情况下，页面几乎无法呈现。
在这个问题上，我们最终使用jquery改变了页面最终结构。这是我们当前认为最符合原则并且实用的兼容方法。
回到我们所谈论的耦合问题。在这个例子中，最好的方法莫过于wordpress设计者提供一组清除输出DOM元素的解决方案，或者允许用户在高级选项中自定义输出DOM元素，当然，这大大增加了插件设计者的工作量，更何况在大多数非深度定制的情况下，这个功能几乎没可能用到。
总的来说，插件应当负责完成功能，仅仅如此而已。
重构样式与DOM结构
重新回想一下以前的设计作品，在观察这些代码规律的时候我发现，有一段时间我几乎把所有样式写在一个id或者class中，例如：
#header {
width:500px;
height:200px;
background:#fff url(...) no-repeat left center;
float:left;
clear:both;
}
这也可以被看作是耦合的一种，并非所有的样式都应当组合在一个id或者class里边，按应当按照功能分类组合在不同的子样式表或者子样式中，以便于后期维护和再次开发。较好的写法可能是如下:
<div id="header" class="floatl clear">... </div>
#header {
width:500px;
height:200px;
background:#fff url(...) no-repeat left center;
}
.floatl {
float:left;
}
.clear {
clear:both;
}
同样的，组合不同分类的样式表，可以极大的加快开发效率和提供代码质量，例如使用@import 语句在主样式表中引入分样式表。BTW 这种方法配合css框架的使用会极大减少编码工作量。
最简化设计
如果使用较少的代码可以完成复杂的代码实现的功能，那么何乐而不为呢？这是JQuery流行的原因，也是python流行的原因。简洁总是可以突出最为重要的东西，关于web设计的最简化原则，之前我翻译了smash的一篇文章，也许这些案例可以帮助你理解最简化设计的内核。
最简化设计可以尽量避免耦合的产生，加快访问速度和解析速度。作为一个web设计师，如果你还没尝试手写html，我建议你试试看 
本文作者：TuringOU
转载请注明转载自素说设计工作室
共有3篇评论