JavaScript 是很好的發(fā)明, 它讓網(wǎng)頁(yè)動(dòng)了起來(lái). 大家都喜歡這樣的那樣的頁(yè)面效果, 所以 JS 的使用日益廣泛, 甚至被依賴. 但你務(wù)必提醒自己, 絕大多數(shù)的瀏覽器都支持 JavaScript, 但不是全部.

上一篇文章中我簡(jiǎn)單地講解了如何使用 JavaScript 實(shí)現(xiàn)滑動(dòng)置頂效果. 那段調(diào)用 JS 代碼的 HTML 片段曾經(jīng)被我修改過(guò)兩次. 這次我們將會(huì)以它為例, 講解為什么不能完全依賴 JavaScript 并如何進(jìn)行處理.

1. 最初版本

清晰, 簡(jiǎn)潔, 也可以實(shí)現(xiàn)滑動(dòng)效果

1

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

因?yàn)椴僮鞯膭?dòng)作會(huì)被暴露在瀏覽器的狀態(tài)欄中, 如果函數(shù)很多參數(shù)或者很多動(dòng)作, 那么就會(huì)看到很長(zhǎng)的一串, 看起來(lái)別扭而不美觀.

2. 修改版本 1

于是我將代碼修改了一下, 將真正被調(diào)用的 JS 方法隱藏起來(lái), 代碼如下:

1

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

解決了上一個(gè)問(wèn)題, 狀態(tài)欄只會(huì)顯示 "javascript:void(0);" 字樣, 而同樣存在滑動(dòng)效果. 處理流程如下:

從流程中, 我們可以看到另一個(gè)問(wèn)題, 兩個(gè)事件都是 JavaScript 動(dòng)作, 如果 JS 被禁用或者瀏覽器不支持, 那么點(diǎn)擊按鈕后一點(diǎn)反應(yīng)都沒(méi)有.

3. 修改版本 2

為了兼顧沒(méi)有 JavaScript 支持的瀏覽器, 我又修改了一下代碼:

1

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

我們得了解一下鏈接的被點(diǎn)擊后的處理順序, 首先 onclick 事件會(huì)被觸發(fā), 接著是轉(zhuǎn)跳到 href 指向的鏈接, 我在 onclick 的最后加上 return false; 就是為了中斷處理, 不轉(zhuǎn)往 href 指定鏈接處.

如果瀏覽器支持 JavaScript, 滑動(dòng)到頂部后中斷處理; 如果瀏覽器不支持 JavaScript, 則不會(huì)執(zhí)行 onclick 方法, 直接轉(zhuǎn)跳鏈接的錨回到頂部 (沒(méi)有滑動(dòng)效果, 但卻是能回到頂部). 處理流程如下:

現(xiàn)在已照顧得算比較周全了, 但還是不夠完美. 更極限一些其實(shí)我們可以將 JavaScript 代碼和頁(yè)面代碼分離, 在 document ready 或者 onload 的時(shí)候加載頁(yè)面代碼.www.cssfan.cn

4. 未來(lái)版本

我準(zhǔn)備在新的模板中將 JS 完全分離出來(lái), 日后我會(huì)專門(mén)起貼討論這種做法, 包括什么應(yīng)該在 document ready 時(shí)加載,