Embed Size (px)
DESCRIPTION
刘松 篱笆网 前端工程师
Citation preview
CPOCPO项目的前端实践分享项目的前端实践分享
2010-10-16
刘松
篱笆网 前端工程师
Choose Photo Online 在线选片系统
会员 其他访客
选片浏览
CPO
分享
相册
商家 发起/看结果
帮帮选
上传相片
针对确认订单
交易 朋友
浏览投票
/留言
6月
7 月 8 月 23
选片
5
外围
增量 + 迭代的开发过程
9 月28启动
19
客照
公测26
相册
相片处理与发布相册管理相片管理分享相片
选片管理帮帮选相片对比
CPO HomeCPO AdminCPO Enter Points测试改进、公测
客照管理测试改进、发布
交付
调整
交付
调整
交付
调整
产品团队
交互设计视觉设计
交互建议
团队的专业构成及与前端的协作关系
页面、接口
交互、参数
开发团队
Bug
委托
Bug
判定
产品设计2 人
产品经理 1 人
产品运营 1 人
项目经理 1 人
基础服务 2人
系统维护 1 人
前端开发3 人
测试2 人
PHP 开发2 人
前端技术运用
模块化
jQuery
代码分离
代码压缩
1
2
3
4
模块化
BoxHead
Body
<div class="box"> <div class="hd"> <h3></h3> <div class="extra"></div> </div> <div class="bd"></div> <div class="ft"></div></div>
jQuery
滑动插件数据载体
选择操作
删除操作滑动插件数据载体
删除操作
控制按钮
删除配置
配置选片
相片排序
已配置
代码分离
浏览页面
Page
事件加载器 钩子元素
匹配元素 加载事件
事件函数
////相册列表处理事件var CPO.init_album_list = function (e) { //功能代码}////编辑相册事件var CPO.init_album_edit = function (e) { //功能代码}
//// 元素 class=“j” 作为钩子， a_xxx为事件特征function eventer(root) { var pattern = /a_(\w+)/; //事件特征正则格式 /// 筛选钩子元素 $(root).find('.j').each(function () { var matchs = pattern.exec(this.className); if (matchs) {//匹配事件、完成加载 var fn = CPO['init_' + matchs[1]]; if ($.isFunction(fn)) { fn(this); }; } });}
<body> <div class=“j a_album_list"> <a href="#" class=“j a_album_edit">编辑相册 </a> </div></body>
代码压缩
{ "Version": "v3", //版本 "Compress”: "1", //文件输出方案 "FileType": "js“, //文件类型 "Common": {//全局级文件 "jquery": ["jquery/jquery.js"] }, "Domain": {//引动的跨域文件（直接引用，不做压缩） }, "Module": {//模块级文件 "base_lib":["jquery/jquery.cookie.js",......] }, "Page": {//页面级文件 "list_album": {"C": ["jquery"],...... },
//PHP引用压缩实例 /** 相册列表 */ public function list_album() { $this->setFE ( "list_album" ); ...... }
浏览页面
Page
PHP标识 压缩配置
匹配配置 代码压缩
代码输出
代码压缩
浏览页面
Page
PHP标识 压缩配置
匹配配置 代码压缩
代码输出
jquery/jquery.jsjquery/jTab.jsjquery/json2.jsjquery/……cpo_album.jscpo_box.jscpo_tab.jscpo_form.jscpo_table.js……
list_album.c.p.js
代码压缩效果（ CSS）
代码压缩效果（ JS）
