Jstips 100401005855 Phpapp01
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Jstips 100401005855 Phpapp01

  • 996 views
Uploaded on

by 圆心

by 圆心

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
996
On Slideshare
996
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
16
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 前端 JavaScript 相关Tips
    怿飞 / 圆心
  • 2. Who's this guy?
    怿飞 / 圆心
    in Taobao UED
    • Technology Evangelist
    • 3. Front-End Engineer
    • 4. Twitter: @blankzheng
    • 5. Email: blankzheng@gmail.com
    • 6. Blog: www.planabc.net
  • Summary
  • 一、HTML
  • 10. HTML
  • JS Hook 约定:
    • Hook 仅出现在 id 和 class 中, 命名规则为 J_UpperCamelCase
    例如:
    旺旺点灯的HookJ_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. 保持执行顺序
    • 23. 对 document.write的依赖关系
  • 内联JS:
    • 完全不使用
    • 24. 如果的确要使用,移至页面的尾部
    <script type="text/javascript">
    _uacct = "UA-300049-1";
    urchinTracker();
    </script>
  • 25. 内联JS:案例
  • 26. 内联JS :案例
    观察到的现象:
    脚本执行结束,第二张图才开始下载。
    页面加载后,至少5秒页面无任何内容显示。
  • 27. 内联JS:
    • 影响的主要方面:
    • 28. 阻塞其后面组件的(并行)下载
    • 29. 阻塞整个页面的逐步渲染
    • 30. 影响的主要原因:
    • 31. 保持执行顺序
    • 32. 对 document.write的依赖关系
  • JS时间戳:
    • 在文件名之后添加“?t=yyyymmdd.js”,
    yyyymmdd为当天日期。例:
    test.js?t=20100331.js
  • 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.2
    http://code.google.com/p/ourtools/downloads/list
    常见方式:
    test.source.js ---> test.js (推荐)
    test.js ---> test-min.js
  • 40. 三、JSON
  • 41. JSON
    • JSON 语法
    • 42. JSON 转化
  • JSON 语法:
    • JSON 的“名”规定为任何字符串
    • 43. JSON 字符串必须使用双引号包围
    • 44. JSON 数字整数的首位不允许为 0
  • JSON 语法:
  • 45. JSON 转化:
    • 使用 eval() 方法转化(最便捷):
    varmyData = eval('(' + JSON + ')');
    • 使用 YUI 2.8 中的 YAHOO.lang.JSON.parse方法转化(最安全):
    varmyData =
    YAHOO.lang.JSON.parse(JSON);
  • 46. 四、Ajax
  • 47. Ajax
    • 编码问题
  • 编码问题:
    • 无论是POST还是GET方式,均直接在URL后添加参数:url?_input_charset=utf-8
    (仅在淘宝的后台框架webx下有效!)
  • 48. Question?