天天看點

js開發規範

1、保證代碼壓縮後不出錯

js開發規範

2、保證代碼能通過特定IDE的自動格式化功能

js開發規範

3、使用标準的文檔注釋

js開發規範

4、使用規範有意義的變量名

使用規範有意義的變量名可以提高代碼的可讀性,作為大項目開發成員,自己寫的代碼不僅僅要讓别人容易看懂。開發大項目,其實每個人寫的代碼量可能都比較大,規範命名,日後自己看回自己的代碼也顯的清晰易懂,比如日後系統更新或新增功能,修改起代碼來也輕松多了。如果到頭發現自己當初寫的代碼現在看不太懂了,那還真是天大的笑話了。

var li = document.getElementsByTagName('li')

var lis = document.getElementsByTagName('li')

js開發規範

5、不使用生偏文法

JavaScript作為一門動态腳本語言,靈活性既是優點也是缺點,衆所周知,動态語言不同層次開發人員對實作同樣一個功能寫出來的代碼在規範或文法上會存在較大的差别。不管怎麼樣,規範編碼少搞怪,不把簡單問題複雜化,不違反代碼易讀性原則才是大家應該做的。

比如這語句:typeof(b) == 'string' && alert(b)應該改為:if (typeof(b) == 'string') alert(b),像前面那種用法,利用了&&運算符解析機制:如果檢測到&&前語句傳回false就不再檢測後面語句,在代碼優化方面也有提到把最可能出現的情況首先判斷,像這種寫法如果條件少還好,如果條件較多而且語句也長,那代碼可讀性就相當差。

又比如:+function(a){var p = a;}( 'a')應該改為:(function(a){var p = a;})( 'a'),其實function前面的+号與包含function的()括号作用是一樣的,都是起運算優先作用,後者是常見且容易看明白的防止變量污染的做法,比如好些流行JavaScript架構就是采用後面這種方式。

再說個降低代碼可讀性的例子,如:function getPostionTxt(type){return type == 2 ? "野外" : (type == 3 ? "商城" : (type == 4 ? "副本" : null));}應該改成:function getPostionTxt(type){var typeData={"2":"野外","3":"商城","4":"副本"};if (typeData[type]) return typeData[type]; else return null;}。如果type是從0開始不間斷的整數,那麼直接使用數組還更簡單,這種結果看起來就清晰多了,看到前面那種多層三元表達式嵌套頭不暈嗎。

6、不在語句非指派地方出生中文

語句中不應該出現中文我想一般人都知道,雖然這樣做不影響程式運作,但是顯然有背行業标準要求,當然我們也不是在使用“易語言”做開發。關于這一個問題,我本來不想把它拿出來說的,但我确實遇到有人這樣做的,也不知道是不是因為他的英語實在太爛了,至少還可以用拼音吧,另外尋求翻譯工具幫忙也不錯的選擇。我舉例如下,像以下寫法出現在教學中倒還可以了解:

this.user['名字'] = '張三' 或者 this.user.名字 = '張三'

7、明确定義函數固定數量的參數

固定數量參數的函數内部不使用arguments去擷取參數,因為這樣,你定義的方法如果包含較多的腳本,就不能一眼看到這個方法接受些什麼參數以及參數的個數是多少。比如像下面:

var $ = function(){return document.getElementById(arguments[0]);}應該改成:var $ = function(elemID){return document.getElementById(elemID);}

8、不必熱衷動态事件綁定

雖然知道事件可以動态綁定,比如使用addEventListener或者使用jQuery的bind方法,也知道采用動态事件綁定可以讓XHTML更幹淨,但是一般情況下我還是建議直接把事件寫在DOM節點上,我認為這樣可以使代碼變得更容易維護,因為這樣做,我們在檢視源代碼的時候就可以容易地知道什麼Element綁定了什麼方法,簡單說這樣更容易知道一個按鈕或連結點選時調了什麼方法腳本。

js開發規範

9、降低代碼與XHTML的耦合性

不要過于依賴DOM的一些内容特征來調用不同的腳本代碼,而應該定義不同功能的方法,然後在DOM上調用,這樣不管DOM是按鈕還是連結,方法的調用都是一樣的,比如像下面的實作顯然會存在問題:

function myBtnClick(obj)

{

 if (/确定/.test(obj.innerHTML)) 

  alert('OK');

 else if (/取消/.test(obj.innerHTML)) 

  alert('Cancel');

 else 

  alert('Other');

}

<a herf="javascript:;" onclick="myBtnClick(this)">确定</a><a herf="javascript:;" onclick="myBtnClick(this)">取消</a>

上面例子其實在一個函數内處理了兩件事情,應該分成兩個函數,像上面的寫法,如果把連結換成按鈕,比如改成這樣:<input type="button" onclick="myBtnClick(this)" value="确定" />,那麼myBtnClick函數内部的obj.innerHTML就出問題了,因為此時應該obj.value才對,另外如果把按鈕名稱由中文改為英文也會出問題,是以這種做法問題太多了。

10、一個函數應該傳回統一的資料類型

因為JavaScrip是弱類型的,在編寫函數的時候有些人對于傳回類型的處理顯得比較随便,我覺得應該像強類型語言那樣傳回,看看下面的兩個例子:

