浅谈前端的架构与开发

Posted: 七月 20, 2011 in Develope
标签:

随着HTML5的逐渐成熟,以及CSS3的逐渐普及,各大厂商出人意外的统一要支持HTML5,这给奋斗在frontend developer带来了无限的曙光,给了我们大展拳脚的机会!
不知不觉我做前端的开发工作也差不多一年了,有很多东西我觉得是时候来总结一下了。
交互式架构篇

试想一下下面的工作场景:你需要构建一个资源网站,网站中必须要有搜索框架以及注册框架,你会怎么安排自己的工作以便将来的维护?是不是一溜烟的写个页面的雏形,然后一步一步添加所需要的其他功能?我不赞同这样的做法,因为这不利于公用以及页面组件的重用。我们需要:框架+模式+组件,个人愚见,当需要开发大规模的网站的时候,这样做事必不可少的!

框架:一个针对具体应用的结构,比如说:目录框架(taobao),搜索框架(google),注册框架(spinscape)等
模式:一个具体应用中具体的内部模块的设计模式,比如:注册模式可以是需要输入用户名、密码、。。然后是提交按钮,也可以是一个email加密码就构成了一个注册模式
组件:针对模式的代码实现

前端技术篇
HTML5
html5的出现改变整个flash独大的格局,不需要插件就可以实现flash高级效果,只是目前性能还不是很高。html5的应用主要带来了以下改变:
HTML5表单对象:

html5属性:

html5音频和视频编码:

html5的web应用程序:

web应用程序这部分有过以下研究,应用可能有以下方向:
canvas :游戏,动画,3D
drag&drop :文件上传到浏览器中只需要拖拖拽拽就OK了
websocket :大文件的传输,web即使通讯工具,游戏
webworker :大规模应用于数学计算,只需要一步进行的各种操作,值得注意的是,在IE中可以使用Google Gears达到同样的效果
windows hash:通过改变windows hash触发一些windows的一些操作,这个api对于IE8也是支持的
indexDB : 因为W3C组织已经废弃了websql相关标准的制作,可以预知将来所有的浏览器都将支持indexDB作为客户端的数据库
offline application:通过在html中定义manifest文件头来达到离线存贮的目的,这个应用在移动设备上将非常有用
history : ajax的应用使得浏览器的前进和后退按钮‘失效’了,为了弥补这个缺憾,可以使用history api
query selector:这个用来查找dom集合的api在现代浏览器中全部支持了,我们现在就可以使用querySelector和querySelectorAll

CSS3
css3属性:

css3选择器

CSS3应用
animation: 动画,结合preserve3D可以达到3D视角的效果
trasform : 旋转,倾斜,平移
transition : 动画过度效果相关
结合特有的css3事件 ,如 webkitTransitionStart,webkitTransitionEnd可以打造出非常炫的动画效果!

技巧篇:
Zencoding:可以用简单的代码达到相应的效果,包括html,css
Less:面向对象的css,可以用面向对象的方式写出css,然后编译出css代码
YUI Compresser、google closure compiler:压缩js和css代码,另外注意的是:在网速低和服务器不支持gzip压缩时,请使用这种packer进行压缩,更佳
minify:将多个css请求合并到一个url中请求
JSMake:这个是我的同事使用的工具,可以对js进行预处理:依赖,version替换
YSlow:网站性能检测

推荐资源:
Yahoo! Design Pattern Library(yahoo 模式库)
HTML5 ADVENTURE CALENDAR(24天学习)
HTML5 Doctor(compatable all browser html5 lib,just beta version)
互联网这点事
前端观察
设计达人
CSS3 animation event

Advertisements

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s