注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

学会珍惜

You've been saying for the longest time

 
 
 

日志

 
 

关于前端架构  

2012-05-24 15:51:59|  分类: 架构 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

转自:张克军个人网站

前端基础架构的概念

一、基础架构

Infrastructure /??nfr?str?kt??(r)/ (中文记忆:因火丝恰克雪儿)

组织运行所必需的设施、设备和服务的体系

基础架构就像一个舞台,舞台布置好了,男女老少都可以在上面表演。舞台包含了灯光、音响等。

二、前端基础架构

前端团队 运行所必需的 规范 、 工具 和 系统 的体系

现状1:

现状2:

现状3:

——————————————————————————————

今天会说什么…

  • 前端架构解决哪些问题
  • 前端技术体系的构成
  • 前端架构的基础(1)-HTML设计模式
  • 前端架构的基础(2)-Javascript框架
  • 前端开发方式

一、前端架构解决的问题

问题1: 为产品的前端开发提供可复用的模式
  • 可重用的 前端应用开发模型 ,或者叫前端开发的脚手架
  • 一致的模板框架,组件库,JS框架,各种JS库
  • 要做的事:开发环境,平台工具(框架、库、发布工具等)
问题2: 打通产品开发链
  • 有多少人对自己公司的开发流程满意呢?
  • 部门间的代沟;专业间的代沟;流程的代沟
  • 处于开发(Build)的中间环节,可以平衡设计,得出更合理的开发方案
  • 要做的事:建立相关开发规范(跟BE/UE)、UI组件库(跟UE)
问题3: 团队的高效运行
  • 前端团队应当溶入到整个技术团队中(!important)
  • 完善自动化系统,弱化人为管理
  • 项目追踪系统、反馈系统、SVN、发布系统、开发环境、测试环境
  • 代码品质控制植入到系统中
  • 远程办公
  • 要做的事:完善各种系统
问题4: 创新和成长
  • 创新是玩出来的
  • 积累形成的技术体系,是非常宝贵的资源
  • 新同学可以更容易融入团队
  • 要做的事:个人开发环境,文档管理,知识库,分享和交流
小结: 前端基础架构的内容
  1. 开发环境*,平台工具(框架、库、发布工具等)
  2. 建立相关开发规范(跟BE/UE)、UI组件库(跟UE)
  3. 完善开发流程*
  4. 完善各种系统*
  5. 文档管理,知识库
  6. 分享和交流,新同学培训

*注:跟后端基础架构重叠

——————————————————————————————

前端技术体系的构成

1.  DoubanUI
- 设计原型库(Stencil Kit)
- 交互组件库 (内容展现)
- 模板(mako)组件库
2.  Javascript框架  - Do
3.  功能库  - 地图、media、DragDrop …
4.  自动化测试 、 品质校验 等工具…


——————————————————————————————

HTML设计模式

  1. 分离内容和样式 (网站重构的重要理念,早以深入人心)
  2. 分离结构和样式
  3. 分离结构和内容
  4. OOCSS ( http://oocss.org/ )

一、分离结构和样式

页面结构:

1 < div   class = "wrapper page-type" >
2    < div   id = "header" >header</ div >
3    < div   id = "content" >
4      < div   class = "main" >content...</ div >
5      < div   class = "aside" >content...</ div >
6    </ div >
7    < div   id = "footer" >footer</ div >
8 </ div >

模块结构:

1 < div   class = "mod"   id = "mod-id" >
2    < div   class = "hd" >title</ div >
3    < div   class = "bd" >content...</ div >
4    < div   class = "ft" >footer</ div >
5 </ div >

二、分离结构和内容

1 < div   class = "mod"   id = "db-hotsong" >
2    < div   class = "hd" >人气作品 · · · · · · </ div >
3    < div   class = "bd" >
4      < div   class = "songinfo" >...</ div >
5      < div   class = "player" >...</ div >
6      < div   class = "lyric" >...</ div >
7    </ div >
8 </ div >



——————————————————————————————

DoubanUI中的标准组件

  • 导航
    • 全局导航
  • 页脚
    • 完整版
    • 简版
  • 内容项
    • 图书条目
    • 电影条目
    • 唱片条目
    • 活动条目
  • 列表
    • 通用列表
    • 小组列表
    • 成员列表
    • 评论列表
    • 相册列表
    • 排行榜
    • 活动列表
    • 消息列表
    • 论坛列表
    • 标签
  • 表单
    • 登录
    • 回应
    • 评论
  • 分页
  • 提示区
    • 请求和提醒
  • 评价
  • 搜索
    • 成员搜索
    • 全能搜索
    • 小组搜索
    • 图书搜索
    • 电影搜索
    • 唱片搜索
    • 音乐人
    • 同城搜索
  • 按钮
  • 广告位
  • 媒体
    • 音乐播放器
  • 交互组件库
 

一、做成更好用的工具(实践中…)

二、CSS三级结构

范例:Chivas项目
  • 全站级core.css (20.8K, 6.9K gzip)
    定义标签重置、页面布局结构、模块结构、标准组件样式和常用规则
  • 产品级chivas.css (4.9K, 1.6K gzip)
    定义具体产品的统一样式
  • 页面级,定义页面专有的样式

三、Javascript应用

  • 框架 – do.js
  • 核心功能库 – jQuery, douban.js
  • 功能库 – map.js, swfobject.js ……
  • DoubanUI组件库 – dialog.js …
超轻量级Javascript框架 – Do
  • 框架 + 库
  • Douban Javascript开发框架
  • 是一个很轻薄的JS组织层。6.4K/2.3K(min)/1K(gzip)
  • 内部由 模块及依赖关系管理 异步加载队列 组成

解决模块重用问题

  • 一分为三。模块内容(HTML),模块对应的JS处理,它所依赖的JS和CSS
  • 放在一起,同时不影响页面性能
<div id="db-cover">...</div>  Do.add('dialog-css', {path: 'http://t.douban.com/css/ui/dialog.css',  type: 'css'});  Do.add('dialog', {path: 'http://t.douban.com/js/ui/dialog.js',  type: 'js'......});

统一的Javascript开发模式

  • 1. 内联的Javascript
    1 Do( 'mod1' 'mod2' function   () {
    2      // your code
    3 });
  • 2. 插件模式
    01 ( function ($){
    03    var   _privateVariable;
    05     MyClass =  function (el, config){
    06        this .init();
    07     };
    09     ......
    10       renderUI:  function   () {},
    11       bindUI:  function   () {},
    12       syncUI:  function   () {},

——————————————————————————————

现有的前端开发流程

改进的前端开发流程

对开发环节、Build环节、上线环节的改进

总结

  • 前端基础架构是什么?前端团队运行所必需的规范、工具和系统的体系
  • 它能解决什么问题?1)为开发提供可复用的模式; 2)打通产品开发链; 3)团队的高效运行; 4)创新和成长
  • 前端基础架构中技术体系的构成
  • HTML设计模式
  • Javascipt应用的基础-框架和库、代码模式
  • 开发流程
  • 其实还有更多:性能、安全、测试、代码维护……
  评论这张
 
阅读(340)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018