網(wǎng)易郵箱前端JavaScript編碼規(guī)范

1、網(wǎng)易郵箱前端JavaScript編碼規(guī)范1 基礎(chǔ)規(guī)范部分在多年開發(fā)郵箱webmail過程中，網(wǎng)易郵箱前端團隊積累了不少心得體會，我們開發(fā)了很多基礎(chǔ)js庫，實現(xiàn)了大量前端效果組件，開發(fā)了成熟的opoa框架以及api組件，在此向大家做一些分享。今天想先和大家聊聊javascript的編碼規(guī)范?？偹苤琷avascript是一種語法極其靈活的語言。javascript在設(shè)計之初就只是用來為HTML添加動態(tài)效果的。由于他動態(tài)，弱類型等特性，以及不同瀏覽器的兼容性問題，造成了開發(fā)成本要比java等語言要高很多。正因為它太靈活，我們制定了適用于網(wǎng)易郵箱的javascript編碼規(guī)范，盡可能多的降低由于語

2、法靈活造成的問題。以下將具體介紹：1. 變量命名規(guī)范變量名包括全局變量，局部變量，類變量，函數(shù)參數(shù)等等，他們都屬于這一類?；疽?guī)范變量命名都以類型前綴+有意義的單詞組成，單詞首字母都需要大寫。例如：sUserName，nCount。前綴規(guī)范每個局部變量都需要有一個類型前綴，按照類型可以分為：s：表示字符串。例如：sName，sHtml；n：表示數(shù)字。例如：nPage，nTotal；b：表示邏輯。例如：bChecked，bHasLogin；a：表示數(shù)組。例如：aList，aGroup；r：表示正則表達式。例如：rDomain，rEmail；f：表示函數(shù)。例如：fGetHtml，fInit；o：表

3、示以上未涉及到的其他對象，例如：oButton，oDate；例外情況：1：作用域不大臨時變量可以簡寫，比如：str，num，bol，obj，fun，arr。2：循環(huán)變量可以簡寫，比如：i，j，k等。為什么需要這樣強制定義變量前綴？正式因為javascript是弱語言造成的。在定義大量變量的時候，我們需要很明確的知道當(dāng)前變量是什么屬性，如果只通過普通單詞，是很難區(qū)分的。例如：1. var group =    2.  = 'myGroup'   3. /*  &

4、#160;4. some code   5. */ 6. /這時候你還能一眼就看出來group是什么嗎？ 又例如：1. var checked = false;   2. var check = function()   3.     return true;   4.    5. /*   6. some code 

5、  7. */ 8. if(check)/可能將checked寫成check，由于不能很快速的發(fā)現(xiàn)check是函數(shù)，造成邏輯錯誤   9.     /do some thing   10.  如果我們寫成：1. var bChecked = false;   2. var fCheck = function()   3.     

