给聚划算后端开发的前端培训<br />etai<br />
Topics<br /> 前端基础知识<br /> 开发、调试工具<br /> 前端优化<br /> 聚划算前端技术介绍<br /> 前后端协同经验<br /> 新技术展望<br />
前端基础知识<br />
浏览器是怎样工作的?<br />How browsers work<br />
解剖一个web页面<br />内容<br />结构<br />表现<br />行为<br />
HTML: Hypertext Markup Language<br />
HTML: Hypertext Markup Language<br /><!DOCTYPE html><br /><html><br /><head><br />    <meta charset=“gbk” /><br />    <tit...
HTML语义化<br /> 用合适的标签,表示合适的内容<br /><ul><li> 可用性
 设备友好
搜索引擎友好
 可维护性</li></li></ul><li>合适的标签<br />结构性容器:<div> <span><br />标题、段落:<h1>~<h6> <p><br />列表:   <ul> <ol> <li> <dl> <dt> <dd><br...
合适的标签<br />表单:<form><input><select><button><label><br />内容:<a><img><strong><em><del><br />废弃/不推荐:<i><s><b><br />
HTML5标签:<br />
资源<br />http://www.w3school.com.cn/html/index.asp<br />http://sofish.de/1688<br />
CSS: Cascading Style Sheet<br />
CSS: Cascading Style Sheet<br />负责展现<br />颜色、字体、排版等<br />
语法<br />#layout .logo{<br />height:76px;<br />    width:990px;<br />    margin:0 auto;<br />}<br />
盒模型<br />
选择器/优先级<br /> !important<br /> Inline style<br /> #Id<br /> .Class<br /> Tag<br />*<br />
display<br />display:block/inline/inline-block;none<br />默认block元素:div、p、h1~h6…<br />默认inline元素:span、a、img…<br />
浮动<br />float:none/left/right;<br />浮动元素会脱离文档位置,无法撑开外层高度<br />IE6的盒模型bug<br />
定位<br />position:static/relative/absolute/fixed<br />z-index<br />
兼容性/hack<br />….<br />
CSS3<br />Border<br />Backgrounds<br />Transform<br />Transition<br />…<br />
资源<br />CSS禅意花园<br />http://www.w3school.com.cn/css/<br />
JavaScript<br />
JavaScript<br />脚本语言<br />弱类型<br />Object-based, not Object-oriented<br />
构成<br />ECMAScript<br />DOM<br />BOM<br />
函数<br />function sayHi (){<br />    alert(‘Hello!’);<br />}<br />varsyaHi = function(){<br />alert(‘Hello!’);<br />}<br />
函数调用<br />sayHi();<br />var date = new Date();<br />alert.apply(null, ['Hello!'])<br />
作用域<br />全局变量<br />块级作用域<br />模块<br />
闭包<br />封闭了外部函数作用域中变量的内部函数,它具有自由变量以及绑定这些变量的环境。<br />闭包封闭的外部变量就是自由变量,而由于该自由变量存在,由外部函数返回后,其占用的内存不会释放。<br />http://www.cn-cuc...
闭包<br />function main(links) {<br />    for (var i=0; i<links.length; i++) {<br />        links[i].onclick = function(i) {...
prototype<br />function Boy(name){<br />this.name = name;<br />}<br />Boy.prototype.type = ‘people’;<br />varetai = new Bo...
资源<br />http://www.w3school.com.cn/js/index.asp<br />ECMA-262 /cn<br />理解JavaScript闭包<br />JavaScript继承机制<br />《JavaScript...
DOM: Document Object Model<br />
DOM<br />接口:允许程序访问或修改页面的内容、结构和样式<br />把 HTML 文档呈现为带有元素、属性和文本的节点树<br />对平台、语言中立<br />往往是JS操作的性能瓶颈<br />http://www.w3school....
DOM<br />
开发、调试工具<br />
浏览器<br />
调试工具<br />HTTP抓包/代理:<br />Windows: Fiddler / HttpWatch<br />MacOS: Charles<br />
调试工具<br />IE浏览器模拟:<br />IETester<br />IECollection<br />
调试工具<br />Firefox插件:<br />Firebug<br />Web Developer<br />YSlow<br />DNS Flusher<br />autoproxy<br />
调试工具<br />webkit:<br />内置developer tools<br />IE8、9:<br />内置developer tools<br />IE6、7:<br />Companion.JS<br />Microsoft S...
前端优化<br />
目标:快<br /> 加载速度快<br /> 渲染速度快<br /> 页面响应快<br />
减少HTTP请求数<br />CSS、JS文件合并<br />背景图片合并(CSS Sprites)<br />
减少加载数据量<br />CSS、JS代码压缩<br />代码按需加载<br />图片压缩优化<br />图片懒加载<br />文件缓存(Expires)<br />Cookies(CDN)<br />
减少DNS查询<br />减少域名数<br />
快速呈现<br />CSS文放在页面顶部<br />减少阻塞<br />JS文件放在尾部<br />或使用无阻塞加载方式<br />
优化代码<br /> 优化CSS规则<br /> 避免使用CSS表达式<br /> 优化JavaScript代码<br />
资源<br />http://code.google.com/intl/zh-CN/speed/<br />http://developer.yahoo.com/yslow/help/<br />《高性能网站建设进阶指南》<br />
聚划算前端<br />
框架<br /> kissy<br />Ju<br />文件/部署<br />
kissy<br />http://docs.kissyui.com/<br />
var el = KISSY.Dom.get(‘#id’);<br />el.css(‘color’,’#000’);<br />KISSY.Event.on(el, ‘click’, function(){<br />    alert(‘c...
Ju-v3.js<br />
ju-v3.js<br />http://wiki.ued.taobao.net/doku.php?id=team:sns:juhuasuan<br />
ju-v3.css<br />
ju-v3.css<br />
前端文件部署<br /> SVN<br />RMS<br />TMS/PHP<br />download<br />
前后端协同<br />
数据传递<br /> Ajax<br />JSONP<br />html5自定义属性<br />
数据传递:Ajax<br /> GET/POST/FORM<br />接口响应:string/json/xml<br /><ul><li> 没有换行、空行;
 {“key0”:{“key1”:”value1”}}
 统一捕捉错误 {“type”:”ERROR”,”msg”:”文案”}
 避免重定向</li></li></ul><li>数据传递:JSONP<br />解决跨域问题(同源策略)<br />脚本注入行为<br />形式:<br />请求url: api.html?callback=fn&param<br />响应:...
数据传递:JSONP<br />安全问题:<br />敏感数据安全;<br />    IE的UTF-7 bug导致的xss;<br />
数据传递:自定义属性<br /><div class="ju-spltimerJ_juItemTimer“ data-targettime="1313107199000" data-servertime="1313062842738"><br ...
标签规范<br />层次对应<br />   <div>         <strong></strong>    </div><br />标签、属性小写<br />闭合<br />    <input  value=“” /> <br /> ...
id/class/name命名<br /> id命名唯一<br />JS Hook: <br />   <div class=“J_AHook”>…</div><br />form<br />   <input name=“”id=“”  />...
临界情况<br />截取:<br />模板输出文字:后台截取json渲染文字:js截取<br />图片:超出部分css隐藏<br />
Upcoming SlideShare
Loading in...5
×

给聚划算后端开发的前端培训

2,059

Published on

Published in: Technology, Education
1 Comment
13 Likes
Statistics
Notes
  • cool
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
2,059
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
65
Comments
1
Likes
13
Embeds 0
No embeds

No notes for slide

给聚划算后端开发的前端培训

  1. 1. 给聚划算后端开发的前端培训<br />etai<br />
  2. 2. Topics<br /> 前端基础知识<br /> 开发、调试工具<br /> 前端优化<br /> 聚划算前端技术介绍<br /> 前后端协同经验<br /> 新技术展望<br />
  3. 3. 前端基础知识<br />
  4. 4. 浏览器是怎样工作的?<br />How browsers work<br />
  5. 5. 解剖一个web页面<br />内容<br />结构<br />表现<br />行为<br />
  6. 6. HTML: Hypertext Markup Language<br />
  7. 7. HTML: Hypertext Markup Language<br /><!DOCTYPE html><br /><html><br /><head><br /> <meta charset=“gbk” /><br /> <title>标题</title><br /></head><br /><body><br /> <h1>Hello, world!</h1><br /> <p>The quick brown fox jumps over the lazy dog</p><br /></body><br /></html><br />
  8. 8. HTML语义化<br /> 用合适的标签,表示合适的内容<br /><ul><li> 可用性
  9. 9. 设备友好
  10. 10. 搜索引擎友好
  11. 11. 可维护性</li></li></ul><li>合适的标签<br />结构性容器:<div> <span><br />标题、段落:<h1>~<h6> <p><br />列表: <ul> <ol> <li> <dl> <dt> <dd><br />表格:<table><thead><tbody><tr><th><td><br />
  12. 12. 合适的标签<br />表单:<form><input><select><button><label><br />内容:<a><img><strong><em><del><br />废弃/不推荐:<i><s><b><br />
  13. 13. HTML5标签:<br />
  14. 14. 资源<br />http://www.w3school.com.cn/html/index.asp<br />http://sofish.de/1688<br />
  15. 15. CSS: Cascading Style Sheet<br />
  16. 16. CSS: Cascading Style Sheet<br />负责展现<br />颜色、字体、排版等<br />
  17. 17. 语法<br />#layout .logo{<br />height:76px;<br /> width:990px;<br /> margin:0 auto;<br />}<br />
  18. 18. 盒模型<br />
  19. 19. 选择器/优先级<br /> !important<br /> Inline style<br /> #Id<br /> .Class<br /> Tag<br />*<br />
  20. 20. display<br />display:block/inline/inline-block;none<br />默认block元素:div、p、h1~h6…<br />默认inline元素:span、a、img…<br />
  21. 21. 浮动<br />float:none/left/right;<br />浮动元素会脱离文档位置,无法撑开外层高度<br />IE6的盒模型bug<br />
  22. 22. 定位<br />position:static/relative/absolute/fixed<br />z-index<br />
  23. 23. 兼容性/hack<br />….<br />
  24. 24. CSS3<br />Border<br />Backgrounds<br />Transform<br />Transition<br />…<br />
  25. 25. 资源<br />CSS禅意花园<br />http://www.w3school.com.cn/css/<br />
  26. 26. JavaScript<br />
  27. 27. JavaScript<br />脚本语言<br />弱类型<br />Object-based, not Object-oriented<br />
  28. 28. 构成<br />ECMAScript<br />DOM<br />BOM<br />
  29. 29. 函数<br />function sayHi (){<br /> alert(‘Hello!’);<br />}<br />varsyaHi = function(){<br />alert(‘Hello!’);<br />}<br />
  30. 30. 函数调用<br />sayHi();<br />var date = new Date();<br />alert.apply(null, ['Hello!'])<br />
  31. 31. 作用域<br />全局变量<br />块级作用域<br />模块<br />
  32. 32. 闭包<br />封闭了外部函数作用域中变量的内部函数,它具有自由变量以及绑定这些变量的环境。<br />闭包封闭的外部变量就是自由变量,而由于该自由变量存在,由外部函数返回后,其占用的内存不会释放。<br />http://www.cn-cuckoo.com/2007/08/01/understand-javascript-closures-72.html<br />
  33. 33. 闭包<br />function main(links) {<br /> for (var i=0; i<links.length; i++) {<br /> links[i].onclick = function(i) {<br /> alert(i);<br /> }<br />};<br />main(document.getElementsByTagName("a"));<br />function main(links) {<br />for (var i=0; i<links.length; i++) {<br />links[i].onclick = (function(i) {<br />return function() {<br />alert(i);<br /> }<br />})(i);<br /> }<br />};<br />main(document.getElementsByTagName("a"));<br />
  34. 34. prototype<br />function Boy(name){<br />this.name = name;<br />}<br />Boy.prototype.type = ‘people’;<br />varetai = new Boy(‘etai’);<br />http://www.ruanyifeng.com/blog/2011/06/designing_ideas_of_inheritance_mechanism_in_javascript.html<br />
  35. 35. 资源<br />http://www.w3school.com.cn/js/index.asp<br />ECMA-262 /cn<br />理解JavaScript闭包<br />JavaScript继承机制<br />《JavaScript高级程序设计v2》<br />《JavaScript语言精粹》<br />
  36. 36. DOM: Document Object Model<br />
  37. 37. DOM<br />接口:允许程序访问或修改页面的内容、结构和样式<br />把 HTML 文档呈现为带有元素、属性和文本的节点树<br />对平台、语言中立<br />往往是JS操作的性能瓶颈<br />http://www.w3school.com.cn/htmldom/index.asp<br />
  38. 38. DOM<br />
  39. 39. 开发、调试工具<br />
  40. 40. 浏览器<br />
  41. 41. 调试工具<br />HTTP抓包/代理:<br />Windows: Fiddler / HttpWatch<br />MacOS: Charles<br />
  42. 42. 调试工具<br />IE浏览器模拟:<br />IETester<br />IECollection<br />
  43. 43. 调试工具<br />Firefox插件:<br />Firebug<br />Web Developer<br />YSlow<br />DNS Flusher<br />autoproxy<br />
  44. 44. 调试工具<br />webkit:<br />内置developer tools<br />IE8、9:<br />内置developer tools<br />IE6、7:<br />Companion.JS<br />Microsoft Script Debugger<br />
  45. 45. 前端优化<br />
  46. 46. 目标:快<br /> 加载速度快<br /> 渲染速度快<br /> 页面响应快<br />
  47. 47. 减少HTTP请求数<br />CSS、JS文件合并<br />背景图片合并(CSS Sprites)<br />
  48. 48. 减少加载数据量<br />CSS、JS代码压缩<br />代码按需加载<br />图片压缩优化<br />图片懒加载<br />文件缓存(Expires)<br />Cookies(CDN)<br />
  49. 49. 减少DNS查询<br />减少域名数<br />
  50. 50. 快速呈现<br />CSS文放在页面顶部<br />减少阻塞<br />JS文件放在尾部<br />或使用无阻塞加载方式<br />
  51. 51. 优化代码<br /> 优化CSS规则<br /> 避免使用CSS表达式<br /> 优化JavaScript代码<br />
  52. 52. 资源<br />http://code.google.com/intl/zh-CN/speed/<br />http://developer.yahoo.com/yslow/help/<br />《高性能网站建设进阶指南》<br />
  53. 53. 聚划算前端<br />
  54. 54. 框架<br /> kissy<br />Ju<br />文件/部署<br />
  55. 55. kissy<br />http://docs.kissyui.com/<br />
  56. 56. var el = KISSY.Dom.get(‘#id’);<br />el.css(‘color’,’#000’);<br />KISSY.Event.on(el, ‘click’, function(){<br /> alert(‘clicked!’)<br />})<br />
  57. 57. Ju-v3.js<br />
  58. 58. ju-v3.js<br />http://wiki.ued.taobao.net/doku.php?id=team:sns:juhuasuan<br />
  59. 59. ju-v3.css<br />
  60. 60. ju-v3.css<br />
  61. 61. 前端文件部署<br /> SVN<br />RMS<br />TMS/PHP<br />download<br />
  62. 62. 前后端协同<br />
  63. 63. 数据传递<br /> Ajax<br />JSONP<br />html5自定义属性<br />
  64. 64. 数据传递:Ajax<br /> GET/POST/FORM<br />接口响应:string/json/xml<br /><ul><li> 没有换行、空行;
  65. 65. {“key0”:{“key1”:”value1”}}
  66. 66. 统一捕捉错误 {“type”:”ERROR”,”msg”:”文案”}
  67. 67. 避免重定向</li></li></ul><li>数据传递:JSONP<br />解决跨域问题(同源策略)<br />脚本注入行为<br />形式:<br />请求url: api.html?callback=fn&param<br />响应: fn({“data”:[0, 1, 2]});<br />
  68. 68. 数据传递:JSONP<br />安全问题:<br />敏感数据安全;<br /> IE的UTF-7 bug导致的xss;<br />
  69. 69. 数据传递:自定义属性<br /><div class="ju-spltimerJ_juItemTimer“ data-targettime="1313107199000" data-servertime="1313062842738"><br />.getAttribute(‘data-targettime’)<br />html5:querySelector<br />
  70. 70. 标签规范<br />层次对应<br /> <div> <strong></strong> </div><br />标签、属性小写<br />闭合<br /> <input value=“” /> <br /> <imgsrc=“” /><br />细致!<br />
  71. 71. id/class/name命名<br /> id命名唯一<br />JS Hook: <br /> <div class=“J_AHook”>…</div><br />form<br /> <input name=“”id=“” /><br />
  72. 72. 临界情况<br />截取:<br />模板输出文字:后台截取json渲染文字:js截取<br />图片:超出部分css隐藏<br />
  73. 73. 新技术展望<br />
  74. 74. HTML5<br />Storage/ Web SQL Database<br />websocket<br />canvas<br />form<br />webworkers<br />
  75. 75. CSS3<br /> more effects<br /> less images<br />less jsanims<br />
  76. 76. Thanks & Q/A<br />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×