关于资源站项目小结

这个项目是一个游戏和软件下载的资源站，页面层级比较简单，主要是首页，列表页面，详情页面，排行榜页面，出错页面等。

CSS: 1、很勤快的做了CSS Sprite，将有关图片做了拼合减少HTTP request请求。
          2、关于CSS RESET，正好最近看了淘宝的新框架KISSY，比较了下觉得它的效率比较高，自己原来用的那套有冗余，譬如对DIV进行了{margin:0;padding:0}，这个是完全没必要的。因此在测试阶段进行了更新。
          3、因为有下载按钮只是下资源而不跳转，为解决难看的虚线框，我按同事原来的方式写了a:active, a:focus {-moz-outline:none;outline:none;ie-dummy:expression(this.hideFocus=true);}问题解决，渲染效率未知。
          4、还有些标签在目前项目中没用到，譬如sup{vertical-align:text-top}sub{vertical-align:text-bottom}，但考虑到未来的项目改版，还是先写着吧。
          5、为了减少自己的工作量及代码数量，像排行榜等模块都用了模块化的方式去写，但是因为之间有过些改动，样式命名不是特别规则，而且很多地方复用了。
          6、对于容错性，以前一直没特别关注，但这次因为是自己套了JSTL部分，发现部分模块在没有内容的时候特别丑，或者内容多的时候就出错，因为都做了处理，譬如没图片的时候也对IMG模块做个display:block处理，这样在FF下，即使没内容也不难看，还有一些截字符的内容，我们的原则是：尽可能的让用户看到名字信息，对于看不到的且有链接的内容，进行TITLE提示，而没有采用测试提的省略号意见。
       7、在FF下tahoma 的13号汉字字体找不到，直接变成了14号字体，还好我们默认是宋体，字体样式顺序为\5b8b\4f53,sans-serif,tahoma,arial，所以没做特别处理。
       8、我当时做资源列表的时候，看着这么多内容很想用表格，反正是数据，但是职业道德告诉我，这个应该算列表，所以最后还是用DIV模拟了表格，但事后发现代码也一个都没少，自己多了不少工作量。或许小爬虫喜欢吧
      9、图片既然已经拼合了，背景图样式就写在一起用逗号隔开，这样方便维护，而且在IE6这个老变态的浏览器下，算1个请求哦，写多个IE6就算多个了，你说冤不冤啊……
    10、到底要不要把CSS压缩了呢？压！用了YUI的压缩工具，发现20K的东西被压下仍旧还有19K，不知道该夸自己写的规范还是说压缩工具不管用，想到以后自己维护还要反解压，为了这个1K好像不值得，就又替换回来了。

HTML：比较顺利，按自己的理解写下去，都一次性通过了W3C校验，唯独在星星打分模块，原来同事是用了金银2色的星星图片，一开始我也照搬照抄，后来看了其它几个大站的写法，要求换成比较科学的背景写法，他们又多辛苦了一下。

JS:之前在原生JS和JQUERY之间挣扎了下，到底用哪种方式呢，后来同事说要用到JQ里的AJAX封装方法，心中一乐，那就JQ吧，事后发现省去了不少浏览器兼容方面的麻烦。整个项目中用到很多TAB切换，我又写了个方法调用。还有关于页面打开的方式，原来是用window.open或者location.href这样的方式，阻止了原生态的A HREF方法，后来考虑到容错性，又整体换了回来，我也觉得有默认的干嘛不用？据说是为了鼠标点上去除链接好看……

JSTL:这块对我而言是新内容。学到了知识点记录一下，判断最后一个状态<c:when test=”${s.last}”>和判断当前状态   <c:if test=”${parentMenu.id==item.id}”>,还有排序可以用s.index(从0开始)

<c:forEach var=”item” items=”${GAMELIBID.childrenMenu}” varStatus=”s”>
<c:if test=”${parentMenu.id==item.id}”>
<c:choose>
<c:when test=”${s.last}”>
<li><a href=”/resource/resourceList.html?menuId=${item.id}” title=”${item.name}”>${item.name}</a></li>
</c:when>
<c:otherwise>
<li><a href=”/resource/resourceList.html?menuId=${item.id}” title=”${item.name}”>${item.name}</a></li>
</c:otherwise>
</c:choose>
</c:if>
<c:if test=”${parentMenu.id!=item.id}”>省略了…… </c:if>
</c:forEach>

一开始以为这里的$会和JQ理的$冲突，事后发现一个是用{},一个是()，因此相安无事，和平共处。

用户体验：很不习惯首页那个轮播的BANNER从右到左带着我的眼睛转动了600多PX，觉得眼珠上下滚动距离小，比较合理。和交互人员沟通了可人家说：QQ就是这么做的，好吧，一句话被顶回来了。仔细分析了，发现阿里的产品多是上下滚动，腾讯的产品为左右滚动，但上个月他们突然改版了，换成了淡入淡出的效果，估计是CDC部门发现了这个问题吧，O(∩_∩)O哈哈~全信书不如无书！