术语

监听事件, 在在节点上能被监听的页面操作. 如: select 节点的 change 事件, a 节点的 click 事件.
浏览器默认动作, 指特定页面元素上带有的功能. 如: 点击 a 链接节点的跳转动作, 表单提交动作.

stopPropagation()

因为事件可以在各层级的节点中传递, 不管是冒泡还是捕获, 有时我们希望事件在特定节点执行完之后不再传递, 可以使用事件对象的 stopPropagation() 方法.

假设页面上存在一个浮动弹出层, 显示在最前面, 当点击弹出层以外页面区域时, 隐藏弹出层. 为了做到这样的效果, 我们会监听 documentElement 的 click 事件, 一旦事件被触发即隐藏弹出层. 但是...

这显然存在问题. 当用户点击弹出层时, 我们不希望它隐藏掉. 但因为事件的冒泡传递, documentElement 的 click 事件也会被触发. 这个时候, 我们可以监听弹出层的 click 事件, 并使用 stopPropagation() 方法阻止冒泡. 请参考下面的代码.

// 在弹出对话框上点击时, 不进行任何页面操作, 并阻止冒泡
document.getElementById('dialog').onclick = function(ev) {
	ev.stopPropagation();
};
 
// 在 documentElement 节点上监听到点击事件时, 隐藏对话框
document.documentElement.onclick = function(ev) {
	document.getElementById('dialog').style.display = 'none';
};

stopPropagation() 相当好用, 可是 IE8 及以前版本都不支持. IE 的事件对象包含特有的属性 cancelBubble, 只要将它赋值为 false 即可阻止事件继续. 如:

// 在弹出对话框上点击时, 不进行任何页面操作, 并阻止冒泡
document.getElementById('dialog').onclick = function(ev) {
	ev.cancelBubble = false;
};

preventDefault()

一个带事件监听的链接代码如下:

<a href="http://w3c.org" onclick="alert('JavaScript Click Event');">点击链接</a>

点击该链接, 显示对话框后跳转页面. 由此可知, 除了执行监听事件还会触发浏览器默认动作; 执行监听事件在前, 触发浏览器默认动作在后.

这里有个经典示例, 我们希望点击链接在新窗口打开页面, 但不希望当前页面跳转. 这个时候可以使用 preventDefault() 阻止后面将要执行的浏览器默认动作.

<a id="link" href="http://w3c.org">W3C 首页链接</a>
 
<script>
// 在新窗口, 打开页面
document.getElementById('link').onclick = function(ev) {
	// 阻止浏览器默认动作 (页面跳转)
	ev.preventDefault();
	// 在新窗口打开页面
	window.open(this.href);
};
</script>

return false

退出执行, return false 之后的所有触发事件和动作都不会被执行. 有时候 return false 可以用来替代 stopPropagation() 和 preventDefault(), 比如我们上面新窗口打开链接的例子, 如:

<a id="link" href="http://w3c.org">W3C 首页链接</a>
 
<script>
// 在新窗口, 打开页面
document.getElementById('link').onclick = function(ev) {
	// 在新窗口打开页面
	window.open(this.href);
	// 退出执行 (在监听事件之后执行的浏览器默认动作将不会被执行)
	return false;
};
</script>

有人认为 return false = stopPropagation() + preventDefault(), 其实是错的. return false 不但阻止事件, 还可以返回对象, 跳出循环等... 方便地一刀切而不够灵活, 滥用易出错.

后话

因为习惯用 return false 来阻止事件, 最近在搞手机 Web 的时候遇到一些问题, 很是难堪. 写下此文当作笔记, 提醒自己.

• 用 JavaScript 实现变速回到顶部
• 通过 JavaScript 获取页面上的鼠标位置
• WordPress 评论的 @ 回复
• JavaScript 初始化装载方法
• 谷歌音乐搜索栏的提示功能

无论是自己的网站还是公司网站, 都用不到这样的效果, 写这么个文章有点奇怪. 只因最近给一个朋友做了几个页面, 他要求有类似效果. 而且我之前做过一个叫 Highslide4WP 的 WordPress 插件, 所以我也就对比了一下, 希望对其他站长有所帮助.

本文我会对 Highslide JS, Lightbox 2 和 Fancybox 进行简单的对比. 当然, 这些对比维度都是我的需求, 带有个人主观意识.

功能支持

这类插件功能强大得很, 机会你能想到的东西都能做成 popup, 而 Lightbox 2 算里面比较纯正的了.

Highslide JS
支持图片, 图片轮播, HTML 片段, iframe, flash 等媒体. Highslide 还支持拖拽 popup, 在原 popup 点击查看原图.

Lightbox 2
只支持图片, 图片轮播.

Fancybox
支持图片, 图片轮播, HTML 片段, iframe, flash 等媒体.

文件尺寸

因为 CSS 文件相差无几, 所以只比较 JavaScript 文件尺寸, 下面提及的文件尺寸均是压缩和混淆后的大小.

Highslide JS
不依赖任何 JavaScript 库, 有 4 种不同的功能脚本.

• 支持基本功能的 JS (highslide.packed.js) 有 25KB.
• 支持 HTML 片段的 JS (highslide-with-html.packed.js) 有 34KB.
• 支持画廊 (gallery) 的 JS (highslide-with-gallery.packed.js) 有 36KB.
• 支持全功能的 JS (highslide-full.packed.js) 有 46KB.

其中 iframe 和 flash 需要加载 highslide-with-html.packed.js

Lightbox 2
Lightbox 2 应该是用户群最多的, 原作需要引入 prototype 库, 但有人跟随开发出依赖 jQuery 的版本, 听说还有原生 JavaScript 版本. 撇开库文件不说, 压缩后的 JS 文件只有 6KB 到 8KB.

Fancybox
依赖 jQuery, 压缩后的 JS 文件有 15KB.

激活方式

其实就两种激活方式, 一种是工具加载时自动帮你找节点, 一种是使用 JavaScript 自己去找节点. 但因为 jQuery 的兴起和它强大的选择器, 后一种方式被使用得越来越多.

Highslide JS
使用特定 class 作为标记, 使用 JavaScript 为带标记的节点进行处理.

Lightbox 2
prototype 版: 使用特定 rel 作为标记, 使用 JavaScript 为带标记的节点进行处理.
jQuery 版: 使用选择器找到对应节点, 并调用处理方法.

