电子书项目总结 前端
TRANSCRIPT
前后端分工
Yahoo技术栈
前端和后端
前端工程师的知识结构
分工
• Vd 视觉设计• Id 交互设计• Wd 前端工程师
• Be 后端工程师• QA 测试
前端职责
• 视觉呈现 设计• 前端交互 开发• 前端逻辑 ajax
Ebook中的前端规范
脆弱的页面代码
• Css,js,php,html混杂在一起• Html的被动语义，语法简单• Js命名空间
页面代码可读性差
增加调试难度（调试 ie）
可维护性差（增加功能）
更别提重用糟糕的后果
页面代码易读
方便调试
易于维护（增加功能）
重用
规范的页面代码
前端通用规范
• File-encode： gbk• doctype： html4 strict• Css： css2• Js： YUI
前端质量
Firefox2～ 3 IE6~ 8
chrome opera safari
Cubee—对 YUI3的封装
YUI原生的松耦合
项目需要的紧耦合
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的松耦合
模块间的代码无关
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的紧耦合
代码之间有相互调用和依赖关系
YUI和 Cubee的区别
基于 YUI3的松耦合
基于 Cubee的紧耦合
模块间关系松散自定义 js的重复引用
项目自定义 js库更严格的模块依赖重复引用的去重
矛盾的双方
更安全的开发
更简洁高效的代码
ebook的取舍
• 更安全的开发
• 更简洁高效的代码
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的 swfstoreExample: 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
• Firebug• Yslow• httpheader
基于 IE
• Internet Explore Developer Toolbar• Compaion.js
firebug的使用
• firbug可以调试 html， css， js， html和css
• 可以直接修改代码
经验教训
套页面
• 标签闭合• 结束标签被丢掉• 完整的容器• 简单的事做认真！
HTML学习： http://www.w3school.com.cn/html/
文件编码
• 编码和字符集？ gb2312,gbk,gb18030,utf-8• vim中的配置
• 关注当前文件的编码set fileencodings=ucs-bom,utf-8,GB18030,gbk
set fileencoding=gb18030
文件编码 续
• 中文字符集大小• unicode>=gb18030>gbk>gb2312
wiki
ued团队http://twiki.corp.taobao.com/twiki/bin/view/Taobao_DP/DPFETeam
Q&A