Recomendados
Mais conteúdo relacionado
Semelhante a 刘松 Cpo项目的前端实践分享
Semelhante a 刘松 Cpo项目的前端实践分享 (20)
刘松 Cpo项目的前端实践分享
- 1. CPO 项目的前端实践分享 2010-10-16 刘松 篱笆网 前端工程师
- 2. Choose Photo Online 在线选片系统 选片 浏览 分享 相册 发起 / 看结果 帮帮选 上传相片 针对确认订单 交易 朋友 浏览 投票 / 留言 会员 其他访客 CPO 商家
- 3. 增量 + 迭代的开发过程 6 月 7 月 8 月 23 5 9 月 28 启动 19 公测 26 交付 调整 交付 调整 交付 调整 选片 外围 客照 相册 相片处理与发布 相册管理 相片管理 分享相片 选片管理 帮帮选 相片对比 CPO Home CPO Admin CPO Enter Points 测试改进、公测 客照管理 测试改进、发布
- 4. 团队的专业构成及与前端的协作关系 产品团队 交互设计 视觉设计 交互建议 页面、接口 交互、参数 开发团队 Bug 委托 Bug 判定 产品经理 1 人 产品运营 1 人 项目经理 1 人 基础服务 2 人 系统维护 1 人 产品设计 2 人 前端开发 3 人 测试 2 人 PHP 开发 2 人
- 5. 前端 技术运用 模块化 jQuery 代码分离 代码压缩 1 2 3 4
- 6. 模块化 <div class = "box" > <div class = "hd" > <h3></h3> <div class = "extra" ></div> </div> <div class = "bd" ></div> <div class = "ft" ></div> </div> Box Head Body
- 7. jQuery 删除配置 配置选片 相片排序 已配置 滑动插件 数据载体 选择操作 删除操作 滑动插件 数据载体 删除操作 控制按钮
- 8. 代码分离 浏览页面 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>
- 9. 代码压缩 { "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 标识 压缩配置 匹配配置 代码压缩 代码输出
- 10. 代码压缩 浏览页面 Page PHP 标识 压缩配置 匹配配置 代码压缩 代码输出 jquery/jquery.js jquery/jTab.js jquery/json2.js jquery/…… cpo_album.js cpo_box.js cpo_tab.js cpo_form.js cpo_table.js …… list_album.c.p.js
- 11. 代码压缩效果（ CSS ）
- 12. 代码压缩效果（ JS ）