Fancybox
使用选择器找到对应节点, 并调用处理方法.

相关下载

Highslide JS
Lightbox 2
Lightbox for jQuery
Fancybox

结束语

其实我考虑的就几点:

• 能为我提供什么服务?
• 使用这些服务的代价如何?
• 使用方式是否符合习惯?

最后我选择了 Fancybox, 哪一款更适合你呢?

• Lazy Load, 延迟加载图片的 jQuery 插件
• WordPress 搜索框添加文字提示
• jQuery 导航菜单
• jQuery 的 slideUp 和 slideDown 动画
• iNove 中鼠标悬浮显示 @ 评论

<script type='text/javascript' src='{ROOT DIR}/wp-includes/js/l10n.js?ver=20101110'></script>

i18n 和 l10n

i18n^[1] 和 l10n^[2] 是 IT 领域常用的缩写术语, 分别是国际化和本地化的意思. i18n 指应用程序能够为不同的国家和语言环境的用户群体提供本地化的服务, 而 l10n 则是在用户使用环境实现本地化特性, 国际化和本地化泛指语言环境的多语言实现. 如: WordPress 是一个支持国际化的程序, 只要提供对应国家语言包并制定国家代号, 就能替换整个网站的语言环境.

JavaScript 本地化

如前面的例子, WordPress 一直支持国际化, 并提供 _e() 和 __() 两个 PHP 方法对程序进行本地化. 但随着前端 JavaScript 应用越来越多, 后端的国际化已经满足不了所有需求, 有必要引入 JavaScript 的国际化和本地化.

若你使用的主题支持 wp_head() 方法, 将在页面加载 l10n.js 文件, 而且用户可以通过简单的代码向页面注入本地化资源. l10n.js 是一个 JavaScript 本地化的工具库, 包含 convertEntities() 方法, 可以将 HTML 对象还原成原来的值, 所以它会在所有注入的 JavaScript 脚本和本地化资源之前载入.

使用的方法

我们可以为每一个要载入的 JavaScript 文件定义本地化资源. 实现代码如下^[3]:

// 必须先载入一个 Javascript 文件
wp_enqueue_script('some_handle', '/some_javascript.js');
 
// 组装本地化数据, 使用 __() 制作本地化内容
$data = array( 'some_string' => __( 'Some string to translate' ) );
 
// 加载本地化脚本. 这里必须指定一个需要载入的 JavaScript 文件.
wp_localize_script( 'some_handle', 'object_name', $data );

执行后将在页面上生成代码如下:

/* <![CDATA[ */
var object_name = {
some_string: "Some string to translate"
};
/* ]]> */
<script type='text/javascript' src='{ROOT DIR}/some_javascript.js?ver=3.1'></script>

本地化资源会在指定脚本之前载入和定义. 其中 {ROOT DIR} 是网站的根目录.

此时如果我们可以通过以下代码进行测试:

alert(object_name.some_string); // 弹出对话框, 显示 'Some string to translate'

利弊和应用场合

好处前面说了很多, 可以方便地进行前端本地化 (需要后端 PHP 配合). 缺点也很明显, 会在每次页面加载时计算本地化资源, 并且载入大量 JavaScript 代码, 增加系统负担和延长页面加载时间.

JavaScript 本地化是 WordPress 主题和插件制作中让人较为烦恼的地方, 一些插件开发者会在页面上自行定义 l10n 对象, 可以参考 WP-RecentComments 插件的做法. WordPress 这次强行引入, 很可能会被主题和插件开发者广泛应用. 也就是说, 不久的将来你未必敢卸载掉它, 否则某些插件将运行不了.

卸载和恢复的方法

虽说 l10n.js 文件很小, 好歹会发出一个请求, 如果你真的认为没用, 可以在 functions.php 中添加以下代码将它卸载掉.

wp_deregister_script('l10n');

如函数名, 这个方法不是禁用, 而是注销. 也就是说, 一旦你注销就没有了, 就算删除这段代码也不会还原. 如果在注销后希望回复需要使用以下方法:

wp_register_script('l10n');

总结

WordPress 的想法很好, 但这实现方式叫我该如何吐槽, 希望 "支持 JavaScript 本地化" 不是通过主题审核的必要条件. 作为前端, 多少有点页面洁癖, 我已经将这个脚本注销掉了. 另外, 看到 WordPress 3.1 那夺目的 Admin Bar 我淡定地笑了, 祝 WordPress 越来越臃肿.

• JavaScript 的 parseInt 取整
• JavaScript 的命名空间
• WordPress 动态加载文章内容
• JavaScript 初始化装载方法
• 关于 JavaScript 的 with 语句

过去数个星期我一直在寻找一款包括树形视图的 JSON 编辑工具. 你可以通过这么个工具获得满意的 JSON 结构综述, 并且能够轻松地对结构作出修改.

是的, 我^[1]知道那中表现形式有点像 Firebug, 而事实上找到了 Calm_Pear 的 promising attempt. 但我觉得两个都不足以满足我最初的需求, 所以我写了自己的工具.

你可以线上试用或者下载源代码 (zip 文件, 26 KB).

如何使用

源代码中包含一个 HTML 示例文件. 作为作者我认为例子中的用户界面是相当直接了当的, 但我还是会做一些解释的. 你需要引入脚本, 并在 HTML 内创建两个包括 id 的 div, 一个用于放置树形结构, 另一个将用来显示编辑表单. 页面加载是, 你会通过下面的方法来激活整个事件:

JSONeditor.start (treeDivName,formDivName,JSONobject,ShowExampleList)

JSONeditor 是一个 JavaScript 对象, 其中 JSONobject (JSON 结构代码) 和 ShowExampleList 两个参数用于控制默认的显示内容和示例列表显示与否.

<html>
<head>
<script src="JSONeditor.js"></script>
<script>
onload=function(){
     JSONeditor.start('tree','jform',{},true)
}
</script>
</head>
<body>
<div style="position:absolute;top:10px;left:10px" id="tree"></div>
<div style="position:absolute;top:10px;left:400px" id="jform"></div>
</body>
</html>

使用树形视图

所有对象和数组, 包括他们的子节点都会以文件夹形式显示. 使用的规则如下:

• 点击加好展开文件夹, 点击减号折叠文件夹. 点击一个节点将在编辑器中加载节点对应的结构.

Label, Value 和 Data type 区域

• Label 区域显示的是选中节点的 JSON 路径. 在保存之前你可以随意修改对应的路径和 Label.
• Value 区域显示的是 JSON 的表达式. 唯一的例外是字符串, 为了方便阅读, 字符串类型显示为打印文本, 而不是 JSON 表达式.
• Data type 区域显示的是编辑节点的数据类型. 你可以改变它，虽然只是相当于基本类型的转换.

保存更改

• 点击 Save 按钮保存所有你对 Lable, Value 和 Data type 的修改.

删除节点

• 点击 Delete 删除当前选中的节点.

重命名节点

• 点击 Rename 对当前选中的节点进行重命名. 程序会提示你输入新的节点名称. (这相当于在 Label 区域进行修改.)

添加子节点和邻节点

• 点击 Add child 在选中的对象或数组上添加一个子节点.
• 点击 Add sibling 在选中节点之后添加一个同级的节点.

如果选中 Add children first/siblings before 选项:

• 一个新增子节点将被添加到所有子节点之前.
• 一个新增邻节点将被添加到选中节点之前.

剪切, 拷贝和粘贴

拷贝一个节点:

1. 在树形视图中选中你想拷贝的节点.
2. 点击 Copy 按钮.
3. 点击树形视图中的目标节点 (插入位置的相邻节点).
4. 点击 Paste 按钮.

注意:

• 剪切的工作方式与拷贝十分类似, 但源节点将被移除.
• 如果选中 Paste as child on objects & arrays 选项, 节点将被当成子节点插入.
• Add children first/siblings before 选项仍会影响粘贴是节点的摆放方式.

兼容性

一切好像是相当的稳定, 但如果你找到任何 bug 请留言告知, 我会尝试去解决.

合格的 JSON

用编辑器创建的 JSON 都是合格有效的, 除了能够包含 JavaScript 方法不符标准. 对 JSON 的处理基于我的字符串转换器 JSONstring. 如果你定义一个内部的循环应用对象, 程序会阻塞.

另外, 当它涉及到每一个 JSON 字符串转换器, 你应该避免在你想修改的对象里混合引用 DOM 节点. 那是不能操作的.

浏览器

我已经在 IE7, Firefox 2, Opera 9 和 Safari 2 中测试过这个工具, 它可以正常使用, 除了以下的一些异常:

• 方法的字符串转换在 Safari 中有时不能使用, 这个一个浏览器的 bug. 当方法内包含转义斜线 (如 \n 和 \r) 和其他一些小问题时, 问题会出现.

译者的话

这个工具看似一看即懂, 但在看完文章之后, 还是发现有一些操作细节应该留意的. 文章最后一段没有翻译, 写的是作者准备为该工具添加的一些功能和改进 (如增加拖拽更换节点位置), 但 4 年来都没修改, 也没什么希望了, 所以就不翻译了, 大家知道就好. 希望这个工具对你有用, 更希望有人对它进行二次开发, 另它变得强大 (比如加上拖拽功能).

原文链接: My JSON editor

• Lazy Load, 延迟加载图片的 jQuery 插件
• WordPress 的 JavaScript 本地化
• WordPress 搜索框添加文字提示
• JavaScript 初始化装载方法
• 用 JavaScript 输出页面代码

个人品格: 诚信
专业技能: 精通 ASP.NET MVC, 精通 C# 3.0 或 4.0, 精通 JavaScript/AJAX/jQuery
语言能力: 能看懂英文技术 Email, 理解英文任务. 最好也具备听说写的英文能力.
办公地点: 北京

我们要求的是能直接干活的人，马上能写代码的人，写代码将是你工作中的最重要部分和绝大部分。
你的工作将是直接Report给我。所以我要直接为你的工作负责，所以我不搞闲人和吹牛皮职位，我不喜欢这种人。如果你有能力，我会提供给你一个安心写你的代码的环境，让你生活简单，心情平静快乐:-)。

联系邮箱: yewm@shinetechchina.com
招聘原文: AdaLoveLacer 的专栏

• 将 Blogroll 分为两栏 (4)
• 线上 JSON 编辑工具
• Google DevFest 互联网技术交流会
• 谷歌音乐搜索栏的提示功能
• 关于 JavaScript 的 with 语句

投放广告的人都很关注他的广告会放在哪个位置, 因为这可能影响点击次数, 甚至是否在第一屏显示. 就这个问题, 其实很容易解决, 只要随机显示广告即可.

代码如何实现? 在这我推荐两种随机显示广告的处理办法.

在后端处理

在后端排序好再输出页面. 将广告节点用数组存放, 对数组进行随机排序, 再输出经过排序的数组. 参考代码 (PHP) 如下:

// 用数组存放广告列表
$ads = array('<a href="#"><img src="ad-125x125.png" alt="广告 1" width="125" height="125" /></a>'
			,'<a href="#"><img src="ad-125x125.png" alt="广告 2" width="125" height="125" /></a>'
			,'<a href="#"><img src="ad-125x125.png" alt="广告 3" width="125" height="125" /></a>'
			,'<a href="#"><img src="ad-125x125.png" alt="广告 4" width="125" height="125" /></a>'
);
 
// 对数组进行随机排序
shuffle($ads);
 
// 输出经过排序的数组
$html = '';
foreach ($ads as $ad) {
	$html .= $ad;
}
echo $html;

我们来扩展一下, 如果我是站长, 预留了 4 个广告位, 但现在只有 3 个在投放; 我想在空置的广告位放置一个 "虚位以待" 的广告招租链接, 并显示在最后, 该如何处理呢? 在排序完成之后再插放广告招租链接就可以了.

// 用数组存放广告列表
$ads = array('<a href="#"><img src="ad-125x125.png" alt="广告 1" width="125" height="125" /></a>'
			,'<a href="#"><img src="ad-125x125.png" alt="广告 2" width="125" height="125" /></a>'
			,'<a href="#"><img src="ad-125x125.png" alt="广告 3" width="125" height="125" /></a>'
);
 
// 对数组进行随机排序
shuffle($ads);
 
// 输出经过排序的数组
$html = '';
foreach ($ads as $ad) {
	$html .= $ad;
}
 
// 添加广告招租链接
$html .= '<a href="#"><img src="sell-ad-125x125.png" alt="虚位以待" width="125" height="125" /></a>';
echo $html;

我就是用这个方法来输出 125x125 广告的, 因为它直观可靠, 处理方便. 但是如果你希望对页面做静态化, 建议选用 JS 随机排序的方法.

在前端处理

在后端按原有循序输出, 在页面通过 JavaScript 重新排序. 假设页面输出广告区域的 HTML 片段如下.

<div id="ads">
	<a href="#"><img src="ad-125x125.png" alt="广告 1" width="125" height="125" /></a>
	<a href="#"><img src="ad-125x125.png" alt="广告 2" width="125" height="125" /></a>
	<a href="#"><img src="ad-125x125.png" alt="广告 3" width="125" height="125" /></a>
	<a href="#"><img src="ad-125x125.png" alt="广告 4" width="125" height="125" /></a>
</div>

我们可以通过 JS 来对广告进行重新排序. 参考代码如下:

<div id="ads" style="display:none;">
	<a href="#"><img src="ad-125x125.png" alt="广告 1" width="125" height="125" /></a>
	<a href="#"><img src="ad-125x125.png" alt="广告 2" width="125" height="125" /></a>
	<a href="#"><img src="ad-125x125.png" alt="广告 3" width="125" height="125" /></a>
	<a href="#"><img src="ad-125x125.png" alt="广告 4" width="125" height="125" /></a>
</div>
<div id="random-ads" style="display:none;">
</div>
 
<script type="text/javascript">
//<![CDATA[
 
var source = document.getElementById('ads');
var target = document.getElementById('random-ads');
var ads = source.getElementsByTagName('a');
 
// 下标数组
var arr = new Array();
for(var i=0; i<ads.length; i++) {
	arr[i] = i;
}
 
// 随机排序
function randomSort(a, b){
	var tmp = parseInt((Math.random() + 0.5), 10);
	return tmp ? a-b : b-a;
}
 
// 将老的广告区的节点随机插放到新的广告区
arr.sort(randomSort);
for(var i=0; i<arr.length; i++) {
	target.appendChild(ads[arr[i]].cloneNode(true));
}
 
// 显示新的广告区和移除老的广告区
source.parentNode.removeChild(source);
target.style.display = 'block';
 
//]]>
</script>

如果有如同方法 1 那样的扩展需求, 将空广告位显示在最后, 且显示广告招租链接, 该如何处理? 这个当作课后习题吧...

• 每日同步 Feedsky 订阅数
• 向访客和爬虫显示不同的内容
• 将 Blogroll 分为两栏 (3)
• 用 JavaScript 输出页面代码
• jQuery 的 slideUp 和 slideDown 动画

问题描述

在加载页面的时候, 将光标快速定位到搜索栏上, 待页面加载完成, 搜索栏进行初始化后会显示搜索提示. 此时输入的任何内容将成为搜索提示的一部分而不是搜索关键字. 截图如下:

导致原因

搜索栏的 JavaScript 初始化执行在 onload 的时候. 因为页面图片请求多, 完全加载需要 3 秒钟左右, 并且搜索栏的 tabindex 被设为 1, 搜索优先的用户很容易就能遇到.

以下是我根据自己的理解反编译出来的 JS 代码, 页面在 onload 的时候将会执行 m.hint.initHint 方法为搜索框添加提示功能.

/**
 * 为搜索框添加提示功能
 * @param searchTip		提示信息
 * @param searchBoxId	搜索输入框 ID
 * @param hideBoxId		关键字隐藏框 ID
 */
m.hint.initHint = function(searchTip, searchBoxId, hideBoxId){
	var searchBox = document.getElementById(searchBoxId);
	var hideBox = null;
	if(searchBox){
		if(hideBoxId) {
			hideBox = document.getElementById(hideBoxId);
		}
		l.events.listen(searchBox, "blur", l.bind(m.hint.onInputBlur, null, searchBox, hideBox), false);
		l.events.listen(searchBox, "focus", l.bind(m.hint.onInputFocus, null, searchBox, hideBox), false);
		if(hideBox){
			l.events.listen(searchBox, "change", bind(m.hint.onInputChange, null, searchBox, hideBox), false);
			hideBox.value = m.hint.getInputValue(searchBox);
		}
 
		// 在这里将搜索提示赋给临时变量
		m.hint.Gh[searchBox] = searchTip;
		// 如果搜索框存在, 则为搜索框加上临时变量和灰色字的 class
		m.hint.onInputBlur(searchBox);
	}
};
 
m.hint.onInputBlur = function(searchBox, hideBox) {
	m.hint.fi(searchBox);
	hideBox && m.hint.onInputChange(searchBox, hideBox);
};
 
m.hint.fi = function(searchBox) {
	if(searchBox) {
		var searchTip = m.hint.Gh[searchBox];
		if(searchTip && (searchBox.value.trim()=="" || searchBox.value==searchTip)) {
			searchBox.setAttribute(m.hint.IS_HINT, "1");
			searchBox.className += " hint";
			searchBox.value = searchTip;
		}
	}
};

解决办法

缩短搜索框 DOM 节点加载和 JavaScript 初始化之间的时间. 可以在搜索框加载完成后立刻执行 JS, 反正 Google 自己的产品也不需要 SEO. 当然, 最好在 DOM ready 的时候执行.

扩展知识

记得我写过一篇文章, 介绍如何在 WordPress 搜索框添加文字提示. 我的处理办法简单粗暴, 仅以框内关键字来判断是关键字还是提示信息. (所以我的提示信息很长)

在分析这个案例的过程中, 我发现 Google 的处理办法很好, 可以借鉴和使用. 它通过隐藏输入框来放置真正的搜索信息, 所以可以实现完全关键字和提示文案的区分.

后话

这个小问题已经困扰我很久了 (几乎每次遇到), 今天终于忍不住看了一下代码, 希望 Google 的工程师能够看到本文快速解决掉. (修改建议我都给出来了, 还不改也说不过去吧)

• WordPress 搜索框添加文字提示
• WordPress 搜索框添加文字提示 (续)
• 用 JavaScript 实现变速回到顶部
• WordPress 评论的 @ 回复
• stopPropagation, preventDefault 和 return false 的区别

Java 也有 Integer.parseInt() 方法, 但是 JavaScript 的 parseInt 处理方式与 Java 等强整型语言不太一样, 所以经常有人因为对这个方法的使用不当而获得异常返回.

