Your SlideShare is downloading. ×
0
刘松 Cpo项目的前端实践分享
刘松 Cpo项目的前端实践分享
刘松 Cpo项目的前端实践分享
刘松 Cpo项目的前端实践分享
刘松 Cpo项目的前端实践分享
刘松 Cpo项目的前端实践分享
刘松 Cpo项目的前端实践分享
刘松 Cpo项目的前端实践分享
刘松 Cpo项目的前端实践分享
刘松 Cpo项目的前端实践分享
刘松 Cpo项目的前端实践分享
刘松 Cpo项目的前端实践分享
刘松 Cpo项目的前端实践分享
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

2,142

Published on

刘松 …

刘松
篱笆网 前端工程师

Published in: Technology
0 Comments
7 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
2,142
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
51
Comments
0
Likes
7
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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 = &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. 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&quot; > <a href = &quot;#&quot; class = “j a_album_edit&quot; > 编辑相册 </a> </div> </body>
  • 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. 代码压缩 浏览页面 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 )
  • 13. 欢迎指正,欢迎探讨,谢谢大家! 刘松 [email_address]

×