花图里程碑3简要报告

  双12那天,花图里程碑3顺利上线了,经过一个月左右的开发,重新设计的UI,交互体验上有了质的飞跃,全面兼容移动端和PC端。后端主要是代码重构和基础框架升级,以及提高安全性等一些功能。现已经全站开启Http 2.0的支持,在最新版Chrome和Safari下加载速度得到了很大的提升。

  这里列出下本次升级前端所用到的开源框架:

1. Semmantic-UI
2. RequireJS
花图上一个版本用的基于Bootstrap二次开发的Flat-UI,由于当时只是简单的用了几个组件,并没有仔细去研究究竟能复用多少,以至于很多地方是自定义style,代码繁杂不堪,没有发挥出Bootstrap优势。所以这次决定完全重写,并引入requirejs模块化加载,css和js彻底从html中分离。

3. Creative Commons Font
用于显示Creative Commons共同创作许可协议的Icons,本着能用font icon就绝不用image。显然字体的显示效果绝对是好过图片的,大小,颜色都可以随意改变,加上操作系统对字体平滑的优化,效果棒棒的。

4. Elastislide
用于照片详情页的缩略图预览,俗称跑马灯效果。上个版本已开始用,增加了些鼠标移动的效果,移动端展示的一些优化。

5. Grayscale
一个Landing page,前期内容不够丰富的时候放一个用作功能介绍,黑白风格,个人蛮喜欢的,也就是现在看到的没登录首页。

6. lightGallery
用于详情页的照片全屏展示,新的版本在缩放动画上略微的有抖动,老版本则比较平滑,但老版本会在url中增加一个hash tag,导致复制出去的链接直接就是全屏。有时间再来研究。

7. Noty
一个基于jQuery的notification组件,各种ajax地方用到。

8. Plupload
大名鼎鼎的Html Uploader,功能强大不说,主要是能支持阿里OSS,Amazon S3进行Web直传。

9. Sortable
upload页面照片排序用,使用比较简单。

10. Underscore
一个小巧而精致的Javascript工具包,目前只用到里面的一个小功能debounce,对浏览器的宽度改变事件做一些延迟处理。

前端大致就这么多了,改天再分享后端的。

本文链接地址:https://dorole.com/1659/

来自:Dorole's Blog

发布者

Steve Yang

爱coding,爱摄影,爱旅游,爱音乐

发表评论

电子邮件地址不会被公开。 必填项已用*标注

:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!: