请不要过于依赖 JavaScript

JavaScript 是很好的发明, 它让网页动了起来. 大家都喜欢这样的那样的页面效果, 所以 JS 的使用日益广泛, 甚至被依赖. 但你务必提醒自己, 绝大多数的浏览器都支持 JavaScript, 但不是全部.

上一篇文章中我简单地讲解了如何使用 JavaScript 实现滑动置顶效果. 那段调用 JS 代码的 HTML 片段曾经被我修改过两次. 这次我们将会以它为例, 讲解为什么不能完全依赖 JavaScript 并如何进行处理.

1. 最初版本

清晰, 简洁, 也可以实现滑动效果

<a href="javascript:goTop();">Top</a>

因为操作的动作会被暴露在浏览器的状态栏中, 如果函数很多参数或者很多动作, 那么就会看到很长的一串, 看起来别扭而不美观.

2. 修改版本 1

于是我将代码修改了一下, 将真正被调用的 JS 方法隐藏起来, 代码如下:

<a href="javascript:void(0);" onclick="goTop();">Top</a>

解决了上一个问题, 状态栏只会显示 "javascript:void(0);" 字样, 而同样存在滑动效果. 处理流程如下:

从流程中, 我们可以看到另一个问题, 两个事件都是 JavaScript 动作, 如果 JS 被禁用或者浏览器不支持, 那么点击按钮后一点反应都没有.

3. 修改版本 2

为了兼顾没有 JavaScript 支持的浏览器, 我又修改了一下代码:

<a href="#" onclick="goTop();return false;">Top</a>

我们得了解一下链接的被点击后的处理顺序, 首先 onclick 事件会被触发, 接着是转跳到 href 指向的链接, 我在 onclick 的最后加上 return false; 就是为了中断处理, 不转往 href 指定链接处.

如果浏览器支持 JavaScript, 滑动到顶部后中断处理; 如果浏览器不支持 JavaScript, 则不会执行 onclick 方法, 直接转跳链接的锚回到顶部 (没有滑动效果, 但却是能回到顶部). 处理流程如下:

现在已照顾得算比较周全了, 但还是不够完美. 更极限一些其实我们可以将 JavaScript 代码和页面代码分离, 在 document ready 或者 onload 的时候加载页面代码.

4. 未来版本

我准备在新的模板中将 JS 完全分离出来, 日后我会专门起贴讨论这种做法, 包括什么应该在 document ready 时加载, 什么在 onload 时加载. 代码我暂时就不提供了, 示意的流程如下: