JavaScript 最佳實務

JavaScript 最佳實務
JavaScript 最佳實務

一：簡介

JavaScript已經成為web中不可或缺的一部分、相信絕大多數web如果禁用JavaScript、結果可想而知、甚至嚴重的直接導致整個網站癱瘓。

但是個人覺得JavaScript已經是某些情況下必不可少的一部分了、JavaScript最佳實務也成為了在應用JavaScript的理想與現實之中尋找一種平衡。

最佳實務的一些原則可以協助我們理解JavaScript的精髓、協助我們完善自己的程式設計和提高其健壯性。

二：關鍵之處

JavaScript與DOM結合是一種非常強大的組合、可以輕而易舉改變網頁的行為與顯示、怎麼樣才是最佳實務？下面是最佳實務的一些準則。

1.是否需要使用JavaScript：

當想使用JavaScript來改變一個網頁的行為時、首先要想到的是是否有必要這樣做。而不是人云亦云的跟風。

2.漸進增強（progressive enhancement）：

從核心部分開始、即從內容開始、根據內容使用標記實現良好的結構；再逐步加強這些內容。增強工作既可以使用CSS改變呈現效果、也可以使用DOM添加各種行為、避免使用DOM添加核心內容！應該在開始就讓內容成為文檔編寫時期的核心組成部分。

3.平穩退化（graceful degradation）：

在正確使用JavaScript指令碼的情況下、即使瀏覽器不支援JavaScript（這種現象幾乎絕跡）或者在使用者禁用瀏覽器執行JavaScript的功能也能正常瀏覽網站。也就意味著JavaScript是為了增強頁面訪問效果或者顯示效果而存在、不參與核心功能（防止JavaScript被禁而廢）。

4.分離JavaScript：

把網頁的結構和內容與JavaScript指令碼的動作行為分開、Java中常常強調的解耦思想類似。將相互間的影響降到最低。比如連結上添加單擊事件、這其實已經是把網頁的結構內容與JavaScript指令碼糅合在一起了。我們可以將其分離開來、但是現實中很少有這樣做、一是代碼可讀性下降、另一個是使得編碼變得複雜、需要一些額外編碼來實現、這就是一種理想與現實的差距、也可能是自己水平不夠的原因。

5.向後相容

確保網頁中使用的JavaScript在老的瀏覽器中也能正常執行、不同瀏覽器之間或者瀏覽器版本之間的相容性一直是一個讓人很頭疼的問題、但是隨著技術的進步、這種現象也在逐漸好轉。實現這一原則需要我們在使用JavaScript時需要考慮到其在各個瀏覽器、各個版本之間的相容問題。

6.效能考慮

確定指令碼執行的效能最優。比如儘可能的減少DOM訪問的次數、合并可以歸類的JavaScript指令碼、壓縮指令碼（加快用戶端下載數度、可以使用Uglify或者線上的JS壓縮）等。

三：改進前章執行個體

可以參照最佳實務來完善前面圖片庫的執行個體、不再一一敘述、給出完善後showPicture.js壓縮前後的代碼做個參考、完整代碼在github上。

壓縮前：

/** * Attach onclick even on a link tag. */function prepareGallery () {if (!document.getElementById) {return false}if (!document.getElementsByTagName) {return false}var imageGalleryNode = document.getElementById('imageGallery');if (!imageGalleryNode) {return false}var links = imageGalleryNode.getElementsByTagName("a");if (links.length > 0) {for (var i = links.length - 1; i >= 0; i--) {links[i].onclick = function (){/*if show picture work then stop a link active.a link will not work if return false. */return !showPicture(this);}}}}/** * Show the clicked picture. * which picture is clicked.[description] * @return boolean if something is unexpected . */function showPicture(whichPicture){var placeholder = document.getElementById('placeholder');if (!placeholder) {return false}if (placeholder.nodeName != "IMG") {return false}var source = whichPicture.getAttribute('href');placeholder.setAttribute('src', source);var description = document.getElementById('description');if (description) {var text = whichPicture.getAttribute('title') ? whichPicture.getAttribute('title') : "";var firstChildNode = description.firstChild;if (firstChildNode.nodeType == 3) {firstChildNode.nodeValue = text;}}return true;}/** * Multiple execute window.onload; */function addEvent(fun){var oldFunction = window.onload;if (typeof window.onload != 'function') {window.onload = fun;} else {window.onload = function () {oldFunction();fun();}}}addEvent(prepareGallery);

壓縮後：

function prepareGallery(){if(!document.getElementById||!document.getElementsByTagName)return!1;var a=document.getElementById("imageGallery");if(!a)return!1;a=a.getElementsByTagName("a");if(0