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