之乎者也2011

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
关于前端架构 @张克军

from:  http://hikejun.com/sharing/2010webrebuild/?file=fe-infrastructure.html

前端基础架构的概念

一、基础架构

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应用的基础－框架和库、代码模式
  • 开发流程
  • 其实还有更多：性能、安全、测试、代码维护……
发表在 前端开发 | 留下评论

wordpress的TinyMCE编辑器追加html按钮

发表于 2011 年 07 月 15 日 由 gafish

wordpress虽然强大，但是它自带的TinyMCE编辑器wordpress 定制版却 烂的很（注意不是说TinyMCE很烂）。不但功能少，而且html模式也就是那个quicktags总是莫名其妙的忽略一些html标签。我经常在 html模式下直接写代码，发布后再查看我写的那些标签就莫名其妙的不见了，要不就自动替换掉，让人抓狂。

fckeditor很好，但是对wordpress的兼容性不好，有些插件会出现问题，比如wp-polls。

幸好人家TinyMCE自己有代码模式，只是wordpress为了逼我们使用quicktags而故意省略，那就自己动手添加。

我用的是3.2.1，找到wp-admin/includes/post.php文件，在1537行找到$mce_buttons = apply_filters(‘mce_buttons’, array( 在他的后面添加’code','|',即可。

091119

虽然没有fckeditor的代码模式完美，但凑合着用是足够了。

发表在 经验分享 | 留下评论

F2E – Front End Engineer 前端工程师

发表于 2011 年 07 月 15 日 由 gafish

【翻译自台湾yahoo奇摩前端】

什么是F2E，F2E又要做些什么样的工作。

1. F2E在做什么：

F2E的工作内容简言之就是：We tell browsers what to do. 也就是负责让设计好的网页页面，在不同的浏览器上都可以呈现出应有外观与互动效果。也就是要每天面对网页源代码，用一行行代码呈现出美丽的网页。

2. F2E需要懂什么：

F2E需要有良好的标记语意结构概念(semantic markup)，熟悉CSS、Javascript(DOM Scripting, AJAX)。在Yahoo!奇摩担任F2E，都必须使用YUI (Yahoo! User Interface Library, http://developer.yahoo.com/yui/)，这是全球Yahoo!的F2E都共通使用的程式宝库；阿当则是在加入Yahoo! 后，透过阅读文件、参与专题实践、与同事讨论，来了解YUI的精髓。

3. 好的F2E应具备什么样的能力：

(1) 了解网页应该要有良好的亲和力：可以跨平台与浏览器使用、或是让不能使用滑鼠或视障朋友可以正常浏览网页，都是展现网页良好亲和力的表现之一。身为台湾最大的入口网站，有各式各样的使用者造访，亲和力绝对不能被忽视。

(2) 达到producer(产品经理)与VD(视觉设计师)的需求：producer负责开出原型方案，设计网页的各种互动效果；VD负责给图以让网页看起来 美美的。而F2E则要以最少的code达成VD想要的效果，能够将视觉画面转换成程式，是F2E有别于其他软件工程师之外必备的技能。

(3) 符合W3C网页标准：能够让网页内容、结构（HTML）、样式（CSS，提供美丽的画面）、行为（Javascript）都分开。以确保HTML文件在任何情况下都是清楚、可阅读的。

(4) 由于产业特性，F2E工作相关资讯在网路上都看得到，技术演进速度很快，资料量大，所以担任F2E的人一定要有热情，愿意吸收不断演进的技术。

给想入行的人的建议：多买书，多看国外网站资讯。由于F2E的工作必需在design和coding中平衡，所以多培养美感，喜欢design，是相当重要的！

私房推荐网站：

Smashing Magazine: http://smashingmagazine.com/

Nettus: http://nettuts.com/

YUI library theater: http://developer.yahoo.com/yui/theater

 

发表在 前端开发 | 留下评论
posted on 2011-09-25 19:25  之乎者也2011  阅读(1812)  评论(0)  编辑  收藏  举报