HTML

话说前端 (1)

Dec 1st, 2009 Add Comment

在平时工作中, 我们环绕需求设计页面结构, 样式和效果, 做成 DEMO, 再交付开发工程师套用并做成动态页面. 但是在交付工程师时, 我发现自己的思维方式和别的前端有点不一样. 我有时会在自身角度去思考, 误认为对方也熟知某些技巧, 其实不然.

上星期, 我在找 "奇迹 MU" 游戏中出宝石的声音文件, 想用这个作为铃声. 我找遍了整个网络, 人们都告诉我, 可以在游戏的安装文件夹内找到某某文件, 将这个文件转格式就可以用了. 我很纠结, 好像除此之外再没有可以得到这个文件的办法了, 但我又不愿意为了不到 1KB 的一个文件去安装 G 量级的软件. (最后, 我在某国外网站找到了这个文件.)

对工程师来说, 他们或许对这个并不熟悉, 如果你告诉他需要学很多与其核心工作不相关的东西, 他们同样会很纠结. 所以作为前端, 应该尽量将前台的处理进行封装. 可能我说得不是很明白, 下面用 Rating Stars 举例说明一下.

演示

这是演示页面, 可以看到效果其实是一样的, 却是两种不同的处理风格.

方法 1

HTML

<div class="rating">
	<span class="light"></span>
	<span></span>
	<span></span>
	<span></span>
	<span></span>
</div>
<div style="clear:both;"></div>
<div class="rating">
	<span class="light"></span>
	<span class="light"></span>
	<span></span>
	<span></span>
	<span></span>
</div>
<div style="clear:both;"></div>
<div class="rating">
	<span class="light"></span>
	<span class="light"></span>
	<span class="light"></span>
	<span></span>
	<span></span>
</div>
<div style="clear:both;"></div>
<div class="rating">
	<span class="light"></span>
	<span class="light"></span>
	<span class="light"></span>
	<span class="light"></span>
	<span></span>
</div>
<div style="clear:both;"></div>
<div class="rating">
	<span class="light"></span>
	<span class="light"></span>
	<span class="light"></span>
	<span class="light"></span>
	<span class="light"></span>
</div>
<div style="clear:both;"></div>

CSS

.rating{
	padding:10px 0 0 10px;
}
.rating span{
	background:url(star_off.gif) no-repeat;
	display:block;
	float:left;
	width:14px;
	height:13px;
	margin-right:2px;
}
.rating span.light{
	background-image:url(star_on.gif);
}

方法 2

HTML

<div class="rating-1">
	<span class="star-1"></span>
	<span class="star-2"></span>
	<span class="star-3"></span>
	<span class="star-4"></span>
	<span class="star-5"></span>
</div>
<div style="clear:both;"></div>
<div class="rating-2">
	<span class="star-1"></span>
	<span class="star-2"></span>
	<span class="star-3"></span>
	<span class="star-4"></span>
	<span class="star-5"></span>
</div>
<div style="clear:both;"></div>
<div class="rating-3">
	<span class="star-1"></span>
	<span class="star-2"></span>
	<span class="star-3"></span>
	<span class="star-4"></span>
	<span class="star-5"></span>
</div>
<div style="clear:both;"></div>
<div class="rating-4">
	<span class="star-1"></span>
	<span class="star-2"></span>
	<span class="star-3"></span>
	<span class="star-4"></span>
	<span class="star-5"></span>
</div>
<div style="clear:both;"></div>
<div class="rating-5">
	<span class="star-1"></span>
	<span class="star-2"></span>
	<span class="star-3"></span>
	<span class="star-4"></span>
	<span class="star-5"></span>
</div>
<div style="clear:both;"></div>

CSS

.rating-1,
.rating-2,
.rating-3,
.rating-4,
.rating-5{
	padding:10px 0 0 10px;
}
.rating-1 span,
.rating-2 span,
.rating-3 span,
.rating-4 span,
.rating-5 span{
	background:url(star_off.gif) no-repeat;
	display:block;
	float:left;
	width:14px;
	height:13px;
	margin-right:2px;
}
.rating-1 span.star-1,
.rating-2 span.star-1,
.rating-2 span.star-2,
.rating-3 span.star-1,
.rating-3 span.star-2,
.rating-3 span.star-3,
.rating-4 span.star-1,
.rating-4 span.star-2,
.rating-4 span.star-3,
.rating-4 span.star-4,
.rating-5 span.star-1,
.rating-5 span.star-2,
.rating-5 span.star-3,
.rating-5 span.star-4,
.rating-5 span.star-5{
	background-image:url(star_on.gif);
}

