前端 JavaScript 相关的小Tips

前端 JavaScript 相关Tips
怿飞 / 圆心

Who's this guy?
怿飞 / 圆心
in Taobao UED
Technology Evangelist
Front-End Engineer
Twitter: @blankzheng
Email: blankzheng@gmail.com
Blog: www.planabc.net

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 ：案例
观察到的现象：
脚本执行结束，第二张图才开始下载。
页面加载后，至少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 关键字

性能优化：
使用数组和对象的字面量
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

三、JSON

JSON
JSON 语法
JSON 转化

JSON 语法：
JSON 的“名”规定为任何字符串
JSON 字符串必须使用双引号包围
JSON 数字整数的首位不允许为 0

JSON 语法：

JSON 转化：
使用 eval() 方法转化（最便捷）：
varmyData = eval('(' + JSON + ')');
使用 YUI 2.8 中的 YAHOO.lang.JSON.parse方法转化（最安全）：
varmyData =
YAHOO.lang.JSON.parse（JSON）;

四、Ajax

Ajax
编码问题

编码问题：
无论是POST还是GET方式，均直接在URL后添加参数：url?_input_charset=utf-8
（仅在淘宝的后台框架webx下有效！）

Question？

http://www.planabc.net	2564
http://static.slidesharecdn.com	81
http://www.xh-css.cn	54
http://www.slideshare.net	22
http://km.oa.com	21
http://xianguo.com	18
http://reader.youdao.com	12
http://www.zhuaxia.com	10
http://feed.planabc.net	8
http://liuqingjiefortt.appspot.com	3
http://www.iweb34.com	1
http://fr.aaa.com	1
http://www.itfeed.cn	1
http://m36.mail.qq.com	1
http://cache.baidu.com	1

前端 JavaScript 相关的小Tips

by blank zheng on Apr 01, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

15 Embeds 2,798

Statistics

前端 JavaScript 相关的小Tips — Presentation Transcript