下面是一段 Java 代码, 用于将字符串 020 转为整型.

public class Test {
	public static void main(String args[]) throws Exception {
		String str = "020";
		System.out.println(Integer.parseInt(str));
	}
}

输出结果是 20

下面是一段 JavaScript 代码, 同样是将字符串 020 转为整型.

var str = "020";
var num = parseInt(str);
alert(num);

输出结果是 16

为什么呢?

无论是 Java 还是 JavaScript, parseInt 方法都有两个参数, 第一个参数就是要转换的对象, 第二个参数是进制基数, 可以是 2, 8, 10, 16, 默认以 10 进制处理. 但在 JavaScript 中, 0 开始的数被认为使用 8 进制处理, 0x 的数被认为是用 16 进制来处理. 所以上面的 JavaScript 代码计算错误了.

影响大吗?

大! 很大! 因为这个经常用于计算价钱, 一旦价格错误, 对用户来说, 这是误导, 而一个好的网站不应该出现这种误导用户的. 下面的 DEMO 中, 没有指定进制. 大家可以在数量框中输入一个以 0 开头的数字, 在点击计算按钮, 算出来的数值将比预想中的小一些, 或者小很多 (如: 8 进制中没有 019 这样的数值, 所以数值变成了 1, 9 被忽略掉).
没有为 parseInt 函数指定进制的 DEMO

如何修改?

前面说过, 有两个参数, 第二个参数可以指定计算使用的进制.

parseInt(num, radix);

所以我们可以将前面有问题的那段 JavaScript 代码改写为下面的代码.

var str = "020";
var num = parseInt(str, 10);
alert(num);

这样处理的话, 我们再重写一些前面的 DEMO, 如下:
为 parseInt 函数指定进制为 10 的 DEMO

记住了, 在 JavaScript 上使用 parseInt 方法时要带上进制参数.

• 关于 JavaScript 的 with 语句
• WordPress 的 JavaScript 本地化
• JavaScript 的命名空间
• 判断 Java 中的空字符串
• 通过 JavaScript 获取页面上的鼠标位置

用过 Java 和 .NET 的同学对包或命名空间的概念应该不会陌生, 正因为有这个概念, 使代码的简洁易读得到了保证. 不知 JavaScript 设计之初是如何定位 with 语句的, 个人觉得它们之间有一定的相似度. 如:

apple.banana.candy.dog.egg.fog.god.huh.index = 0;
doSomething(apple.banana.candy.dog.egg.fog.god.huh.index);

利用 with 语句, 可以写为以下代码.

with(apple.banana.candy.dog.egg.fog.god.huh) {
	c = 0;
	doSomething(index);
}

看起来很美妙, 却存在致命的缺陷. 下面我们来进行一些小测试吧.

1. 在 with 语句内部通过内部变量修改数值

var root = {
	branch: {
		node: 1
	}
};
 
with(root.branch) {
	node = 0;
	// 显示 0, 正确!
	alert(node);
}
// 显示 0, 正确!
alert(root.branch.node);

2. 在 with 语句内部通过对象节点修改数值

var root = {
	branch: {
		node: 1
	}
};
 
with(root.branch) {
	root.branch.node = 0;
	// 显示 0, 正确!
	alert(node);
}
// 显示 0, 正确!
alert(root.branch.node);

经过测试 1 和测试 2, 乍看没什么问题, 但是... 请看测试 3.

3. 在 with 语句内部通过对象父节点修改数值

var root = {
	branch: {
		node: 1
	}
};
 
with(root.branch) {
	root.branch = {
		node: 0
	};
	// 显示 1, 错误!
	alert(node);
}
// 显示 0, 正确!
alert(root.branch.node);

由上面的测试 3 可知, with 语句内部的节点父节点修改后, 不会同步到节点本身. 也就是说, 不能保证内外数值的一致性. 这是可能成为项目里面隐藏性很高的 bug.
那我们该怎么办呢? 接受那很长的一串逐级访问, 还是另有他法?

方法是有的. 我们可以通过别名引用父节点的方式来调用节点对象, 如:

var root = {
	branch: {
		node: 1
	}
};
 
var quote = root.branch;
quote.node = 0;
// 显示 0, 正确!
alert(root.branch.node);

我相信很少人会用 with 语句, 也不会有很多人知道这个关键字, 但我觉得这是个有问题的语句, 压根就不应该使用, 所以写个小文记录一下.

• WordPress 的 JavaScript 本地化
• JavaScript 的 parseInt 取整
• JavaScript 的命名空间
• JavaScript 放大镜 - 放大倍率和视窗尺寸
• 通过 JavaScript 获取页面上的鼠标位置

倍率一般大于等于 1, 因为原图一般都不会小于缩略图. 一旦倍率小于 1, 则将倍率设为 1.
因为缩略图和原图的尺寸是不可变的, 所以我们通过它们来获得倍率.

/**
 * 获取放大镜放大倍数
 * @param thumb		缩略图对象
 * @param glass		镜片对象
 * @return 			放大镜放大倍数
 */
function getMultiple(thumb, glass) {
	var multiple = {
		horizontal:0,
		vertical:0
	};
 
	var thumbSize = getSize(thumb);
	var imageSize = getImageSize(image);
 
	multiple.horizontal = imageSize.width / thumbSize.width;
	if(multiple.horizontal <= 1) {
		multiple.horizontal = 1;
	}
 
	multiple.vertical = imageSize.height / thumbSize.height;
	if(multiple.vertical <= 1) {
		multiple.vertical = 1;
	}
 
	return multiple;
}

原图和缩略图是固定的. 而为了统一视觉感官和防止破页, 我们一般也会指定视窗的尺寸, 所以镜片的尺寸是根据其他几个对象计算出来的.
镜片 = 缩略图x视窗/原图 = 缩略图/倍率

/**
 * 加载镜片的样式
 * @param viewportSize	视窗尺寸
 * @param multiple		倍率
 * @param glass			镜片对象
 */
function loadGlassStyle(viewportSize, multiple, glass) {
	glass.style.width = round(viewportSize.width / multiple.horizontal) + 'px';
	glass.style.height = round(viewportSize.height / multiple.vertical) + 'px';
}

如果定义的视窗的宽或高比原图还要小, 那该如何显示?
需要改变视窗的尺寸. 假设原图是 240x180, 视窗原定尺寸是 200x200. 视窗尺寸随之改变为 200x180. 此时镜片的尺寸仍须与视窗成正比.