方法 1 是我以前的编写风格, 相对于方法 2 其优点是标签少, 代码量少, 但要依赖后台程序生成页面的时候处理更多逻辑. 但是方法 2 已经将所有结构化的内容封装在内层, 尽管代码比较繁琐, 但调用方法简单.

实例说明

方法 1 中显示 3 颗星的页面代码是

<div class="rating">
	<span class="light"></span>
	<span class="light"></span>
	<span class="light"></span>
	<span></span>
	<span></span>
</div>

方法 1 中显示 4 颗星的页面代码是

<div class="rating">
	<span class="light"></span>
	<span class="light"></span>
	<span class="light"></span>
	<span class="light"></span>
	<span></span>
</div>

方法 2 中显示 3 颗星的页面代码是

<div class="rating-3">
	<span class="star-1"></span>
	<span class="star-2"></span>
	<span class="star-3"></span>
	<span class="star-4"></span>
	<span class="star-5"></span>
</div>

方法 2 中显示 4 颗星的页面代码是

<div class="rating-4">
	<span class="star-1"></span>
	<span class="star-2"></span>
	<span class="star-3"></span>
	<span class="star-4"></span>
	<span class="star-5"></span>
</div>

对后台开发人员来说, 方法 1 需要做循环处理, 并清楚这段代码内部的显示效果 (有可能是比较复杂的内容); 但方法 2 只需修改外层的标识字段. 在本例中, 如果从数据中取出的评分是 {$count}, 那么只需在外层做点手脚, 写成: rating-{$count}. 方法 2 就是把表示相似的东西尽量做成结构相同的整体, 并通过外层的标识来控制内部的表示.

总结

这里不能简单断言哪种方法更好, 但是在大型项目的团队开发中, 交流成本往往是很高的, 当执行效率起不到关键作用时, 对协作有利的方法明显更有价值. 好的用户体验不仅是让你的客户开心, 还要令你的搭档快乐.

声明: 本文采用 BY-NC-SA 协议进行授权. 转载请注明转自: 话说前端 (1)

36 Comments

JashionXu | May 12th, 2010 at 16:01

怎么你回复这里 GMAIL 的地址输不了的？
JashionXu | May 12th, 2010 at 16:01

呵呵，模块化的CSS，讲的跟CSS森里里一篇文章http://www.cssforest.org/blog/index.php?id=146 道理是一样的
fatkun | Dec 15th, 2009 at 00:16

感觉做前台的至少懂一门后台语言是必须的，做后台也可以适当了解下前端~~
这样协作起来比较方便~~
捷易通 | Dec 13th, 2009 at 13:24

觉得很深奥,估计自己还没到这个层次吧.
云*空间 | Dec 12th, 2009 at 15:42

额~~~完全看不懂~~
彬Go | Dec 11th, 2009 at 11:19

看了前辈的文章，收获颇丰...关于其中的星级评价实例，在下觉得也许有更加节约代码量，而且也将代码封装的方法，以下是我的实例演示网址。
http://www.bingo929.com/mytest/star-test/star_test.html

封装原理和前辈的实例2类似，后台仅需修改class中的number即可，8过我没有再嵌套任何代码，而是使用CSS Sprites技术完成不同星级的显示，在不提高流浪的同时减少了图片的http请求次数。没有使用空标签，而是在标签内使用文字来让搜索引擎和屏幕阅读器了解标签内容...CSS被禁用也能让用户了解自己等级...

如有疏忽之处还请各位指正...
浩天 | Dec 8th, 2009 at 23:29

深有体会，团队的沟通就是站在对方的角度做自己的事情
园子 | Dec 8th, 2009 at 14:50

这些细节确实应该注意~
Calcifer | Dec 7th, 2009 at 17:23

@mg12
没啥，那天以为你上了GFW光荣榜，结果只是疑似病例
mg12 | Dec 7th, 2009 at 12:41

@Calcifer
什么光荣榜?

@mars
是啊, 经验得慢慢积累.
mars | Dec 6th, 2009 at 11:16

以前觉得方法一简洁方便，没考虑都居然还有这些问题没考虑到
BB霜 | Dec 4th, 2009 at 20:48

好文章，慢慢琢磨
Calcifer | Dec 4th, 2009 at 17:13

Oh，我一回来你就上光荣榜了
crossyou | Dec 4th, 2009 at 13:01

