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