CPO 项目的前端实践分享 2010-10-16 刘松 篱笆网 前端工程师
Choose Photo Online  在线选片系统 选片 浏览 分享 相册 发起 / 看结果 帮帮选 上传相片 针对确认订单 交易 朋友 浏览 投票 / 留言 会员 其他访客 CPO 商家
增量 + 迭代的开发过程 6 月 7 月 8 月 23 5 9 月 28 启动 19 公测 26 交付 调整 交付 调整 交付 调整 选片 外围 客照 相册 相片处理与发布 相册管理 相片管理 分享相片 选片管理 帮帮选 相片对比 CPO Ho...
团队的专业构成及与前端的协作关系 产品团队 交互设计 视觉设计 交互建议 页面、接口 交互、参数 开发团队  Bug 委托 Bug 判定 产品经理  1 人 产品运营  1 人 项目经理  1 人 基础服务  2 人 系统维护  1 人 产品设...
前端 技术运用 模块化 jQuery 代码分离 代码压缩 1 2 3 4
模块化 <div   class = &quot;box&quot; > <div   class = &quot;hd&quot; > <h3></h3> <div   class = &quot;extra&quot; ></div> </...
jQuery 删除配置 配置选片 相片排序 已配置 滑动插件 数据载体 选择操作 删除操作 滑动插件 数据载体 删除操作 控制按钮
代码分离 浏览页面 Page 事件加载器 钩子元素 匹配元素 加载事件 事件函数 //// 相册列表处理事件 var   CPO . init_album_list   =   function   ( e )   { // 功能代码 } //...
代码压缩 { &quot;Version&quot; :   &quot;v3&quot; , // 版本 &quot;Compress” :   &quot;1&quot; ,   // 文件输出方案 &quot;FileType&quot;...
代码压缩 浏览页面 Page PHP 标识 压缩配置 匹配配置 代码压缩 代码输出 jquery/jquery.js jquery/jTab.js jquery/json2.js jquery/…… cpo_album.js cpo_box.j...
代码压缩效果( CSS )
代码压缩效果( JS )
欢迎指正,欢迎探讨,谢谢大家! 刘松 [email_address]
Prochain SlideShare
Chargement dans…5
×

刘松 Cpo项目的前端实践分享

6 199 vues

Publié le

刘松
篱笆网 前端工程师

Publié dans : Technologie
0 commentaire
7 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
6 199
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
53
Commentaires
0
J’aime
7
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

刘松 Cpo项目的前端实践分享

  1. 1. CPO 项目的前端实践分享 2010-10-16 刘松 篱笆网 前端工程师
  2. 2. Choose Photo Online 在线选片系统 选片 浏览 分享 相册 发起 / 看结果 帮帮选 上传相片 针对确认订单 交易 朋友 浏览 投票 / 留言 会员 其他访客 CPO 商家
  3. 3. 增量 + 迭代的开发过程 6 月 7 月 8 月 23 5 9 月 28 启动 19 公测 26 交付 调整 交付 调整 交付 调整 选片 外围 客照 相册 相片处理与发布 相册管理 相片管理 分享相片 选片管理 帮帮选 相片对比 CPO Home CPO Admin CPO Enter Points 测试改进、公测 客照管理 测试改进、发布
  4. 4. 团队的专业构成及与前端的协作关系 产品团队 交互设计 视觉设计 交互建议 页面、接口 交互、参数 开发团队 Bug 委托 Bug 判定 产品经理 1 人 产品运营 1 人 项目经理 1 人 基础服务 2 人 系统维护 1 人 产品设计 2 人 前端开发 3 人 测试 2 人 PHP 开发 2 人
  5. 5. 前端 技术运用 模块化 jQuery 代码分离 代码压缩 1 2 3 4
  6. 6. 模块化 <div class = &quot;box&quot; > <div class = &quot;hd&quot; > <h3></h3> <div class = &quot;extra&quot; ></div> </div> <div class = &quot;bd&quot; ></div> <div class = &quot;ft&quot; ></div> </div> Box Head Body
  7. 7. jQuery 删除配置 配置选片 相片排序 已配置 滑动插件 数据载体 选择操作 删除操作 滑动插件 数据载体 删除操作 控制按钮
  8. 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&quot; > <a href = &quot;#&quot; class = “j a_album_edit&quot; > 编辑相册 </a> </div> </body>
  9. 9. 代码压缩 { &quot;Version&quot; : &quot;v3&quot; , // 版本 &quot;Compress” : &quot;1&quot; , // 文件输出方案 &quot;FileType&quot; : &quot;js“ , // 文件类型 &quot;Common&quot; : {// 全局级文件 &quot;jquery&quot; : [ &quot;jquery/jquery.js&quot; ] }, &quot;Domain&quot; : {// 引动的跨域文件(直接引用,不做压缩) }, &quot;Module&quot; : {// 模块级文件 &quot;base_lib&quot; :[ &quot;jquery/jquery.cookie.js&quot; ,......] }, &quot;Page&quot; : {// 页面级文件 &quot; list_album &quot; : { &quot;C&quot; : [ &quot;jquery&quot; ],...... }, //PHP 引用压缩实例 /** 相册列表 */ public function list_album () { $ this -> setFE ( &quot; list_album &quot; ); ...... } 浏览页面 Page PHP 标识 压缩配置 匹配配置 代码压缩 代码输出
  10. 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. 11. 代码压缩效果( CSS )
  12. 12. 代码压缩效果( JS )
  13. 13. 欢迎指正,欢迎探讨,谢谢大家! 刘松 [email_address]

×