function getUserName(userID)

 if (data[userID])

  return data[userID];

 else

  return false;

應該改為:

  return "";

這個方法如果在C#中定義,我們知道它準備傳回的資料類型應該是字元串,是以如果沒有找到這個資料我們就應該傳回空的字元串,而不是傳回布爾值或其它不合适的類型。這并沒有影響到函數将來的調用,因為傳回的空字元串在邏輯判斷上可被認作“非”,即與false一樣,除非我們使用全等于“===”或typeof進行判斷。

11、規範定義JSON對象,補全雙引号

js開發規範

12、不在檔案中留下未來确定不再使用的代碼片段

當代碼調整或重構後,之前編寫的不再使用的代碼應該及時删除,如果認為這些代碼還有一定利用價值可以把它們剪切到臨時檔案中。留在項目中不僅增加了檔案體積,這對團隊其它成員甚至自己都起到一定幹擾作用,怕将來自己看回代碼都搞不懂這方法是幹什麼的,是否有使用過。當然可以用文檔注釋标簽@deprecated把這個方法辨別為不推薦的。

13、不重複定義其他團隊成員已經實作的方法

對于大型項目,一般會有部分開發成員實作一些通用方法,而另外一些開發成員則要去熟悉這些通用方法,然後在自己編寫子產品遇到有調用的需要就直接調用,而不是像有些開發者喜歡“單幹”,根本不會閱讀這些通用方法文檔,在自己代碼中又寫了一遍實作,這不僅産生多餘的代碼量,當然也是會影響團隊開發效率的,這是沒有團隊合作精神的表現,是重複造輪子的悲劇。

比如在通用類檔案Common.js有定義function $(elemID){return document.getElementById(elemID)}那麼就不應該在Mail.js中再次出現這一功能函數的重複定義,對于一些複雜的方法更應該如此。

14、調用合适的方法

當有幾個方法都可以實作同類功能的時候,我們還是要根據場景選擇使用最合适的方法。下面拿jQuery架構的兩個AJAX方法來說明。如果确定伺服器傳回的資料是JSON應該直接使用$.getJSON,而不是使用$.get得到資料再用eval函數轉成JSON對象。如果因為本次請求要傳輸大量的資料而不得以使用$.post也應該采用指定傳回資料類型(設定dataType參數)的做法。如果使用$.getJSON,在代碼中我們一眼能看出本次請求伺服器傳回的是JSON。

溫馨提示:jQuery1.4後,如果伺服器有設定資料輸出的ContentType,比如ASP.NET C#設定 Response.ContentType = "application/json",那麼$.get将與$.getJSON的使用沒有什麼差別。

15、使用合适的控件存儲合适的資料

曾發現有人利用DIV來儲存JSON資料,以待頁面下載下傳後将來使用,像這樣:<div id="json">{ "name":"Tom"}</div>,顯然這個DIV不是用來界面顯示的,如果非要這樣做,達到使用HTML檔案進行資料緩存的作用,至少改成用隐藏域來存這資料更合理,比如改成:<input type="hidden" value=" { "name":"Tom"}" />。

其實也可以利用window對象來儲存一些資料,像上面的例子,我們可以在AJAX請求頁直接包含這樣的腳本塊:<script>window.userData = { "name":"Tom"};</script>,當在AJAX請求回調函數中執行完$( "#MyDiv ").html(data)後,在window上就馬上有了這一變量。如果采用第一種方法,将不可避免eval(document.getElementById("UserData").innerHTML)。如果在window對象存放大量資料的話,這些資料不用時要及時手動清理它們,它們是要等浏覽器重新整理或重新開機後才會消失的,這就會增加記憶體開銷。

16、永遠不要忽略代碼優化工作

代碼最優化是每個程式員應該努力達到的目标,也應該成為程式員永遠的追求。寫代碼的時候,不應該急着把功能實作出來,要想一下如何寫代碼,代碼的執行效率才是較好的。

舉個例子:假設有定義getElementById的快捷方法functoin $(elemID){return document.getElementById(elemID)},那麼有人可能會寫出這樣的代碼$("MyDiv").parentNode.removeChild($("MyDiv")),其實這裡執行了兩次getElementById DOM查找,如果改成這樣将更好:var myDiv = $("MyDiv"); myDiv.parentNode.removeChild(myDiv)。還好getElementById的DOM查找算比較快,如果換成getElementsByTagName則更應該注重優化了。jQuery開發團隊也有提醒大家要注意這方面的問題。

當然,代碼優化技巧也是需要個人不斷積累的。曾有朋友跟我說他寫網站背景代碼從來不用考慮優化的,因為他們網站用的是至強四核伺服器,我覺得這是很可笑的。

17、會分析策劃文檔,能用面向對象方法進行接口定義和代碼組織

這一能力對于每一個程式員來說都是非常重要的,這也是決定一個程式員水準高低的一個重要因素。能夠把需求細化并抽象出不同的類,然後有條理地編寫代碼,使代碼結構清晰,可讀性高,代碼易于維護,不至于太過程化而且雜亂無章,這樣才算是一個優秀的程式員。

上一篇: js 規範
下一篇: apache log分析

繼續閱讀