![函数调用sayHi();var date = new Date();alert.apply(null, ['Hello!'])](https://image.slidesharecdn.com/frontend-110816020538-phpapp01/85/-30-320.jpg)
![闭包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"));](https://image.slidesharecdn.com/frontend-110816020538-phpapp01/85/-33-320.jpg)
![避免重定向数据传递：JSONP解决跨域问题(同源策略)脚本注入行为形式：请求url: api.html?callback=fn¶m响应： fn({“data”:[0, 1, 2]});](https://image.slidesharecdn.com/frontend-110816020538-phpapp01/85/-67-320.jpg)
给聚划算后端开发的前端培训
- 2. Topics 前端基础知识 开发、调试工具 前端优化 聚划算前端技术介绍 前后端协同经验 新技术展望
- 3. 前端基础知识
- 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. 搜索引擎友好
- 11. 可维护性合适的标签结构性容器：<div> <span>标题、段落：<h1>~<h6> <p>列表： <ul> <ol> <li> <dl> <dt> <dd>表格:<table><thead><tbody><tr><th><td>
- 13. 贬罢惭尝5标签:
- 15. CSS: Cascading Style Sheet
- 16. CSS: Cascading Style 厂丑别别迟负责展现颜色、字体、排版等
- 17. 语法#layout .logo{height:76px; width:990px; margin:0 auto;}
- 18. 盒模型
- 19. 选择器/优先级 !important Inline style #Id .Class Tag*
- 23. 兼容性/丑补肠办….
- 26. JavaScript
- 29. 函数function sayHi (){ alert(‘Hello!’);}varsyaHi = function(){alert(‘Hello!’);}
- 30. 函数调用sayHi();var date = new Date();alert.apply(null, ['Hello!'])
- 31. 作用域全局变量块级作用域模块
- 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. prototypefunction 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
- 36. DOM: Document Object Model
- 38. DOM
- 39. 开发、调试工具
- 40. 浏览器
- 41. 调试工具HTTP抓包/代理：Windows： Fiddler / HttpWatchMacOS： Charles
- 44. 调试工具webkit：内置developer toolsIE8、9：内置developer toolsIE6、7：Companion.JSMicrosoft Script Debugger
- 45. 前端优化
- 46. 目标：快 加载速度快 渲染速度快 页面响应快
- 49. 减少顿狈厂查询减少域名数
- 51. 优化代码 优化CSS规则 避免使用CSS表达式 优化闯补惫补厂肠谤颈辫迟代码
- 53. 聚划算前端
- 54. 框架 kissyJu文件/部署
- 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
- 62. 前后端协同
- 67. 避免重定向数据传递：JSONP解决跨域问题(同源策略)脚本注入行为形式：请求url: api.html?callback=fn¶m响应： fn({“data”:[0, 1, 2]});
- 68. 数据传递：闯厂翱狈笔安全问题：敏感数据安全； IE的UTF-7 bug导致的xss；
- 69. 数据传递：自定义属性<div class="ju-spltimerJ_juItemTimer“ data-targettime="1313107199000" 诲补迟补-蝉别谤惫别谤迟颈尘别=&辩耻辞迟;1313062842738&辩耻辞迟;&驳迟;.驳别迟础迟迟谤颈产耻迟别(‘诲补迟补-迟补谤驳别迟迟颈尘别’)丑迟尘濒5：辩耻别谤测厂别濒别肠迟辞谤
- 70. 标签规范层次对应 <div> <strong></strong> </div>标签、属性小写闭合 <input value=/slideshow/ss-8862190/8862190/“” /> <br /> <imgsrc=/slideshow/ss-8862190/8862190/“” />细致！
- 71. id/class/name命名 id命名唯一JS Hook: <div class=“J_AHook”>…</div>form <input name=/slideshow/ss-8862190/8862190/“”id=/slideshow/ss-8862190/8862190/“” />
- 73. 新技术展望
- 74. HTML5Storage/ Web SQL Databasewebsocketcanvasformwebworkers
- 75. CSS3 more effects less imagesless jsanims
- 76. Thanks & Q/A