Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

前端 JavaScript 相关的小Tips

6,599 views

Published on

面向后端开发的一次培训

Published in: Technology

前端 JavaScript 相关的小Tips

  1. 1. 前端 JavaScript 相关Tips<br />怿飞 / 圆心<br />
  2. 2. Who's this guy?<br />怿飞 / 圆心<br />in Taobao UED<br /><ul><li>Technology Evangelist
  3. 3. Front-End Engineer
  4. 4. Twitter: @blankzheng
  5. 5. Email: blankzheng@gmail.com
  6. 6. Blog: www.planabc.net</li></li></ul><li>Summary<br /><ul><li>HTML
  7. 7. JavaScript
  8. 8. JSON
  9. 9. Ajax</li></li></ul><li>一、HTML<br />
  10. 10. HTML<br /><ul><li>JS Hook 约定
  11. 11. JS 数据约定
  12. 12. 外联 JS
  13. 13. 内联 JS
  14. 14. JS 时间戳</li></li></ul><li>JS Hook 约定:<br /><ul><li>Hook 仅出现在 id 和 class 中, 命名规则为 J_UpperCamelCase</li></ul>例如:<br />旺旺点灯的HookJ_WangWang<br />
  15. 15. JS 数据源约定:<br /><ul><li>使用 HTML 元素的自定义属性:data-xxxx( HTML5 中新增的属性)</li></li></ul><li>案例:<br />
  16. 16. 外联 JS:<br /><ul><li>合并多个 JS 文件
  17. 17. 将 JS 文件移至页面的底部</li></ul><script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script><br />
  18. 18. 外联 JS:<br /><ul><li>影响的主要方面:
  19. 19. 阻塞其后面组件的(并行)下载
  20. 20. 阻塞其后面内容的呈现
  21. 21. 影响的主要原因:
  22. 22. 保持执行顺序
  23. 23. 对 document.write的依赖关系</li></li></ul><li>内联JS:<br /><ul><li>完全不使用
  24. 24. 如果的确要使用,移至页面的尾部</li></ul><script type="text/javascript"><br />_uacct = "UA-300049-1";<br />urchinTracker();<br /></script><br />
  25. 25. 内联JS:案例<br />
  26. 26. 内联JS :案例<br />观察到的现象:<br />脚本执行结束,第二张图才开始下载。<br />页面加载后,至少5秒页面无任何内容显示。<br />
  27. 27. 内联JS:<br /><ul><li>影响的主要方面:
  28. 28. 阻塞其后面组件的(并行)下载
  29. 29. 阻塞整个页面的逐步渲染
  30. 30. 影响的主要原因:
  31. 31. 保持执行顺序
  32. 32. 对 document.write的依赖关系</li></li></ul><li>JS时间戳:<br /><ul><li>在文件名之后添加“?t=yyyymmdd.js”,</li></ul>yyyymmdd为当天日期。例:<br />test.js?t=20100331.js<br />
  33. 33. 二、JavaScript<br />
  34. 34. JavaScript<br /><ul><li>框架选择
  35. 35. 模式约定
  36. 36. 性能优化(简单)
  37. 37. 文件压缩</li></li></ul><li>框架选择:<br /><ul><li>Taobao仅允许使用 YUI(2.8),SNS 中的 Jquery杜绝使用,后期将移除。</li></li></ul><li>全局变量是魔鬼!!!<br />
  38. 38. 模式约定:<br /><ul><li>匿名函数模式(变量声明一定要记得使用 var)</li></li></ul><li>模式约定:<br /><ul><li>模块模式(Module Pattern)</li></li></ul><li>性能优化:<br /><ul><li>任何字面量值、全局变量或者属性名被使用超过 2 次(包括2次),都应该用局部变量存储代替
  39. 39. 一个函数尽量只出现一次 var和 return 关键字</li></li></ul><li>性能优化:<br /><ul><li>使用数组和对象的字面量</li></ul>vara = new Array; --->vara = [];<br />var o = new Object; ---> var o = {};<br /><ul><li>使用局部变量(读写最快的标识符)</li></li></ul><li>性能优化:<br /><ul><li>减少DOM的操作(DOM最耗时)</li></li></ul><li>文件压缩:<br /><ul><li>工具:TBCompressor2.4.2</li></ul>http://code.google.com/p/ourtools/downloads/list<br />常见方式:<br />test.source.js ---> test.js (推荐)<br />test.js ---> test-min.js<br />
  40. 40. 三、JSON<br />
  41. 41. JSON<br /><ul><li>JSON 语法
  42. 42. JSON 转化</li></li></ul><li>JSON 语法:<br /><ul><li>JSON 的“名”规定为任何字符串
  43. 43. JSON 字符串必须使用双引号包围
  44. 44. JSON 数字整数的首位不允许为 0</li></li></ul><li>JSON 语法:<br />
  45. 45. JSON 转化:<br /><ul><li>使用 eval() 方法转化(最便捷):</li></ul>varmyData = eval('(' + JSON + ')');<br /><ul><li>使用 YUI 2.8 中的 YAHOO.lang.JSON.parse方法转化(最安全):</li></ul>varmyData = <br />YAHOO.lang.JSON.parse(JSON);<br />
  46. 46. 四、Ajax<br />
  47. 47. Ajax<br /><ul><li>编码问题</li></li></ul><li>编码问题:<br /><ul><li>无论是POST还是GET方式,均直接在URL后添加参数:url?_input_charset=utf-8</li></ul>(仅在淘宝的后台框架webx下有效!)<br />
  48. 48. Question?<br />

×