如果倍率小于 1, 又该如何显示?
将倍率设为 1, 镜片覆盖整个缩略图, 显示整个原图为视窗内容; 或者不作操作 (禁止放大镜效果).

下面的代码用于获取视窗的尺寸.

/**
 * 返回视窗尺寸
 * @param multiple		倍率
 * @param image			原图对象
 * @return				视窗尺寸
 */
getViewportSize: function(multiple, image) {
	var dimension = {
		width:0,
		height:0
	};
 
	// 如果倍率小于 1 或者视窗比原图还宽, 宽度设为跟原图一致, 否则去设定宽度
	if(multiple.horizontal <= 1 || config.viewportSize[0] > image.width) {
		dimension.width = image.width;
	} else {
		dimension.width = config.viewportSize[0];
	}
 
	// 如果倍率小于 1 或者视窗比原图还高, 高度设为跟原图一致, 否则去设定高度
	if(multiple.vertical <= 1 || config.viewportSize[1] > image.height) {
		dimension.height = image.height;
	} else {
		dimension.height = config.viewportSize[1];
	}
 
	return dimension;
}

上节《JavaScript 放大镜- 移动镜片》我们实现了镜片在缩略图上的移动效果, 并留下习题:"当镜片带边框时, 如何保证边框不影响镜片移动时的精确度?"
为了防止镜片受边框影响偏移, 可以通过为镜片对象设定与边框宽度一样的负 margin 值来消除偏移.

本节没有 DEMO, 但对后面几讲来说十分重要, 请同学们搞清楚正常和异常情况下的比例换算.
同样留个课后思考题, 本文的代码中出现了 round 方法, 这是一个四舍五入取整方法, 如果要你自己实现这个功能, 你会如何处理? (提示: 可参考计算机图形学关于线条走样的处理方法)

• JavaScript 放大镜 - 移动镜片
• 用 JavaScript 实现变速回到顶部
• 通过 JavaScript 获取页面上的鼠标位置
• JavaScript 的命名空间
• 巧用 WordPress 缩略图

用 JS 计算鼠标在页面上的位置并非难事, 只要把握好各浏览器的区别就可以轻易算出鼠标位置. (这是 DEMO)

视窗 (浏览器可视窗口) 就像是页面上的掩板开了一个洞. 滚动条可以改变页面和视窗之间的偏移量, 从而可以通过视窗看到页面的各个位置.
鼠标在页面上的位置 = 页面和视窗之间的偏移量 + 鼠标在视窗中的位置

右图中的 cursorX 和 cursorY 分别是鼠标在视窗中的横向和纵向位置, scrollY 是页面和视窗之间的纵向距离. 当然, 当视窗宽度小于页面宽度的时候, 还会存在 scrollX. 那么鼠标在页面上的位置就是: (scrollX+cursorX, scrollY+cursorY)

IE 以外的浏览器 (本人测试过 Firefox 3.6, Opera 10.10, Chrome 4.1 和 Safari 4.0.4) 均可以通过 pageXOffset 和 pageYOffset 来获取页面和视窗间的横纵距离. 但 IE (本人测试过 IE6, IE7, IE8) 只能通过滚动位移来获取页面和视窗间的距离, 并存在一到两个像素的偏离.

以下是获取鼠标在页面上位置的代码实现. (这是 DEMO)

/**
 * 获取鼠标在页面上的位置
 * @param ev		触发的事件
 * @return			x:鼠标在页面上的横向位置, y:鼠标在页面上的纵向位置
 */
function getMousePoint(ev) {
	// 定义鼠标在视窗中的位置
	var point = {
		x:0,
		y:0
	};
 
	// 如果浏览器支持 pageYOffset, 通过 pageXOffset 和 pageYOffset 获取页面和视窗之间的距离
	if(typeof window.pageYOffset != 'undefined') {
		point.x = window.pageXOffset;
		point.y = window.pageYOffset;
	}
	// 如果浏览器支持 compatMode, 并且指定了 DOCTYPE, 通过 documentElement 获取滚动距离作为页面和视窗间的距离
	// IE 中, 当页面指定 DOCTYPE, compatMode 的值是 CSS1Compat, 否则 compatMode 的值是 BackCompat
	else if(typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
		point.x = document.documentElement.scrollLeft;
		point.y = document.documentElement.scrollTop;
	}
	// 如果浏览器支持 document.body, 可以通过 document.body 来获取滚动高度
	else if(typeof document.body != 'undefined') {
		point.x = document.body.scrollLeft;
		point.y = document.body.scrollTop;
	}
 
	// 加上鼠标在视窗中的位置
	point.x += ev.clientX;
	point.y += ev.clientY;
 
	// 返回鼠标在视窗中的位置
	return point;
}

记得以前我写过一个减速滚动置顶的 JavaScript 方法, 也是通过计算视窗和页面高度来实现的, 其计算方法与本文的方法不同小异, 也可以搬过来用.

这几个月来, 专注前端项目的开发, 也算小有收获, 最近我会将一些积累作成文章分享于众. 以此作为铺垫, 由浅入深, 希望可以带出一些有用的内容.

• 用 JavaScript 实现变速回到顶部
• JavaScript 初始化装载方法
• 请不要过于依赖 JavaScript
• JavaScript 的命名空间
• stopPropagation, preventDefault 和 return false 的区别

本文翻译自 Lazy Load Plugin for jQuery, 介绍一个 jQuery 插件, 它提供懒汉式加载页面图片的功能.

Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.

在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态. 在某些情况下还可以帮助降低服务器负担.

Lazy Load 灵感来自 Matt Mlinac 制作的 YUI ImageLoader 工具箱. 这是演示页面.

怎样使用?

Lazy Load 依赖于 jQuery. 请将下列代码加入页面 head 区域:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

并且在你的执行代码中加入下面语句:

$("http://www.appelsiini.net/projects/lazyload/img").lazyload();

这将使 id="http://www.appelsiini.net/projects/lazyload/img" 区域下的图片将被延迟加载.

设置敏感度

插件提供了 threshold 选项, 可以通过设置临界值 (触发加载处到图片的距离) 来控制图片的加载. 默认值为 0 (到达图片边界的时候加载).

$("http://www.appelsiini.net/projects/lazyload/img").lazyload({ threshold : 200 });

将临界值定为 200, 当可视区域离图片还有 200 个象素的时候开始加载图片. (这一句原文的字面意思和本人理解不一致, 原文: Setting threshold to 200 causes image to load 200 pixels before it is visible.)

占位图片

你还可以设定一个占位图片并定义事件来触发加载动作. 这时需要为占位图片设定一个 URL 地址. 透明, 灰色和白色的 1x1 象素的图片已经包含在插件里面.

$("img").lazyload({ placeholder : "img/grey.gif" });

事件触发加载

事件可以是任何 jQuery 时间, 如: click 和 mouseover. 你还可以使用自定义的事件, 如: sporty 和 foobar. 默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置. 在灰色占位图片被点击之前阻止加载图片, 你可以这样做:

$("img").lazyload({
	placeholder : "img/grey.gif",
	event : "click"
});

使用特效

当图片完全加载的时候, 插件默认地使用 show() 方法来将图显示出来. 其实你可以使用任何你想用的特效来处理. 下面的代码使用 FadeIn 效果. 这是演示页面.

$("img").lazyload({ 
	placeholder : "img/grey.gif",
	effect : "fadeIn" 
});

图片在容器里面

你可以将插件用在可滚动容器的图片上, 例如带滚动条的 DIV 元素. 你要做的只是将容器定义为 jQuery 对象并作为参数传到初始化方法里面. 这是水平滚动演示页面和垂直滚动的演示页面.

CSS 代码:

#container {
	height: 600px;
	overflow: scroll;
}

JavaScript 代码:

$("img").lazyload({
	 placeholder : "img/grey.gif",
	 container: $("#container")
});

当图片不顺序排列

滚动页面的时候, Lazy Load 会循环为加载的图片. 在循环中检测图片是否在可视区域内. 默认情况下在找到第一张不在可见区域的图片时停止循环. 图片被认为是流式分布的, 图片在页面中的次序和 HTML 代码中次序相同. 但是在一些布局中, 这样的假设是不成立的. 不过你可以通过 failurelimit 选项来控制加载行为.

$("img").lazyload({ 
	failurelimit : 10
});

将 failurelimit 设为 10 令插件找到 10 个不在可见区域的图片是才停止搜索. 如果你有一个猥琐的布局, 请把这个参数设高一点.

延迟加载图片

Lazy Load 插件的一个不完整的功能, 但是这也能用来实现图片的延迟加载. 下面的代码实现了页面加载完成后再加载. 页面加载完成 5 秒后, 指定区域内的图片会自动进行加载. 这是延迟加载演示页面.

$(function() {
	$("img:below-the-fold").lazyload({
		placeholder : "img/grey.gif", 
		event : "sporty" 
	});
});
$(window).bind("load", function() { 
	var timeout = setTimeout(function() {$("img").trigger("sporty")}, 5000);
});

下载插件

最新版本: 源代码, 压缩的代码, 打包的代码

已知问题

由于 webkit 的 bug #6656, Lazy Load 在 Safari 和 Chrome 中无法使用. 它会立即为你加载所有你愿意和不愿意被载入的图片.

貌似 jQuery 1.3.x 令插件在 IE 中失效了. 所有图片将在后台被加载即使它们不应该被加载. 作者正在为解决这个问题而努力, 在此期间只能停留在 jQuery 1.2.6 中使用该插件.

还有, 如果你使用 Mint, 请将 mint 标签加在页面头部, 如果把 mint 标签加到页面结尾会干扰到 Lazy Load 插件. 这是一个相当罕见的问题, 如果有人找到解决办法请联系作者.

• jQuery 导航菜单
• jQuery 的 slideUp 和 slideDown 动画
• WordPress 搜索框添加文字提示
• 网页图片展示工具 - Highslide JS, Lightbox 2, Fancybox 比较
• 在主题中添加 LavaLamp 菜单效果

这次要用 jQuery 实现二级导航菜单, 淡出淡入导航菜单, 滚动导航菜单. 借助 jQuery 的强大动画, 我们需要的代码量非常少.

效果演示
二级导航菜单
淡出淡入导航菜单
滚动导航菜单

相关话题:

WordPress 导航菜单
二级导航菜单
淡出淡入导航菜单
滚动导航菜单
多级导航菜单
jQuery 导航菜单
点选式导航菜单 (待定话题)

二级导航菜单

鼠标划过显示菜单, 离开隐藏菜单, 没有能比这个跟简单的了.

jQuery(document).ready(function(){
	// 找到所有菜单, 并添加显示和隐藏菜单事件
	jQuery('#menus > li').each(function(){
		jQuery(this).hover(
 
			// 显示菜单
			function(){
				jQuery(this).find('ul:eq(0)').show();
			},
 
			// 隐藏菜单
			function(){
				jQuery(this).find('ul:eq(0)').hide();
			}
 
		);
	});
});

淡出淡入导航菜单

鼠标悬停显示淡入显示菜单, 离开淡出隐藏菜单. 需要加上延迟处理, 原因请参考请参考如下文章.

// 线程 IDs
var mouseover_tid = [];
var mouseout_tid = [];
 
jQuery(document).ready(function(){
	jQuery('#menus > li').each(function(index){
		jQuery(this).hover(
 
			// 取消淡出菜单的线程, 延时淡入菜单
			function(){
				var _self = this;
				clearTimeout(mouseout_tid[index]);
				mouseover_tid[index] = setTimeout(function() {
					jQuery(_self).find('ul:eq(0)').fadeIn(200);
				}, 400);
			},
 
			// 取消淡入菜单的线程, 延时淡出菜单
			function(){
				var _self = this;
				clearTimeout(mouseover_tid[index]);
				mouseout_tid[index] = setTimeout(function() {
					jQuery(_self).find('ul:eq(0)').fadeOut(200);
				}, 400);
			}
 
		);
	});
});

滚动导航菜单

鼠标悬停显示滚动展开菜单, 离开滚动卷起菜单. 需要加上延迟处理, 原因同淡出淡入导航菜单的处理.

// 线程 IDs
var mouseover_tid = [];
var mouseout_tid = [];
 
jQuery(document).ready(function(){
	jQuery('#menus > li').each(function(index){
		jQuery(this).hover(
 
			// 取消卷起菜单的线程, 延时展开菜单
			function(){
				var _self = this;
				clearTimeout(mouseout_tid[index]);
				mouseover_tid[index] = setTimeout(function() {
					jQuery(_self).find('ul:eq(0)').slideDown(200);
				}, 400);
			},
 
			// 取消展开菜单的线程, 延时卷起菜单
			function(){
				var _self = this;
				clearTimeout(mouseover_tid[index]);
				mouseout_tid[index] = setTimeout(function() {
					jQuery(_self).find('ul:eq(0)').slideUp(200);
				}, 400);
			}
 
		);
	});
});

演示主题:

以 WordPress 自带主题 default 为基础, 仅做学习参考使用, 修改过的文件有 header.php 和 style.css, 添加了文件 js/menu.js

下载主题: default_with_menubar_6.zip

jQuery 的确好用, 这么简便地就把效果做出来了. 撇开别的不错, 这时间就节省不少. 但这绝对是用来忽悠入门者的, 如果想知道其原理, 还是建议看一下之前的文章, 自己敲几个代码, 那样你会收获更多.

下回预告:

下次要不要谢谢 YUI 的实现方法呢? (Prototype 就算了, 我自己实现的代码结构就是模范 Prototype 的.)

• jQuery 的 slideUp 和 slideDown 动画
• WordPress 淡出淡入导航菜单
• WordPress 滚动导航菜单
• WordPress 导航菜单
• Lazy Load, 延迟加载图片的 jQuery 插件

如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行, 相当不美观 (演示页面). 演示页面中有一个按钮, 请用鼠标迅速地来回划过...

不知道本博客的老读者是否记得我写过的一个关于菜单导航的专题, 其中一节讨论的是滚动导航菜单的实现方法 (演示页面), 实现了类似 slideUp 和 slideDown 的效果, 但是不存在上述问题, 因为它的滚动高度是即时计算的, 而 jQuery 作为一个通用框架应用的面很广, 很难做到这一点.

如果用 jQuery 来实现这样的效果, 该如何处理呢?
其实很简单, 只需在触发元素上的事件设置为延迟处理, 即可避免滞后反复执行的问题. 例如: 当鼠标滑过按钮后 0.2 秒, 菜单才会展开, 如果鼠标离开按钮, 展开的处理将被终止. 也就是说, 想要展开菜单鼠标必须有 0.2 秒的事件停留在按钮上, 那么迅速地划过按钮是无法执行展开事件的. 卷起也是如此.

下面我们用代码来解决这个问题.

// 线程 IDs
var mouseover_tid = [];
var mouseout_tid = [];
 
jQuery(document).ready(function(){
	jQuery('#menus > li').each(function(index){
		jQuery(this).hover(
 
			// 鼠标进入
			function(){
				var _self = this;
				// 停止卷起事件
				clearTimeout(mouseout_tid[index]);
				// 当鼠标进入超过 0.2 秒, 展开菜单, 并记录到线程 ID 中
				mouseover_tid[index] = setTimeout(function() {
					jQuery(_self).find('ul:eq(0)').slideDown(200);
				}, 400);
			},
 
			// 鼠标离开
			function(){
				var _self = this;
				// 停止展开事件
				clearTimeout(mouseover_tid[index]);
				// 当鼠标离开超过 0.2 秒, 卷起菜单, 并记录到线程 ID 中
				mouseout_tid[index] = setTimeout(function() {
					jQuery(_self).find('ul:eq(0)').slideUp(200);
				}, 400);
			}
 
		);
	});
});

看看处理过后的效果.
演示页面

注意: 当鼠标悬停时间小于动画时间时, 同样可能出现反复执行现象, 可以考虑将悬停时间设置比动画时间稍长.

嗯, 问题解决了, 但 jQuery 应该还存在其他类似的问题, 如 fadeIn 和 fadeOut (演示页面), 处理方法类似. 如果你选用 jQuery 发现了这类问题, 又不情愿为此重新写一大段代码, 那这应该算是一个不错的解决办法, 而且效果也还行. 现在本博客的 RSS feed 列表也是这样实现的.

最后, 拓展一下思维. 不知道你是否见过网页上有这样的效果: 当鼠标在某个元素上停顿一定的时候后页面上某些内容会被激活. 这样的效果处理方法和上面说到的其实是大同小异, 有兴趣的同学可自行尝试.

• jQuery 导航菜单
• Lazy Load, 延迟加载图片的 jQuery 插件
• 在主题中添加 LavaLamp 菜单效果
• WordPress 动态加载文章内容
• WordPress 淡出淡入导航菜单

今天遇到个小问题, 在构建 DOM 时, IE 中不能通过 element.setAttribute('name', _variable); 和 element.name = _variable; 这样的形式来为元素加上 name 属性, 无论是 IE6 还是 IE7. (IE8 是可以的, 但 IE8rc1 不行)

后来我查看了 MSDN, 得到信息如下:

Internet Explorer 8 and later can set the NAME attribute at run time on elements dynamically created with the createElement method. To create an element with a NAME attribute in earlier versions of Internet Explorer, include the attribute and its value when using the createElement method.

也就是说, 我们必须通过带属性和值的标签来创建有 name 属性的元素. 为求各浏览器兼容良好, 代码可以这样写:

var element = null;
try {
	// IE6/IE7 构建方式
	element = document.createElement('<input name="radio-button">');
} catch (e) {
	// W3C 构建方式
	element = document.createElement('input');
	element.name = 'radio-button';
}
// 定义其他属性
element.id = 'radio-1'
element.type = 'radio';

以前我是一个 Java 开发人员, 实际工作中 JavaScript 的代码量其实不多, 在自己的一些小应用中往往只是小打小闹, 会 (潜意识地) 避开一些可能出问题的地方, 像跨域使用 AJAX, IE 内存泄漏这样的问题很少回去考虑. 但在转做 UED 后, JavaScript 和交互应用肯定会成为我以后的工作重点, 发生大小各异问题的机会相当多 (现在几乎每天都有), 在解决各种问题的过程中, 我痛并快乐着. 本着不瞎搞, 少折腾的原则, 有必要把这些记录一下, 为自己备份, 更能与人分享.

• IE6 必死
• JavaScript 的命名空间
• 用 JavaScript 实现变速回到顶部
• JavaScript 初始化装载方法
• 通过 JavaScript 获取页面上的鼠标位置