Your SlideShare is downloading. ×
0
前端 JavaScript 相关Tips<br />怿飞 / 圆心<br />
Who's this guy?<br />怿飞 / 圆心<br />in Taobao UED<br /><ul><li>Technology Evangelist
Front-End Engineer
Twitter:   @blankzheng
Email:     blankzheng@gmail.com
Blog:       www.planabc.net</li></li></ul><li>Summary<br /><ul><li>HTML
JavaScript
JSON
Ajax</li></li></ul><li>一、HTML<br />
HTML<br /><ul><li>JS Hook 约定
JS 数据约定
外联 JS
内联 JS
JS 时间戳</li></li></ul><li>JS Hook 约定:<br /><ul><li>Hook 仅出现在 id 和 class 中, 命名规则为 J_UpperCamelCase</li></ul>例如:<br />旺旺点灯的Ho...
JS 数据源约定:<br /><ul><li>使用 HTML 元素的自定义属性:data-xxxx( HTML5 中新增的属性)</li></li></ul><li>案例:<br />
外联 JS:<br /><ul><li>合并多个 JS 文件
将 JS 文件移至页面的底部</li></ul><script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script><br />
外联 JS:<br /><ul><li>影响的主要方面:
阻塞其后面组件的(并行)下载
阻塞其后面内容的呈现
影响的主要原因:
保持执行顺序
对 document.write的依赖关系</li></li></ul><li>内联JS:<br /><ul><li>完全不使用
如果的确要使用,移至页面的尾部</li></ul><script type="text/javascript"><br />_uacct = "UA-300049-1";<br />urchinTracker();<br /></script>...
内联JS:案例<br />
内联JS :案例<br />观察到的现象:<br />脚本执行结束,第二张图才开始下载。<br />页面加载后,至少5秒页面无任何内容显示。<br />
内联JS:<br /><ul><li>影响的主要方面:
阻塞其后面组件的(并行)下载
阻塞整个页面的逐步渲染
影响的主要原因:
保持执行顺序
对 document.write的依赖关系</li></li></ul><li>JS时间戳:<br /><ul><li>在文件名之后添加“?t=yyyymmdd.js”,</li></ul>yyyymmdd为当天日期。例:<br />test....
二、JavaScript<br />
JavaScript<br /><ul><li>框架选择
模式约定
Upcoming SlideShare
Loading in...5
×

Jstips 100401005855 Phpapp01

842

Published on

by 圆心

0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
842
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
17
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Transcript of "Jstips 100401005855 Phpapp01"

  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 />
  1. A particular slide catching your eye?

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

×