SlideShare una empresa de Scribd logo
1 de 45
淘宝前端开发关键词
  拔赤 bachi@taobao.com
http://www.uedagazine.com
        2010-06-03
•   职位
•   流程
•   工具
•   技术
• 职位
• 流程
• 工具
• 技术
WD
Web Developer
前端开发工程师
VD
Visual Designer
   视觉设计师
ID
Interaction Designer
     交互设计师
PD
Product Designer
    产品经理
各自角色
PM
Project Manager
    项目经理
QA
Quality Assurance
 质量保证/测试
• 职位
• 流程
• 工具
• 技术
PRD
Product Requirement Document
           需求文档
Mock-up

设计模型/原型
Assets

资源文件(css/js/flash/img)
TMS




淘宝页面发布系统
TPS




淘宝页面发布系统
• 职位
• 流程
• 工具
• 技术
浏览器




       IE 6-8,FF3+
Opera10+,Chrome,Safari4+
Firebug




Firefox调试
YSlow




Firefox性能统计
Pagespeed




Firefox性能统计
Fiddler




  抓包
IE Developer ToolBar




       IE调试器
IE Tester




 IETester
WinScp




图形界面链接SSH
LiveHttpHeader




  图形界面链接SSH
JSLint




JS语法检查
Minify




http://code.google.com/p/minify
JSMin




http://www.crockford.com/javascript/jsmin.html
• 职位
• 流程
• 工具
• 技术
CDN


Content Delivery Network
Combo

服务器端合并文件
<script src="http://cn.yimg.com/i/yui/3.0.0/build/yui/yui‐min.js"></script>
<script src=http://cn.yimg.com/i/yui/3.0.0/build/oop/oop‐min.js></script>
<script src="http://cn.yimg.com/i/yui/3.0.0/build/dom/dom‐min.js"></script>




   <script src="http://cn.yimg.com/combo?i/yui/3.0.0/build/yui/yui‐
   min.js&i/yui/3.0.0/build/oop/oop‐min.js&i/yui/3.0.0/build/dom/dom‐
   min.js"></script>
ASCII GB~ Unicode UTF-8

        文件编码
URLEncode

  URL编码
URL编码
• “淘宝”的URL编码
 – Utf-8 “%E6%B7%98%E5%AE%9D”
 – GB~ "%CC%D4%B1%A6"
XSS

Cross Site Script
  跨站攻击脚本
XSS
      恶意html/js脚本

             程序漏洞


       Hack.run()
       Web page
CSRF

Cross Site Request Forgery
       跨站伪造请求
XDR

Cross Domain Request
     跨域请求数据
JSONP

JSON with Padding
  跨域请求JSON
DPL

Design Pattern Library
     设计模式库
Tbra Kissy Cubee…

   淘宝前端开发框架
Q&A

Más contenido relacionado

Similar a 淘宝前端开发关键词

Html5和css3入门
Html5和css3入门Html5和css3入门
Html5和css3入门Xiujun Ma
 
美团前端架构简介
美团前端架构简介美团前端架构简介
美团前端架构简介pan weizeng
 
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践Du Yamin
 
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践jay li
 
Android 4-app
Android 4-appAndroid 4-app
Android 4-applydiafly
 
HTML5概览
HTML5概览HTML5概览
HTML5概览Adam Lu
 
July.2011.w3ctech
July.2011.w3ctechJuly.2011.w3ctech
July.2011.w3ctechKai Cui
 
淘宝移动端Web开发实践
淘宝移动端Web开发实践淘宝移动端Web开发实践
淘宝移动端Web开发实践完颜 小卓
 
编辑器设计Kissy editor
编辑器设计Kissy editor编辑器设计Kissy editor
编辑器设计Kissy editortaobao.com
 
新浪云计算公开课第一期:Let’s run @ sae(丛磊)
新浪云计算公开课第一期:Let’s run @ sae(丛磊)新浪云计算公开课第一期:Let’s run @ sae(丛磊)
新浪云计算公开课第一期:Let’s run @ sae(丛磊)锐 张
 
從雛形到設計-了解您的使用者在想什麼
從雛形到設計-了解您的使用者在想什麼從雛形到設計-了解您的使用者在想什麼
從雛形到設計-了解您的使用者在想什麼Souyi Yang
 
