前端 JavaScript 相关Tips

怿飞 / 圆心

Who's this guy?

Twitter: @blankzheng

Email: blankzheng@gmail.com

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？