总结-相册作品

在暑假里，终于开始了自己的web前端之旅。

自己的第一个作品是华哥给的页面，虽然页面很简单，技术含量不高，毕竟这也是自己的一个也是第一个小作品，不要要求太高，牛人都是一步一步走上去的。

我的实战经验确实是比较少，或者说没有。在面试的时候如果可以拿出一个作品出来，那该有多好。面试官会关注这个的。

第一个作品是关于一些图片的展示，简单来说是相册，很简单的一个相册。同时也要处理一些美观问题。

现在作品算是完成了，但我只是很简单的对其进行了重构，也就是把代码写的好看点，更合理点，之后就归档了，同时我不会用过多的时间去完善这个作品。因为我还弄了另个一个比较满意的作品。这个满意不在技术层面上，在美观效果的显示上。同时也是华哥给与肯定的，也是因为这个公司老板才确定用我。不过我悲个催，还在商量我的上班时间。郁闷啊，郁闷，小公司就是小公司。

这个作品还存在的问题是：

1 css代码全是用Id来的，没有用到类，这个很悲剧。

2 页面的性能还可以提升，但小网站，性能优化很没有必要。

3 兼容性问题不好，各浏览器直接兼容有问题，导致有些显示效果不雅。虽然有解决办法，但这种解决方法自己都不推荐。

4 有些HTML表情用的不是很恰当，语义化性不强，绝大部分还行。

5 有人提出logo的位置不妥，再次我表示中立。

6 最后一页和第一页的提示用alert，这样不妥。

7很多功能没有开发。同时需求也不是明确

这个作品满意的地方是：

1 js代码写的比较好。引入命名空间把某个模块的功能放在一起，避免全局都是function 函数名。

2 配置文件的应用。这个想法来源于先去团队，把配置文件分离开来，易于修改程序的配置，同时需要什么配置可直接在上面添加删除进行操作。

3 图片page的切换效果。逐渐消失，有逐渐呈现。

遇到的困难和解决方法：

1 最讨厌兼容性问题。又不得不学，又难学，没什么书介绍，需要自己经验的积累。同时这浏览器啊，时不时更新一个版本。

2 fadeOut 和 fadeIn 在 ie 和 chrome 实现上的不同。比如ele元素本来是半透明的，使用fadeOut会消失，然后使用fadeIn 在ie上是显示不透明的，在chrome上显示是半透明的。这个问华哥有说“ie係用滤镜控制透明，唔係CSS嘅效果，处理嘅机制唔同”，所以各自的显示效果不同。关于这个我没有去找过证据。

3 img表情在不同的浏览器上表现不同。当 src="" 时，ie8 显示打叉图标。当时有想过把 src 属性去掉。不过还是不好，后来用了中别扭的方法处理这个问题。

4 中间透明黑色背景的摆放引起促发reflash的浏览器不统一问题，也就是上面的第一个困难。把背景层上移一层，并脱离标准流，大小不变。

5 bottom底部导航页面标签设计的纠结。

6 js逻辑错误，没测试不知道。要细心。

学到的东西：

1 position：relative 和 position：absolution 这两个在页面设计上用的很多。作品中遇到一个与此相关的难题，不明白页面元素的排版方式。在元素Ele设置了position：absolution属性后，他的top，left值为auto。也就在原本的位置，只是Ele元素脱离了标准流，不会影响接下来的元素的排版。之前我以为一旦设置了position：absolution的元素，其必定会靠在最近的参考相对元素上，即left=0px；top=0px；。我这个想法太幼稚了，呵呵。我很笨。

2 事件的建立。之前是$("select").bind("click",functiong(){ func()}); 要调用的函数为func(); 这样子无法传递参数，例如被点击的元素对象。 后来改为$("select").click(func); 这样就可以在func函数里接受事件传过来的对象了。  在func里可以用 $(this)来获得被点击的元素对象。也可以func(event){} 来获得点击事件的对象。 一个是元素对象，一个是事件的对象。

3 更了解jQuery的使用。jQuery确实个是好工具，不过其性能是否良好我暂时还不知道。好在用jQuery库的公司蛮多，先好好学习，在研究其库代码。

4 更熟练css的编写，这是我在下一个作品开发速度快很多。

5 更熟悉HTML标签的设计，往合理语义化靠拢。同时也方便css的编写。

6 连接上有手型鼠标不用 a{ cursor:hand} 而是用 a{ cursor:pointer}。

7 console.log 可在支持console控制台的浏览器上使用，ie就不给力了，ff和chrome还行。比较喜欢chrome的web Developer功能和firebu相当而且速度够快，美观，舒服。