时间: 2012-09-18 / 分类: WEB前端开发 - 用户体验设计 / 浏览次数: / 0 个评论 发表评论
项目前端开发的架构
WEB前端开发中的一些编程风格和书...
项目前端开发的架构
12条经典摄影技巧
黄金分割与摄影构图

最近画了一个项目前端开发的架构,囊括了前端开发的一些注意事项和流程规范,以及常用的一些开发工具等,也包括了通常和后端开发人员集成开发时候注意的一些事项:

Architects
1 1.List-前端技术清单
1.1 a. 需要了解的一些前端技术特点
1.1.1 – XHTML
1.1.2 – (1,2, and 3)
1.1.3 – Cross-Browser and Cross-Platform Compatibility
1.1.4 – DOM Scripting
1.1.5 – AJAX
1.1.6 – Flash
1.1.7 – Progressive Enhancement and Graceful Degradation
1.1.8 – Accessibility
1.1.9 – Usability
1.1.10 – Information Architecture
1.1.11 – Interface Design
1.1.12 – Visual Design
1.1.13 – Business Rules & Logic
1.2 b. 前端开发工程师应该关注的知识领域
1.3 c. 前端技术-关键字
1.3.1 标签语义化
1.3.2 css布局
1.3.3 css布局
1.3.4 浏览器兼容
1.3.5 css-sprite
1.3.6 网格布局
1.3.7 web标准
1.3.8 结构样式与行为分离
1.3.9 SEO
1.3.10 Ajax
1.3.11 Dhtml
1.3.12 jQuery
1.3.13 YUI
1.3.14 模块化
1.3.15 2.0
1.3.16 5
1.3.17 CSS3
1.3.18 ……
2 2、WorkFlow-开发流程
2.1 1、产品经理产出Product Requirement Document
2.2 2、交互产出Prototype
2.3 3、视觉产出Mockup
2.4 4、前端DEV工作
2.4.1 审核需求

2.4.1.1 理解产品需求

2.4.1.2 理解设计图和交互效果
2.4.1.3 前端各阶段的工作时间
2.4.2 编码开发

2.4.2.1 1、研究页面结构和复用性

2.4.2.2 2、研究页面特殊效果
2.4.2.3 3、搭建总体结构框架
2.4.2.4 4、模块制作
2.4.2.5 5、页面HTML+CSS制作
2.4.2.6 6、底层JS搭建
2.4.2.7 7、JS交互效果
2.4.3 daily测试
2.4.3.1 需要Daily Build环境
2.4.4 预发demo测试
2.4.5 与后端Intergration
2.5 5、后端DEV编码
2.6 6、测试
3 3、Spec-开发规范
3.1 前端开发的MVC分层
3.1.1 HTML
3.1.2 CSS
3.2 书写规范[附件:《WEB项目前端开发文档规范》]
3.2.1 HTML规范
3.2.1.1 推荐使用Zen Code
3.2.1.2 标准:风格缩进,整齐
3.2.1.3 标签和属性统一小写
3.2.1.4 浏览器兼容
3.2.1.5 尽量减少DIV的嵌套层数
3.2.1.6 ……(详见《WEB项目前端开发文档规范》)
3.2.2 CSS规范
3.2.2.1 尽量少Hack
3.2.2.2 只用Link引入,不用@import和行内样式
3.2.2.3 可以考虑使用LESS或者SASS来重构CSS
3.2.2.4 必须浏览器兼容
3.2.2.5 ……(详见《WEB项目前端开发文档规范》)
3.2.3 JS书写
3.2.3.1 以面向对象风格书写,注重封装性和可重用性
3.2.3.2 JS统一放置于页面底部,工具类的前置JS除外
3.2.3.3 页面标签不书写行内事件
3.2.3.4 浏览器兼容
3.2.3.5 要有一定的接口注释

3.2.3.6 ……(详见《WEB项目前端开发文档规范》)

3.3 命名规范[详细参见:《WEB项目前端开发文档规范》]
3.3.1 目录命名规范
3.3.1.1 前端assets目录结构
3.3.1.1.1 img
3.3.1.1.1.1 icon
3.3.1.1.1.2 _demo
3.3.1.1.2 css
3.3.1.1.2.1 底层通用级CSS[具体UI无关],如base.css

3.3.1.1.2.1.1 reset