2012 淘宝技术沙龙 PPT
2012 淘宝技术沙龙 PPT2012 淘宝技术沙龙 PPT
2012 淘宝技术沙龙 PPTlhqunar
 
2012 淘宝技术沙龙 PPT
2012 淘宝技术沙龙 PPT2012 淘宝技术沙龙 PPT
2012 淘宝技术沙龙 PPTlhqunar
 
前端性能优化和自动化
前端性能优化和自动化前端性能优化和自动化
前端性能优化和自动化kaven yan
 
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京Joseph Chiang
 
基于Seajs的项目构建
基于Seajs的项目构建基于Seajs的项目构建
基于Seajs的项目构建Zhang Xiaoxue
 
编辑器设计2
编辑器设计2编辑器设计2
编辑器设计2yiming he
 
Top100summit前端的云时代支付宝前端平台架构 王保平
Top100summit前端的云时代支付宝前端平台架构  王保平Top100summit前端的云时代支付宝前端平台架构  王保平
Top100summit前端的云时代支付宝前端平台架构 王保平drewz lin
 
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練1(20160222)
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練1(20160222)2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練1(20160222)
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練1(20160222)Duran Hsieh
 

Similar a 淘宝前端开发关键词 (20)

Html5和css3入门
Html5和css3入门Html5和css3入门
Html5和css3入门
 
美团前端架构简介
美团前端架构简介美团前端架构简介
美团前端架构简介
 
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
 
淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践淘宝移动端Web开发最佳实践
淘宝移动端Web开发最佳实践
 
Android 4-app
Android 4-appAndroid 4-app
Android 4-app
 
HTML5概览
HTML5概览HTML5概览
HTML5概览
 
July.2011.w3ctech
July.2011.w3ctechJuly.2011.w3ctech
July.2011.w3ctech
 
Berserk js
Berserk jsBerserk js
Berserk js
 
淘宝移动端Web开发实践
淘宝移动端Web开发实践淘宝移动端Web开发实践
淘宝移动端Web开发实践
 
编辑器设计Kissy editor
编辑器设计Kissy editor编辑器设计Kissy editor
编辑器设计Kissy editor
 
新浪云计算公开课第一期:Let’s run @ sae(丛磊)
新浪云计算公开课第一期:Let’s run @ sae(丛磊)新浪云计算公开课第一期:Let’s run @ sae(丛磊)
新浪云计算公开课第一期:Let’s run @ sae(丛磊)
 
從雛形到設計-了解您的使用者在想什麼
從雛形到設計-了解您的使用者在想什麼從雛形到設計-了解您的使用者在想什麼
從雛形到設計-了解您的使用者在想什麼
 
2012 淘宝技术沙龙 PPT
2012 淘宝技术沙龙 PPT2012 淘宝技术沙龙 PPT
2012 淘宝技术沙龙 PPT
 
2012 淘宝技术沙龙 PPT
2012 淘宝技术沙龙 PPT2012 淘宝技术沙龙 PPT
2012 淘宝技术沙龙 PPT
 
前端性能优化和自动化
前端性能优化和自动化前端性能优化和自动化
前端性能优化和自动化
 
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京
 
基于Seajs的项目构建
基于Seajs的项目构建基于Seajs的项目构建
基于Seajs的项目构建
 
编辑器设计2
编辑器设计2编辑器设计2
编辑器设计2
 
Top100summit前端的云时代支付宝前端平台架构 王保平
Top100summit前端的云时代支付宝前端平台架构  王保平Top100summit前端的云时代支付宝前端平台架构  王保平
Top100summit前端的云时代支付宝前端平台架构 王保平
 
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練1(20160222)
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練1(20160222)2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練1(20160222)
2016年逢甲大學資訊系:ASP.NET MVC 4 教育訓練1(20160222)
 

Más de jay li

犀牛书第六版
犀牛书第六版犀牛书第六版
犀牛书第六版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
 
赤骥 用户研究入门
赤骥 用户研究入门赤骥 用户研究入门
赤骥 用户研究入门jay li
 

Más de jay li (20)

犀牛书第六版
犀牛书第六版犀牛书第六版
犀牛书第六版
 
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设计
 
夏之 专题设计
夏之 专题设计夏之 专题设计
夏之 专题设计
 
赤骥 用户研究入门
赤骥 用户研究入门赤骥 用户研究入门
赤骥 用户研究入门
 

淘宝前端开发关键词