前端 JavaScript 相关的小Tips
Download as PPTX, PDF19 likes1,200 views
本文档提供了前端开发中 JavaScript 的一些最佳实践和技巧，包括 HTML、JavaScript、JSON 和 AJAX 的使用规范。强调了使用外联和内联 JS 文件的最佳策略，以及性能优化的建议和 JSON 语法的注意事项。文中还讨论了框架选择、模式约定以及文件压缩工具的使用。
前端 JavaScript 相关的小Tips
- 1. 前端 JavaScript 相关Tips怿飞 / 圆心
- 2. Who's this guy?怿飞 / 圆心in Taobao UEDTechnology Evangelist
- 4. Twitter: @blankzheng
- 5. Email: blankzheng@gmail.com
- 6. Blog: www.planabc.netSummaryHTML
- 7. JavaScript
- 8. JSON
- 9. Ajax一、HTML
- 10. HTMLJS Hook 约定
- 11. JS 数据约定
- 12. 外联 JS
- 13. 内联 JS
- 14. JS 时间戳JS Hook 约定：Hook 仅出现在 id 和 class 中, 命名规则为 J_UpperCamelCase例如：旺旺点灯的HookJ_WangWang
- 15. JS 数据源约定：使用 HTML 元素的自定义属性：data-xxxx（ HTML5 中新增的属性）案例：
- 16. 外联 JS：合并多个 JS 文件
- 17. 将 JS 文件移至页面的底部<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
- 18. 外联 JS：影响的主要方面：
- 19. 阻塞其后面组件的（并行）下载
- 20. 阻塞其后面内容的呈现
- 21. 影响的主要原因：
- 22. 保持执行顺序
- 24. 如果的确要使用，移至页面的尾部<script type="text/javascript">_uacct = "UA-300049-1";urchinTracker();</script>
- 25. 内联JS：案例
- 27. 内联JS：影响的主要方面：
- 28. 阻塞其后面组件的（并行）下载
- 29. 阻塞整个页面的逐步渲染
- 30. 影响的主要原因：
- 31. 保持执行顺序
- 33. 二、JavaScript
- 34. JavaScript框架选择
- 35. 模式约定
- 36. 性能优化（简单）
- 37. 文件压缩框架选择：Taobao仅允许使用 YUI（2.8），SNS 中的 Jquery杜绝使用，后期将移除。全局变量是魔鬼！！！
- 38. 模式约定：匿名函数模式（变量声明一定要记得使用 var）模式约定：模块模式（Module Pattern）性能优化：任何字面量值、全局变量或者属性名被使用超过 2 次（包括2次），都应该用局部变量存储代替
- 39. 一个函数尽量只出现一次 var和 return 关键字性能优化：使用数组和对象的字面量vara = new Array; --->vara = [];var o = new Object; ---> var o = {};使用局部变量（读写最快的标识符）性能优化：减少DOM的操作（DOM最耗时）文件压缩：工具：TBCompressor2.4.2http://code.google.com/p/ourtools/downloads/list常见方式：test.source.js ---> test.js （推荐）test.js ---> test-min.js
- 40. 三、JSON
- 41. JSONJSON 语法
- 42. JSON 转化JSON 语法：JSON 的“名”规定为任何字符串
- 44. JSON 数字整数的首位不允许为 0JSON 语法：
- 45. JSON 转化：使用 eval() 方法转化（最便捷）：varmyData = eval('(' + JSON + ')');使用 YUI 2.8 中的 YAHOO.lang.JSON.parse方法转化（最安全）：varmyData = YAHOO.lang.JSON.parse（JSON）;
- 46. 四、Ajax
- 48. Question？