沒有JavaScript，你的網(wǎng)頁會(huì)是啥樣？
現(xiàn)在很多網(wǎng)站使用了JavaScript，它讓交互響應(yīng)更加靈敏，也增強(qiáng)了所謂的“用戶體驗(yàn)”。盡管它是一門很簡單的程序設(shè)計(jì)語言，但由于現(xiàn)在Web應(yīng)用程序越來越多，JavaScript的地位也變得越來越重要。不過，在享受JavaScript和衍生的庫的同時(shí)，你想過如果沒有JavaScript，你現(xiàn)在的網(wǎng)頁看起來是什么樣子？
我的博客使用了jQuery的一些功能，顯然它是基于JavaScript的。我關(guān)掉了瀏覽器的JavaScript引擎，打開博客，幸好沒有變形——廣告無法顯示，這不是我能控制的。
“文章”菜單不能顯示，因?yàn)槲沂峭ㄟ^jQuery注冊(cè)hover事件實(shí)現(xiàn)彈出的；“回頂部”的按鈕也無效了，當(dāng)然這影響不大。
在完成應(yīng)用JavaScript之前（或者之后？），我們應(yīng)該思考一下如何聰明地使用JavaScript ，從而確保不會(huì)因?yàn)樗木壒适谷魏稳藷o法訪問你的網(wǎng)站。這就是非干擾性的JavaScript背后的核心理念。
為了更好地理解什么是非干擾性JavaScript 以及我們?yōu)槭裁葱枰?，我們先來看看在JavaScript 程序設(shè)計(jì)中會(huì)碰到哪些不確定性因素：
◆因?yàn)槟承g覽器不支持JavaScript 或它們的支持的JavaScript 版本太老了，這些瀏覽器可能會(huì)完全忽略你的腳本；
◆即使一個(gè)瀏覽器可以支持JavaScript ，用戶們也可能會(huì)出于安全性的考慮而禁用 JavaScript ，用戶所在公司的防火墻也可能會(huì)通過移除所有的 <script> 標(biāo)簽來阻止 JavaScript 的運(yùn)行；
◆即便一個(gè)瀏覽器支持JavaScript ，它也可能不理解DOM規(guī)范中的某些瀏覽器專有特性（IE經(jīng)常被認(rèn)為是這方面的禍?zhǔn)祝?，這會(huì)導(dǎo)致該瀏覽器無法理解你的部分腳本；
◆即便是腳本能得到正確地解釋，它也可能要依賴于非常復(fù)雜的HTML ，并且/或者依賴于可能以無法預(yù)測(cè)的方式被改變的HTML ；
◆就算JavaScript腳本運(yùn)行在完美無誤的HTML中，你也不能確定你的用戶將會(huì)用什么類型的輸入設(shè)備。許多腳本只有在用戶使用鼠標(biāo)時(shí)才會(huì)生效，而對(duì)那些使用鍵盤的人群則沒有反應(yīng)（許多殘障用戶無法使用鼠標(biāo)，而且有的人偏偏喜歡用鍵盤）；
◆即使你的腳本回避了上述的所有風(fēng)險(xiǎn)而且運(yùn)行得很好，其他的程序員們也有可能讀不懂它。
如果網(wǎng)頁中的關(guān)鍵內(nèi)容是由JavaScript控制的，一部分用戶將不能正常的使用你的網(wǎng)站，或者丟失重要訊息。
如果某些內(nèi)容由JavaScript控制，在 JavaScript 無法正常工作的時(shí)候，我的方法是通過 CSS 設(shè)定好樣式，讓他看起來是正常的。
這里有一個(gè)jQuery滑動(dòng)導(dǎo)航條的例子（Demo1, Demo2），Demo1乍看之下是正常的，但如果關(guān)閉了JavaScript，所有的項(xiàng)目會(huì)擠到一團(tuán)，因?yàn)樗械牧斜眄?xiàng)都是絕對(duì)定位的，需要由JavaScript運(yùn)行時(shí)動(dòng)態(tài)確定高度；Demo2中只做出了簡單的修正，使得它在JavaScript運(yùn)行前保持相對(duì)定位，就能使它在沒有 JavaScript的狀況下表現(xiàn)正常。
這個(gè)例子盡管簡單，但有時(shí)候我們就是為了方便（也是假定了JavaScript永遠(yuǎn)工作）讓JavaScript參與重要元素的排版，這是要盡量避免的。
原文鏈接：http://beamnote.com/2010/without-javascript.html
【編輯推薦】