3.3.1.1.2.1.2 quick
3.3.1.1.2.1.2.1 .cl
3.3.1.1.2.1.2.2 .fl
3.3.1.1.2.1.2.3 ……
3.3.1.1.2.2 站点产品级[模块化]common.css
3.3.1.1.2.2.1 mod
3.3.1.1.2.2.1.1 .page-mod
3.3.1.1.2.2.1.2 .tips-mod
3.3.1.1.2.2.1.3 .win-mod
3.3.1.1.2.2.1.3.1 .win-hd
3.3.1.1.2.2.1.3.2 .win-bd
3.3.1.1.2.2.1.3.3 .win-ft
3.3.1.1.2.2.1.3.4 …
3.3.1.1.2.2.1.4 ……
3.3.1.1.2.2.2 font\link\color…
3.3.1.1.2.3 页面级[非重用性模块]page.css
3.3.1.1.3
3.3.1.1.3.1 jQuery目录
3.3.1.1.4 3rd-第三方综合性组件目录
3.3.1.1.4.1 日历
3.3.1.1.4.2 FancyBox
3.3.1.1.4.3 …
3.3.1.1.5 skins
3.3.1.1.5.1 default
3.3.1.1.5.1.1 img
3.3.1.1.5.1.2 style.css
3.3.1.1.5.2 gray
3.3.1.1.5.2.1 img
3.3.1.1.5.2.2 style.css
3.3.1.1.5.3 pink
3.3.1.1.5.3.1 img
3.3.1.1.5.3.2 style.css
3.3.2 文件命名规范
3.3.2.1 统一小写
3.3.3 文件格式
3.3.3.1 文件统一存为utf-8格式,避免页面乱码
3.3.3.2 图片根据尺寸、颜色、透明和动画来判断需要是jpg或者gif
3.3.3.3 各类文件命名
3.3.3.3.1 HTML命名
3.3.3.3.2 CSS命名
3.3.3.3.3 JS命名
3.3.3.3.4 IMG资源命名
3.3.4 文件后缀
3.3.4.1 .html, .shtml
3.3.4.2 .gif, .jpg, .png
3.3.4.3 .css
3.4 需兼容的浏览器类型和IE Hack

3.4.1 IE6

3.4.2 IE7
3.4.3 IE8
3.4.4 IE9
3.4.5 Firefox
3.4.6 Chrome
3.4.7 Opera
3.4.8 Safari
3.5 常见的前端问题和挑战
3.5.1 HTML 规范
3.5.2 JS混乱、堆砌
3.5.3 CSS冲突、低效
3.5.4 ……
4 4、Javascript Framework-JS框架
4.1 选择一个脚本库类
4.1.1 √ 自行开发
4.1.2 √ jQuery
4.1.3 YUI
4.1.4 Prototype
4.1.5 dojo
4.1.6 Ext
4.1.7 QZFL
4.1.8 √ CommonJS
4.1.9 SuperJS
4.1.10 ……
4.2 实现功能
4.2.1 核心层core
4.2.1.1 array
4.2.1.2 class
4.2.1.3 date
4.2.1.4 dom
4.2.1.5 events
4.2.1.6 function
4.2.1.7 string
4.2.1.8 system
4.2.1.9 …
4.2.2 组件层
4.2.2.1 常用满足功能
4.2.2.1.1 跳窗警告提示
4.2.2.1.2 加载外部页面或者页面div
4.2.2.1.3 滑动效果
4.2.2.1.4 自定义动画
4.2.3 UI层
4.2.3.1 派生
4.2.3.1.1 button
4.2.3.1.2 dialog
4.2.3.1.3 tab
4.2.3.1.4 pagination
4.2.3.1.5 …
4.2.3.2 行为
4.2.3.2.1 draggable
4.2.3.2.2 stateable
4.2.3.2.3 slide
4.2.3.2.4 …
4.2.3.3 插件
4.2.3.3.1 alert
4.2.3.3.2 confirm
4.2.3.3.3 modal
4.2.3.3.4 keyboard
4.2.3.3.5 …
4.2.4 Util层
4.2.4.1 cookie
4.2.4.2 flash
4.2.4.3 form
4.2.4.4 io
4.2.4.5 json
4.2.4.6 xml
4.2.4.7 url
4.2.4.8 limitLength
4.2.4.9 …
4.2.5 特效组件fx
4.2.6 扩展层extra
4.2.7 其他组件
4.3 JS设计思路
4.3.1 易于封装、扩展
4.3.2 安全,避免冲突
4.3.3 高性能,安全可靠
4.3.4 可重用
4.3.5 按需装载[RequireJS+jQuery]
4.4 实现方案
4.4.1 最少暴露,只在当前作用域下新增一个变量
4.4.2 安全无害-不扩展原生对象和托管对象
5 5、Web Kit-开发工具
5.1 图像
5.1.1 Photoshop
5.2 编码
5.2.1 Zen Code插件
5.2.2 DW
5.2.3 Eclipse/Aptana
5.2.4 EditPlus/Sublime/UltraEdit
5.2.5 Vim/Emacs
5.2.6 TextMate
5.2.7 ……
5.3 取色和测量工具
5.3.1 MeasureIt
5.3.2 Colorzilla
5.3.3 FastStone…
5.4 SVN
5.4.1 Tortoise
5.4.2 SubVersion
5.4.3 ……
5.5 调试
5.5.1 Firebug
5.5.2 Google Chrome Developer Tools
5.5.3 Fiddler
5.5.4 Companion.JS
5.6 格式化
5.6.1 HTML Formatter
5.6.2 CSS Formatter
5.6.3 Javascript Formatter
5.6.4 HTML2JS
5.7 浏览器测试
5.7.1 IE Tester
5.7.2 VMWare
5.7.3 ……
5.8 文档管理
5.8.1 ADoc
5.8.2 JSDoc
5.8.3 YUIDoc
5.9 检验
5.9.1 JSLint

