千萬(wàn)建筑資料下載 →
網(wǎng)易郵箱前端JavaScript編碼規(guī)范
1基礎(chǔ)規(guī)范部分在多年開(kāi)發(fā)郵箱webmail過(guò)程中，網(wǎng)易郵箱前端團(tuán)隊(duì)積累了不少心得體會(huì)，我們開(kāi)發(fā)了很多基礎(chǔ)js庫(kù)，實(shí)現(xiàn)了大量前端效果組件，開(kāi)發(fā)了成熟的opoa框架以及api組件，在此向大家做一些分享。今天想先和大家聊聊javascript的編碼規(guī)范。
總所周知，javascript是一種語(yǔ)法極其靈活的語(yǔ)言。javascript在設(shè)計(jì)之初就只是用來(lái)為HTML添加動(dòng)態(tài)效果的。由于他動(dòng)態(tài)，弱類型等特性，以及不同瀏覽器的兼容性問(wèn)題，造成了開(kāi)發(fā)成本要比java等語(yǔ)言要高很多。正因?yàn)樗`活，我們制定了適用于網(wǎng)易郵箱的javascript編碼規(guī)范，盡可能多的降低由于語(yǔ)法靈活造成的問(wèn)題。以下將具體介紹：
1.變量命名規(guī)范
變量名包括全局變量，局部變量，類變量，函數(shù)參數(shù)等等，他們都屬于這一類�；疽�(guī)范
變量命名都以類型前綴+有意義的單詞組成，單詞首字母都需要大寫(xiě)。例如：sUserName，nCount。
前綴規(guī)范
每個(gè)局部變量都需要有一個(gè)類型前綴，按照類型可以分為：
s：表示字符串。例如：sName，sHtml；
n：表示數(shù)字。例如：nPage，nTotal；
b：表示邏輯。例如：bChecked，bHasLogin；
a：表示數(shù)組。例如：aList，aGroup；
r：表示正則表達(dá)式。例如：rDomain，rEmail；
f：表示函數(shù)。例如：fGetHtml，fInit；
o：表示以上未涉及到的其他對(duì)象，例如：oButton，oDate；
例外情況：
1：作用域不大臨時(shí)變量可以簡(jiǎn)寫(xiě)，比如：str，num，bol，obj，fun，arr。
2：循環(huán)變量可以簡(jiǎn)寫(xiě)，比如：i，j，k等。
為什么需要這樣強(qiáng)制定義變量前綴？正式因?yàn)閖avascript是弱語(yǔ)言造成的。在定義大量變量的時(shí)候，我們需要很明確的知道當(dāng)前變量是什么屬性，如果只通過(guò)普通單詞，是很難區(qū)分的。
例如：
1.vargroup=[];
2.group.name='myGroup';
3./****
4.somecode
5.***/
6.//這時(shí)候你還能一眼就看出來(lái)group是什么嗎？
又例如：
1.varchecked=false;
2.varcheck=function(){
3.
4.}
5./**
6.somecode
7.**/
8.if(check){//可能將checked寫(xiě)成check，由于不能很快速的發(fā)現(xiàn)check是函數(shù)，造成邏
輯錯(cuò)誤
9.
10.}//dosomethingreturntrue;
如果我們寫(xiě)成：
1.varbChecked=false;
2.varfCheck=function(){
3.
4.}
5./**
6.somecode
7.**/
8.if(bChecked){
9.//dosomethingreturntrue;
10.}
11.if(fCheck()){
12.
13.}//dootherthing
就清楚很多了。
全局變量以及常量規(guī)范
網(wǎng)易郵箱前端是基于“類”的概念來(lái)來(lái)開(kāi)發(fā)javascript的（稍后會(huì)專門介紹），每個(gè)類定義都是在一個(gè)閉包函數(shù)中，除了在window下有類的定義而外，只允許有兩種變量定義在全局，那就是全局變量和常量。
全局變量使用g作為前綴，定義在window下。例如gUserName，gLoginTime。
某些作為不允許修改值的變量認(rèn)為是常量，全部字母都大寫(xiě)。例如：COPYRIGHT，PI。常量可以存在于函數(shù)中，也可以存在于全局。
看個(gè)例子就很容易明白為什么要這樣定義了：
1.varuserName="dongua";
2.functioncheckName(userName){
3.
寫(xiě)為
4.
5.}returnwindow.userName==userName//存在函數(shù)參數(shù)userName以及全局變量userName,如果要比較兩個(gè)值是否相等，必需如果使用了全局變量的前綴，就十分清晰了。
2.函數(shù)命名規(guī)范
統(tǒng)一使用動(dòng)詞或者動(dòng)詞[＋名詞]形式，例如：fGetVersion()，fSubmitForm()，fInit()；涉及返回邏輯值的函數(shù)可以使用is，has等表示邏輯的詞語(yǔ)代替動(dòng)詞。
如果有內(nèi)部函數(shù)，使用__f+動(dòng)詞[+名詞]形式，內(nèi)部函數(shù)必需在函數(shù)最后定義。例如：
1.functionfGetNumber(nTotal){
2.
3.
4.
5.
6.
7.
8.function__fAdd(nNumber){nNumber++;}return__fAdd(nTotal);if(nTotal<100){nTotal=100;
9.
10.}
11.}returnnNumber;
12.alert(fGetNumber(30));//alert101
13.對(duì)象方法
對(duì)象方法命名使用
事件響應(yīng)函數(shù)
某事件響應(yīng)函數(shù)命名方式為觸發(fā)事件對(duì)象名＋事件名或者模塊名＋觸發(fā)事件對(duì)象名＋事件名，例如：fDivClick()，fAddressSubmitButtonClick()
3.其他注意事項(xiàng)
1：所有命名最好使用英語(yǔ)表示。
2：所有變量名應(yīng)該明確而必要，盡量避免不必要的容易混淆的縮寫(xiě)。
3：netease.events.mouse.Handler，而不是
netease.events.mouse.MouseEventHandler。
4：對(duì)應(yīng)的方法應(yīng)該使用對(duì)應(yīng)的動(dòng)詞，例如：get/set,add/remove,create/destroy,start/stop,insert/delete,begin/end。
5：應(yīng)該避免雙重否定意義的變量，例如：bIsNotError,bIsNotFound，不可取。6：變量應(yīng)該在最小的范圍內(nèi)定義，并盡可能的保持最少的活動(dòng)時(shí)間。
7：循環(huán)變量最好在循環(huán)中定義。例如for(vari=0,m=10;i<m;i++){dosomething}。8：盡量避免復(fù)雜的條件語(yǔ)句，可以使用臨時(shí)的boolean變量代替。
9：一定要避免在條件中執(zhí)行語(yǔ)句，例如：if((i=3)>2){}，不可取。
10：不要在代碼中重復(fù)使用相同意義的數(shù)字，用一個(gè)變量代替，比如nTotal=100;num=total。動(dòng)詞[+名詞]形式；例如getEmail
2類規(guī)范部分網(wǎng)易郵箱頁(yè)面在window只允許定義三種變量——1：全局變量；2：常量；3：類。任何業(yè)務(wù)邏輯都需要通過(guò)類方法或者示例方法實(shí)現(xiàn)。前兩種變量在之前文章中已經(jīng)介紹，在此不再累述，接下來(lái)詳細(xì)介紹類定義和使用的規(guī)范。
定義類是通過(guò)一個(gè)閉包完成的：
1.(function(){
2.3.
4.
5.
6.
7.
8.
9.10.
11.12.
13.14.
15.
16.17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.28.
29.
30.
31.
32.
33.functionfImageSetName(sName){}//可以認(rèn)為是jQuery的extend方法//第三步：定義類屬性/方法定義$.Object.extend(Image,{_language:null,getSize});//第四步：定義實(shí)例屬性/方法定義nameurlextwidthheightsetNamegetNameinit});//第五步：方法實(shí)現(xiàn)functionfImageGetSize(nWidth,nHeight){returnnWidth*nHeight;:null,:null,:null,:0,:0,:fImageSetName,:fImageGetName,$.Object.extend(Image.prototype,{//內(nèi)部屬性//$是網(wǎng)易郵箱基礎(chǔ)庫(kù)“base”的引用稍后會(huì)介紹//第二步：定義類�？梢哉J(rèn)為返回了一個(gè)類定義function(){}，并在window下定義一個(gè)Image類varImage=$.createClass("Image");//第一步：引入存在的類。引入support類varSupport=window.Support;:fImageGetSize:fImageInit
網(wǎng)易郵箱前端JAVASCRIPT編碼規(guī)范.doc下載34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.}}}varoImage=this;oImage.name=sName;functionfImageGetName(){varoImage=this;returnoImage.name;functionfImageInit(sUrl){varoImage=this;oImage.url=sUrl;oImage.ext=Support.getExt(sUrl);oImage.width=Support.getWidth(sUrl);oImage.height=Support.getHeight(sUrl);
51.})();我們可以看到，這個(gè)閉包完成了以下幾件事情：
1.引入這個(gè)類需要用到的其他類。
2.定義這個(gè)類。
3.定義類的屬性和方法。
4.定義類的實(shí)例屬性和方法。
5.類和實(shí)例方法的實(shí)現(xiàn)。
在命名上，我們遵循了一下規(guī)則：
1.類名首個(gè)字母必需大寫(xiě)，例如Image，Support等。
2.屬性名需要是有意義的名詞，首字母小寫(xiě)，例如oImage.width。
3.方法名需要是有意義的動(dòng)詞[+名詞]，首字母小寫(xiě)，例如Support.getWidth
4.如果不希望被其他方法調(diào)用，需要在屬性或者方法名前面加“_”，例如
oImage._language
5.如果不希望被子類調(diào)用，需要在屬性或者方法名前加“_”，例如oImage.__fire()這里需要特別說(shuō)明以下幾點(diǎn)：
1.方法的定義不是通過(guò)匿名函數(shù)來(lái)定義，而是集中在類定義的下面來(lái)實(shí)現(xiàn)。這樣的好處是能在最開(kāi)始將類的屬性方法定義都羅列出來(lái)，便于通過(guò)源碼查看到對(duì)應(yīng)屬性和方法。
2.在類/實(shí)例方法中，使用局部變量that代替this。this不是一個(gè)好的玩意兒，一不小心就會(huì)被this搞暈。使用局部變量能夠盡量避免這樣的問(wèn)題，也能夠在壓縮混淆的時(shí)候效果更好。
3.在實(shí)際開(kāi)發(fā)過(guò)程中，每個(gè)類定義都單獨(dú)一個(gè)js實(shí)現(xiàn)。
除了類的定義，閉包不實(shí)現(xiàn)任何其他邏輯。使用閉包能夠?qū)⒑芏嘧兞考s束在閉包作用域中，并且能夠在壓縮混淆中效果更好，除此之外，使用閉包定義類，在之后將介紹到的動(dòng)態(tài)加載成為了一件十分容易的事情，稍后會(huì)和大家一起分享。
久久建筑網(wǎng)m.brightonrobinsfc.com提供大量：建筑圖紙、施工方案、工程書(shū)籍、建筑論文、合同表格、標(biāo)準(zhǔn)規(guī)范、CAD圖紙等內(nèi)容。