话说前端 (1)

Dec 1st, 2009 Translate Leave a comment Go to comments

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

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

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

演示

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

方法 1

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

.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 颗星的页面代码是 

1
2
3
4
5
6
7

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

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

1
2
3
4
5
6
7

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

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

1
2
3
4
5
6
7

<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 颗星的页面代码是 

1
2
3
4
5
6
7

<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)
  1. 星点 | #1
    Dec 2nd, 2009 at 00:02

    学习啦，呵呵，非常棒。

    Reply | Quote
  2. Rui | #2
    Dec 2nd, 2009 at 00:30

    学习一下：）

    Reply | Quote
  3. jeedoo | #3
    Dec 2nd, 2009 at 08:40

    不错~~ 学习了~~~

    Reply | Quote
  4. chisdy | #4
    Dec 2nd, 2009 at 08:53

    “好的用户体验不仅是让你的客户开心, 还要令你的搭档快乐.” 这话说得真好。

    Reply | Quote
  5. 齐林 | #5
    Dec 2nd, 2009 at 09:13

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

    Reply | Quote
  6. zwws | #6
    Dec 2nd, 2009 at 09:26

    没有绝对的事物.

    Reply | Quote
  7. alswl | #7
    Dec 2nd, 2009 at 09:53

    理念学习了
    代码在学习中，感觉都是给某些元素加上一些CSS类么...看来我对前端的理解太不足了

    Reply | Quote
  8. QiQiBoY | #8
    Dec 2nd, 2009 at 10:32

    Good，但是这两种貌似都是浏览器客户端在处理的吧

    Reply | Quote
  9. 万戈 | #9
    Dec 2nd, 2009 at 11:04

    这个想法很有创意啊

    Reply | Quote
  10. 菠萝 | #10
    Dec 2nd, 2009 at 11:11

    做得不错!学习中!

    Reply | Quote
  11. mg12 | #11
    Dec 2nd, 2009 at 11:32

    @chisdy
    哈~

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

    @QiQiBoY
    这个可能我没说明白, 所以我又加了一段. 实例说明, 你可以看一下.

    Reply | Quote
  12. bolo | #12
    Dec 2nd, 2009 at 12:23

    方法二在后台处理起来更加简单，但CSS比较烦

    Reply | Quote
  13. JAY | #13
    Dec 2nd, 2009 at 12:58

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

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

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

    如果是在试验探索阶段，方法一会优于方法二。但如果是在开发生成阶段的话，方法二也是一种不错的优化的处理方式。

    Reply | Quote
  14. ZH CEXO | #14
    Dec 2nd, 2009 at 14:18

    最后一句话真是点睛之笔~读了这篇文章，得到了一些收获

    Reply | Quote
  15. evlos | #15
    Dec 2nd, 2009 at 14:25

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

    Reply | Quote
  16. Hobo | #16
    Dec 2nd, 2009 at 15:54

    对于评级插件的总结的确不错

    Reply | Quote
  17. Zenoven自由人 | #17
    Dec 2nd, 2009 at 17:28

    好东西。。。收藏了 呵呵

    Reply | Quote
  18. Justice | #18
    Dec 2nd, 2009 at 17:54

    说得很对啊，所谓的最佳方案永远都只是相对的。

    Reply | Quote
  19. mg12 | #19
    Dec 2nd, 2009 at 23:03

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

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

    @evlos
    确实如此, 人件是软件开发中最难管理的.

    Reply | Quote
  20. 小骆驼商队 | #20
    Dec 3rd, 2009 at 18:29

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

    Reply | Quote
  21. 小棒打鼓 | #21
    Dec 4th, 2009 at 08:43

    虽然对这个一窍不通，但是你的贡献精神值得钦佩，赞一个，~\(≧▽≦)/~

    Reply | Quote
  22. 樊鹏华 | #22
    Dec 4th, 2009 at 10:02

    确实思路不一样，其实还是第一种比较好吧。

    Reply | Quote
  23. crossyou | #23
    Dec 4th, 2009 at 13:01

    来这里就是学习来了
    。 ;-)

    Reply | Quote
  24. Calcifer | #24
    Dec 4th, 2009 at 17:13

    Oh，我一回来你就上光荣榜了

    Reply | Quote
  25. BB霜 | #25
    Dec 4th, 2009 at 20:48

    好文章，慢慢琢磨

    Reply | Quote
  26. mars | #26
    Dec 6th, 2009 at 11:16

    以前觉得方法一简洁方便，没考虑都居然还有这些问题没考虑到

    Reply | Quote
  27. mg12 | #27
    Dec 7th, 2009 at 12:41

    @Calcifer
    什么光荣榜?

    @mars
    是啊, 经验得慢慢积累.

    Reply | Quote
  28. Calcifer | #28
    Dec 7th, 2009 at 17:23

    @mg12
    没啥，那天以为你上了GFW光荣榜，结果只是疑似病例 :grin:

    Reply | Quote
  29. 园子 | #29
    Dec 8th, 2009 at 14:50

    这些细节确实应该注意~

    Reply | Quote
  30. 浩天 | #30
    Dec 8th, 2009 at 23:29

    深有体会，团队的沟通就是站在对方的角度做自己的事情

    Reply | Quote
  31. 彬Go | #31
    Dec 11th, 2009 at 11:19

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

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

    如有疏忽之处还请各位指正...

    Reply | Quote
  32. 云*空间 | #32
    Dec 12th, 2009 at 15:42

    额~~~完全看不懂~~ :???:

    Reply | Quote
  33. 捷易通 | #33
    Dec 13th, 2009 at 13:24

    觉得很深奥,估计自己还没到这个层次吧.

    Reply | Quote
  34. fatkun | #34
    Dec 15th, 2009 at 00:16

    感觉做前台的至少懂一门后台语言是必须的，做后台也可以适当了解下前端~~
    这样协作起来比较方便~~

    Reply | Quote
  1. No trackbacks yet.

Twitter Email feed
RSS feed