5.9.2 W3C Validator

5.9.2.1 HTML
5.9.2.2 CSS
5.10 性能分析
5.10.1 YUI Profiler
5.10.2 Firebug
5.10.3 Chrome
5.10.4 Page Speed
5.10.5 YSlow

5.11 整合

5.12 比对/替换
5.12.1 Beyond Compare
5.12.2 Batch Replace
5.13 压缩/优化
5.13.1 JsPacker
5.13.2 JSMin
5.13.3 Google Closure Complier
5.13.4 YUI Compressor
5.13.5 Yahoo!Smush.it
5.14 SEO优化
5.15 打包
5.15.1 Ant
5.15.2 Bat
6 6.Docs-标准文档输出
6.1 HTML评审确认单
6.2 前端注释规范
6.3 前端CSS代码规范
6.4 前端JS代码规范

6.5 √ 前端JS插件接口定义规范

7 10.Prospect-展望
7.1 利用HTML5+CSS3
7.1.1 替换图片
7.1.2 LocalStorage, Offline Storage
7.2 探索和研发最适合自己的前端架构
7.3 精雕细琢的前端编码
7.4 持续优化
7.5 ……
8 9.Intergration-如何有效的和后端开发集成?
8.1 开发过程中版本控制
8.1.1 全部以SVN进行代码控制
8.1.2 可以有效的在文件后添加版本后缀(?ver=)
8.1.3 前端分开发版和发布版
8.2 统一开发环境
8.2.1 搭建相同的Web Server环境下调试
8.2.2 ftp到专门的测试开发机
8.3 统一接口
8.3.1 提供JS接口文档
8.3.2 分工和专注点
8.3.2.1 :优化代码
8.3.2.2 后端:实现功能
8.4 递交开发
8.4.1 开发取最新版SVN数据
8.4.2 需要相同的测试环境进行测试
8.4.3 页面代码中使用dev和release版本的区别
8.5 打包整合
8.5.1 测试取最新版的SVN发布版数据
8.5.2 可以使用Ant打包工具,自动化前端流程
9 8.Code Review-代码评审
9.1 目的
9.1.1 1. 落实规范

9.1.2 2. 教育意义

9.1.3 3. 荣誉感

9.1.4 4. 发现问题和积累成果

9.1.5 5. 促进团队协作

9.2 方式

9.2.1 1. 规模

9.2.2 2. 时间

9.2.3 3. 代码量

9.2.4 4. 形式

9.2.5 5. 简要介绍应用场景

9.3 参考的部分方案标准

9.3.1 豆瓣前端
9.3.1.1 CSS
9.3.1.2 JS
9.3.2 ……
10 7.Optimize-前端优化
10.1 缓存(通常服务器端)
10.1.1 减少请求
10.1.2 浏览器检查是否最新
10.1.3 通过HTTP头控制
10.1.3.1 Expires: Sat, 1 Jan 2011 20:00:00 GMT
10.1.3.2 Cache-Control: max-age=31536000
10.1.4 设置过期时间为未来的某个时间
10.2 压缩
10.2.1 客户端的压缩
10.2.1.1 工具
10.2.1.1.1 YUI Compressor
10.2.1.1.2 Google Closure Compiler
10.2.1.1.3 Google PageSpeed
10.2.1.1.4 ……
10.2.1.2 方案
10.2.1.2.1 Javascript的压缩
10.2.1.2.1.1 JsPacker
10.2.1.2.1.2 YUI Compressor
10.2.1.2.2 CSS的瘦身和压缩
10.2.1.2.2.1 手工去掉无用的样式
10.2.1.2.2.2 YUI Compressor
10.2.1.2.3 HTML的Minify
10.2.1.2.3.1 发布的版本上去掉注释及空白符
10.2.1.2.4 图片优化
10.2.1.2.4.1 去掉图片上额外的空白区域
10.2.1.2.4.2 使用JPG、PNG-8、GIF和PNG-24的最优文件格式
10.2.1.2.4.3 部分可以考虑用CSS代替图片
10.2.1.2.4.4 部分优化过的PNG一般比GIF要小
10.2.1.2.4.5 使用Yahoo! Smush.it
10.2.2 服务器端的压缩
10.2.2.1 GZIP
10.2.2.2 Apache的mod_gzip/mod_deflate
10.3 性能
10.3.1 避免HTML嵌套
10.3.2 减少请求
10.3.2.1 CSS合并
10.3.2.2 图片sprites
10.3.2.3 Javascript
10.3.2.3.1 模块化拆分、合并
10.3.2.3.2 动态载入
10.4 Validator
10.4.1 W3C CSS Validator
10.4.2 W3C HTML Validator
10.5 验证效果
10.5.1 YSlow
10.6 规划和优化cookie
10.7 SEO优化
10.7.1 企业项目
10.7.2 互联网项目
10.7.2.1 ……
      站点地图 | 关于我 | 返回顶部
    Copyright © 2001-2013 { amiku.cn | zhangshunjin.com }. Powered by 

    阿米酷

    张顺金


    浙ICP备11002820号-1