SlideShare une entreprise Scribd logo
1  sur  39
电子书项目总结 ( 前端 ) 拔赤  [email_address]
前后端分工
Yahoo 技术栈
前端和后端
前端工程师的知识结构
分工 ,[object Object],[object Object],[object Object],[object Object],[object Object]
前端职责 ,[object Object],[object Object],[object Object]
Ebook 中的前端规范
脆弱的页面代码 ,[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],糟糕的后果
[object Object],[object Object],[object Object],[object Object],规范的页面代码
前端通用规范 ,[object Object],[object Object],[object Object],[object Object]
前端质量 Firefox2 ~ 3 IE6~8 chrome opera safari
Cubee— 对 YUI3 的封装
[object Object],[object Object],Cubee 的目标
//a 的代码 YUI({modules:{ 'module-a':{ fullpath:'module-a.js' } }}).use('module-a',function(sandbox-a){ //a 的代码 }); //b 的代码 YUI({modules:{ 'module-b':{ fullpath:'module-b.js' } }}).use('module-b',function(sandbox-b){ //b 的代码 }); 基于原生 YUI3 的多模块之间的松耦合
基于原生 YUI3 的松耦合 ,[object Object]
var Logic1 = (new Cubee()).addmojo({ 'module-a':{ fullpath:'module-a.js' } }).onReady(function(sandbox-a){ //a 的代码 }); var Logic2 = (new Cubee()).addmojo({ 'module-b':{ fullpath:'module-b.js' } }).onReady(function(sandbox-b){ //b 的代码 }); 基于 Cubee 的模块间的紧耦合 TBloader.onReady(function(){ Logic1.start(); Logic2.start(); });
基于 Cubee 的紧耦合 ,[object Object]
YUI 和 Cubee 的区别 ,[object Object],基于 Cubee 的紧耦合 模块间关系松散 自定义 js 的重复引用 项目自定义 js 库 更严格的模块依赖 重复引用的去重
矛盾的双方 ,[object Object],[object Object]
ebook 的取舍 ,[object Object],[object Object]
Ebook 中的组件
Example:   http://taobao-wd.ns1.name/doc/example/listhover.html   排行榜
Example:   http://taobao-wd.ns1.name/doc/example/pagination-2.html   分页
Example:   http://taobao-wd.ns1.name/doc/example/simpleditor.html   编辑器
基于 yui3 的 swfstore Example:   http://taobao-wd.ns1.name/doc/example/swfstore.html   我的书架
Example:   http://taobao-wd.ns1.name/doc/example/tblogin.html   淘宝登陆层
Example:   http://taobao-wd.ns1.name/doc/example/tbrr.html   评论组件
前端调试工具简介
基于 firefox ,[object Object],[object Object],[object Object]
基于 IE ,[object Object],[object Object]
firebug 的使用 ,[object Object],[object Object]
经验教训
套页面 ,[object Object],[object Object],[object Object],[object Object],HTML 学习: http://www.w3school.com.cn/html/
文件编码 ,[object Object],[object Object],[object Object],set fileencodings=ucs-bom,utf-8,GB18030,gbk set fileencoding=gb18030
文件编码  续 ,[object Object],[object Object]
wiki ,[object Object],[object Object]
Q&A

Contenu connexe

Similaire à 电子书项目总结 前端

Real World ASP.NET MVC
Real World ASP.NET MVCReal World ASP.NET MVC
Real World ASP.NET MVCjeffz
 
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)Joseph Chiang
 
前端基础知识回顾
前端基础知识回顾前端基础知识回顾
前端基础知识回顾Wu tianhao
 
淘宝网前端开发面试题
淘宝网前端开发面试题 淘宝网前端开发面试题
淘宝网前端开发面试题 Lumend
 
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发leneli
 
MobileWebAppFramework_V5_design
MobileWebAppFramework_V5_designMobileWebAppFramework_V5_design
MobileWebAppFramework_V5_designJackson Tian
 
ASP.Net MVC2 简介
ASP.Net MVC2 简介ASP.Net MVC2 简介
ASP.Net MVC2 简介Allen Lsy
 
淘宝网前端应用与发展
淘宝网前端应用与发展淘宝网前端应用与发展
淘宝网前端应用与发展taobao.com
 
Web testing automation
Web testing automationWeb testing automation
Web testing automationkuozui
 
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型裕波 周
 
Javascript primer plus
Javascript primer plusJavascript primer plus
Javascript primer plusDongxu Yao
 
Django敏捷开发 刘天斯
Django敏捷开发 刘天斯Django敏捷开发 刘天斯
Django敏捷开发 刘天斯liuts
 
Effective.enterprise.java中文版
Effective.enterprise.java中文版Effective.enterprise.java中文版
Effective.enterprise.java中文版Peter Fan
 
000 北京圣思园教育科技有限公司第一期面授培训大纲
000 北京圣思园教育科技有限公司第一期面授培训大纲000 北京圣思园教育科技有限公司第一期面授培训大纲
000 北京圣思园教育科技有限公司第一期面授培训大纲ArBing Xie
 
价值中国网站开发、管理经验探讨、分享、交流
价值中国网站开发、管理经验探讨、分享、交流价值中国网站开发、管理经验探讨、分享、交流
价值中国网站开发、管理经验探讨、分享、交流hizhubo
 
前端开发规范
前端开发规范前端开发规范
前端开发规范aNd1coder
 
不一樣的Web server... coServ
不一樣的Web server... coServ不一樣的Web server... coServ
不一樣的Web server... coServBen Lue
 
富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用luolonghao
 
[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am iTwinsen Liang
 
非常靠谱 Html 5
非常靠谱 Html 5 非常靠谱 Html 5
非常靠谱 Html 5 Tony Deng
 

Similaire à 电子书项目总结 前端 (20)

Real World ASP.NET MVC
Real World ASP.NET MVCReal World ASP.NET MVC
Real World ASP.NET MVC
 
建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)建立前端开发团队 (Front-end Development Environment)
建立前端开发团队 (Front-end Development Environment)
 
前端基础知识回顾
前端基础知识回顾前端基础知识回顾
前端基础知识回顾
 
淘宝网前端开发面试题
淘宝网前端开发面试题 淘宝网前端开发面试题
淘宝网前端开发面试题
 
OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发OPOA in Action -- 使用MagixJS简化WebAPP开发
OPOA in Action -- 使用MagixJS简化WebAPP开发
 
MobileWebAppFramework_V5_design
MobileWebAppFramework_V5_designMobileWebAppFramework_V5_design
MobileWebAppFramework_V5_design
 
ASP.Net MVC2 简介
ASP.Net MVC2 简介ASP.Net MVC2 简介
ASP.Net MVC2 简介
 
淘宝网前端应用与发展
淘宝网前端应用与发展淘宝网前端应用与发展
淘宝网前端应用与发展
 
Web testing automation
Web testing automationWeb testing automation
Web testing automation
 
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
从无阻塞并行脚本加载(Lab.js)到浏览器消息模型
 
Javascript primer plus
Javascript primer plusJavascript primer plus
Javascript primer plus
 
Django敏捷开发 刘天斯
Django敏捷开发 刘天斯Django敏捷开发 刘天斯
Django敏捷开发 刘天斯
 
Effective.enterprise.java中文版
Effective.enterprise.java中文版Effective.enterprise.java中文版
Effective.enterprise.java中文版
 
000 北京圣思园教育科技有限公司第一期面授培训大纲
000 北京圣思园教育科技有限公司第一期面授培训大纲000 北京圣思园教育科技有限公司第一期面授培训大纲
000 北京圣思园教育科技有限公司第一期面授培训大纲
 
价值中国网站开发、管理经验探讨、分享、交流
价值中国网站开发、管理经验探讨、分享、交流价值中国网站开发、管理经验探讨、分享、交流
价值中国网站开发、管理经验探讨、分享、交流
 
前端开发规范
前端开发规范前端开发规范
前端开发规范
 
不一樣的Web server... coServ
不一樣的Web server... coServ不一樣的Web server... coServ
不一樣的Web server... coServ
 
富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用
 
[2008]网站重构 -who am i
[2008]网站重构 -who am i[2008]网站重构 -who am i
[2008]网站重构 -who am i
 
非常靠谱 Html 5
非常靠谱 Html 5 非常靠谱 Html 5
非常靠谱 Html 5
 

Plus de jay li

犀牛书第六版
犀牛书第六版犀牛书第六版
犀牛书第六版jay li
 
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践jay li
 
Jswebapps
JswebappsJswebapps
Jswebappsjay li
 
潜力无限的编程语言Javascript
潜力无限的编程语言Javascript潜力无限的编程语言Javascript
潜力无限的编程语言Javascriptjay li
 
Responsive Web UI Design
Responsive Web UI DesignResponsive Web UI Design
Responsive Web UI Designjay li
 
深入剖析浏览器
深入剖析浏览器深入剖析浏览器
深入剖析浏览器jay li
 
HTML/CSS/JS基础
HTML/CSS/JS基础HTML/CSS/JS基础
HTML/CSS/JS基础jay li
 
淘宝前端技术巡礼
淘宝前端技术巡礼淘宝前端技术巡礼
淘宝前端技术巡礼jay li
 
F2e security
F2e securityF2e security
F2e securityjay li
 
中国元素在设计中的应用 -如瑟
中国元素在设计中的应用 -如瑟中国元素在设计中的应用 -如瑟
中国元素在设计中的应用 -如瑟jay li
 
卫银霞 -统计数字会撒谎
卫银霞 -统计数字会撒谎卫银霞 -统计数字会撒谎
卫银霞 -统计数字会撒谎jay li
 
编码大全 拔赤
编码大全 拔赤编码大全 拔赤
编码大全 拔赤jay li
 
小控件、大学问
小控件、大学问小控件、大学问
小控件、大学问jay li
 
Mobile UI design and Developer
Mobile UI design and DeveloperMobile UI design and Developer
Mobile UI design and Developerjay li
 
Javascript autoload
Javascript autoloadJavascript autoload
Javascript autoloadjay li
 
Html5form
Html5formHtml5form
Html5formjay li
 
Js doc toolkit
Js doc toolkitJs doc toolkit
Js doc toolkitjay li
 
新业务新员工培训 Banner设计
新业务新员工培训   Banner设计新业务新员工培训   Banner设计
新业务新员工培训 Banner设计jay li
 
夏之 专题设计
夏之 专题设计夏之 专题设计
夏之 专题设计jay li
 

Plus de jay li (20)

犀牛书第六版
犀牛书第六版犀牛书第六版
犀牛书第六版
 
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
 
Jswebapps
JswebappsJswebapps
Jswebapps
 
潜力无限的编程语言Javascript
潜力无限的编程语言Javascript潜力无限的编程语言Javascript
潜力无限的编程语言Javascript
 
Responsive Web UI Design
Responsive Web UI DesignResponsive Web UI Design
Responsive Web UI Design
 
深入剖析浏览器
深入剖析浏览器深入剖析浏览器
深入剖析浏览器
 
HTML/CSS/JS基础
HTML/CSS/JS基础HTML/CSS/JS基础
HTML/CSS/JS基础
 
淘宝前端技术巡礼
淘宝前端技术巡礼淘宝前端技术巡礼
淘宝前端技术巡礼
 
F2e security
F2e securityF2e security
F2e security
 
中国元素在设计中的应用 -如瑟
中国元素在设计中的应用 -如瑟中国元素在设计中的应用 -如瑟
中国元素在设计中的应用 -如瑟
 
卫银霞 -统计数字会撒谎
卫银霞 -统计数字会撒谎卫银霞 -统计数字会撒谎
卫银霞 -统计数字会撒谎
 
编码大全 拔赤
编码大全 拔赤编码大全 拔赤
编码大全 拔赤
 
小控件、大学问
小控件、大学问小控件、大学问
小控件、大学问
 
Mobile UI design and Developer
Mobile UI design and DeveloperMobile UI design and Developer
Mobile UI design and Developer
 
Javascript autoload
Javascript autoloadJavascript autoload
Javascript autoload
 
Html5form
Html5formHtml5form
Html5form
 
Slide
SlideSlide
Slide
 
Js doc toolkit
Js doc toolkitJs doc toolkit
Js doc toolkit
 
新业务新员工培训 Banner设计
新业务新员工培训   Banner设计新业务新员工培训   Banner设计
新业务新员工培训 Banner设计
 
夏之 专题设计
夏之 专题设计夏之 专题设计
夏之 专题设计
 

电子书项目总结 前端