6、;return true;   4.    5. /*   6. some code   7. */ 8. if(bChecked)   9.     / do some thing   10.    11. if(fCheck()   12.     / do other

7、60;thing   13.  就清楚很多了。全局變量以及常量規(guī)范網(wǎng)易郵箱前端是基于“類”的概念來來開發(fā)javascript的（稍后會專門介紹），每個類定義都是在一個閉包函數(shù)中，除了在window下有類的定義而外，只允許有兩種變量定義在全局，那就是全局變量和常量。全局變量使用g作為前綴，定義在window下。例如gUserName，gLoginTime。某些作為不允許修改值的變量認(rèn)為是常量，全部字母都大寫。例如：COPYRIGHT，PI。常量可以存在于函數(shù)中，也可以存在于全局?？磦€例子就 很容易明白為什么要這樣定義了：1. var userName

8、60;= "dongua"   2. function checkName(userName)   3.     /存在函數(shù)參數(shù)userName以及全局變量userName,如果要比較兩個值是否相等，必需寫為   4.     return window.userName = userName   5.  如果使用了全局變量的前綴，就十分清晰了。2. 函數(shù)命

9、名規(guī)范統(tǒng)一使用動詞或者動詞名詞形式，例如：fGetVersion()，fSubmitForm()，fInit()；涉及返回邏輯值的函數(shù)可以使用is，has等表示邏輯的詞語代替動詞。如果有內(nèi)部函數(shù)，使用_f+動詞+名詞形式，內(nèi)部函數(shù)必需在函數(shù)最后定義。例如：1. function fGetNumber(nTotal)   2.     if(nTotal<100)   3.   nTotal = 100;   4.   &

10、#160;   5.  return _fAdd(nTotal);     6.     7.  function _fAdd(nNumber)   8.   nNumber+;   9.   return nNumber;   10.     11.    12. alert(fGetNumber(30);

11、/alert 101   13.  對象方法對象方法命名使用 動詞+名詞形式；例如 getEmail事件響應(yīng)函數(shù)某事件響應(yīng)函數(shù)命名方式為觸發(fā)事件對象名事件名或者模塊名觸發(fā)事件對象名事件名，例如：fDivClick()，fAddressSubmitButtonClick()3.其他注意事項1：所有命名最好使用英語表示。2：所有變量名應(yīng)該明確而必要，盡量避免不必要的容易混淆的縮寫。3：netease.events.mouse.Handler，而不是 netease.events.mouse.MouseEventHandler。4：對應(yīng)的方法應(yīng)該使用對應(yīng)的動詞

12、，例如：get/set, add/remove, create/destroy, start/stop, insert/delete, begin/end。5：應(yīng)該避免雙重否定意義的變量，例如：bIsNotError, bIsNotFound，不可取。6：變量應(yīng)該在最小的范圍內(nèi)定義，并盡可能的保持最少的活動時間。7：循環(huán)變量最好在循環(huán)中定義。例如for(var i=0,m=10;i<m;i+) do something。8：盡量避免復(fù)雜的條件語句，可以使用臨時的boolean變量代替。9：一定要避免在條件中執(zhí)行語句，例如：if(i=3)>2)，不可取。10：不要在代碼中重復(fù)使用相同

13、意義的數(shù)字，用一個變量代替，比如 nTotal=100; num= total。2 類規(guī)范部分網(wǎng)易郵箱頁面在window只允許定義三種變量1：全局變量；2：常量；3：類。任何業(yè)務(wù)邏輯都需要通過類方法或者示例方法實現(xiàn)。前兩種變量在之前文章中已經(jīng)介紹，在此不再累述，接下來詳細(xì)介紹類定義和使用的規(guī)范。定義類是通過一個閉包完成的：1. (function()   2.   /第一步：引入存在的類。引入support類   3.   var Support = window.Support;&#

14、160;   4.     5.   /$是網(wǎng)易郵箱基礎(chǔ)庫“base”的引用稍后會介紹   6.   /第二步：定義類?？梢哉J(rèn)為返回了一個類定義 function()，并在window下定義一個Image類   7.   var Image = $.createClass("Image");    8.     9.  

15、; /可以認(rèn)為是jQuery的extend方法    10.     11.   /第三步：定義類屬性/方法定義   12.   $.Object.extend(Image,   13.    _language : null,   /內(nèi)部屬性   14.    getSize  : fI

16、mageGetSize   15.   );   16.   /第四步：定義實例屬性/方法定義   17.   $.Object.extend(Itotype,   18.    name  : null,   19.    url   : null,   20. 

17、0;  ext   : null,   21.    width  : 0,   22.    height  : 0,   23.    setName  : fImageSetName,   24.    getName  :

18、 fImageGetName,   25.    init  : fImageInit   26.   );   27.   /第五步：方法實現(xiàn)    28.     29.   function fImageGetSize(nWidth,nHeight)   30.    return&

19、#160;nWidth*nHeight;   31.       32.     33.   function fImageSetName(sName)   34.    var oImage = this;   35.    oI = sName;   36.  

20、60;    37.     38.   function fImageGetName()   39.    var oImage = this;   40.    return oI;   41.       42.     43.  &#

21、160;function fImageInit(sUrl)   44.    var oImage = this;   45.    oImage.url = sUrl;   46.    oImage.ext = Support.getExt(sUrl);   47.    oImage.width = Support.getWidth(sUrl);   48.    oImage.height = Support.getHeigh