来这里就是学习来了
。
樊鹏华 | Dec 4th, 2009 at 10:02

确实思路不一样，其实还是第一种比较好吧。
小棒打鼓 | Dec 4th, 2009 at 08:43

虽然对这个一窍不通，但是你的贡献精神值得钦佩，赞一个，~\(≧▽≦)/~
小骆驼商队 | Dec 3rd, 2009 at 18:29

雷锋啊，把简单带给别人，把麻烦留给自己……
不过，如果把调用方法说清楚的话，给方法1写程序也并不麻烦呀，而方法1还有方法2难以比拟的灵活性
不过，这只是个例子，实践遇到的情况可能比这个复杂的多，那时就要好好权衡了
mg12 | Dec 2nd, 2009 at 23:03

@bolo
如果 CSS 可以带逻辑处理, 那该多好呢.

@JAY
其实 1 0 1 0 1 这样的效果也可以简单做好, 怕就怕内部结构右边, 比如本来 5 星的, 但后来要做成 10 星的.

@evlos
确实如此, 人件是软件开发中最难管理的.
Justice | Dec 2nd, 2009 at 17:54

说得很对啊，所谓的最佳方案永远都只是相对的。
Zenoven自由人 | Dec 2nd, 2009 at 17:28

好东西。。。收藏了呵呵
Hobo | Dec 2nd, 2009 at 15:54

对于评级插件的总结的确不错
evlos | Dec 2nd, 2009 at 14:25

嘎嘎写得灰常清楚 ~
我要把"好的用户体验不仅是让你的客户开心, 还要令你的搭档快乐."加到我的关于页面收藏 ~
http://www.evlos.org/about/
O(∩_∩)O哈哈~
ZH CEXO | Dec 2nd, 2009 at 14:18

最后一句话真是点睛之笔~读了这篇文章，得到了一些收获
JAY | Dec 2nd, 2009 at 12:58

嗯嗯，大约简单来说，方法一注重更细小单位的复用，也提供更多的组合方式，适用于需求还在验证的情况。

比如要做成“1 0 1 0 1”的效果方法2估计是很难办到的（当然前提是你是希望这样诡异的使用）。

方法二则适用于需求已经确定的情况，简单的来说类似于HardCode。提供的扩展和灵活性很小，但是使用方便效率高。

如果是在试验探索阶段，方法一会优于方法二。但如果是在开发生成阶段的话，方法二也是一种不错的优化的处理方式。
bolo | Dec 2nd, 2009 at 12:23

方法二在后台处理起来更加简单，但CSS比较烦
mg12 | Dec 2nd, 2009 at 11:32

@chisdy
哈~

@齐林
在这个例子中, 我把庞大的游戏程序比作一种自己具备, 而可能其他人需要耗费一定时间才能掌握的技能; 而出宝石的声音文件却是一个唾手可得, 易于传递的小应用. 如果为了小小一个声音文件, 花费很多时间去下载和安装游戏, 那是相当的脑残.

@QiQiBoY
这个可能我没说明白, 所以我又加了一段. 实例说明, 你可以看一下.
菠萝 | Dec 2nd, 2009 at 11:11

做得不错!学习中!
万戈 | Dec 2nd, 2009 at 11:04

这个想法很有创意啊
QiQiBoY | Dec 2nd, 2009 at 10:32

Good，但是这两种貌似都是浏览器客户端在处理的吧
alswl | Dec 2nd, 2009 at 09:53

理念学习了
代码在学习中，感觉都是给某些元素加上一些CSS类么...看来我对前端的理解太不足了
zwws | Dec 2nd, 2009 at 09:26

没有绝对的事物.
齐林 | Dec 2nd, 2009 at 09:13

在阿里巴巴这样的公司，效率才是第一位啊！如果我找MU的叮宝石的声音肯定会按照你同事教的方法，因为我电脑就装着MU和转换软件！哈哈
chisdy | Dec 2nd, 2009 at 08:53

“好的用户体验不仅是让你的客户开心, 还要令你的搭档快乐.” 这话说得真好。
jeedoo | Dec 2nd, 2009 at 08:40

不错~~ 学习了~~~
Rui | Dec 2nd, 2009 at 00:30

学习一下：）
星点 | Dec 2nd, 2009 at 00:02

学习啦，呵呵，非常棒。

Add Comment Read Article

HTML

话说前端 (1)

演示

方法 1

方法 2

实例说明

总结

Jotting, Tutorial, UED