电子书项目总结 前端

电子书项目总结 (前端 ) 拔赤 bachi@taobao.com

前后端分工

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