js編程規範

1.單行字符不超過79個字符，如果超過則在符號後換行。並且換行的字符需要兩個縮進表示區分。

 //必須要把符號放在分割前，而不能寫在第二行。而且需要縮進兩個縮進空格長度
 callAfunction(document,element,window,'some string value',true,123,
        navogator);

 //或者這樣
 if(isLeapYear && isFebruary && day == 29 && itsYourBithday &&
    noPlans){
    waitAnotherFourYears();
 } 

2.變量、函數命名

//小寫字母開頭，此後每個單詞開頭大小。  
eg. var isValueNotNumber; 

//變量頭開始是名次，函數名開始爲動詞  
eg. var myNmame = 'jony';function getName(){ /*do something...*/};

//常量用大寫以及下劃線區分
eg. var MAX_COUNT =10

//構造函數以大駝峯方式申明
function Person(){/* do something*/}

3.空行的學問

 //在方法之間  

 //多行或者單行註釋之前

 //在方法內的邏輯片段之間加入空行 命名方法採用小駝峯方法。

4.null以及undefined的用法

不要使用undefined和null跟對象作比較，並且申明變量但是不馬上賦值的情況下，應該如下設置

var person = null  //typeof person => object(null是對象);

而不是

var person  //typeof  person => undefined.

//並且全局不要使用undefined，這樣的話如果出現undefined只能是一種錯誤，即變量未定義。代碼如下
eg.

var foo,typeof foo ==undefined  //true   
typeof go  ==undefined  //true

5.組件之間的耦合

將css從js中分離，如果需要更改樣式則通過js修改className

不要隨便用innerHTML來在js中寫html.可以採用以下的方式:
a.客戶端模板,模板文件放在服務器上，通過ajax獲取。例如jq的load()方法

     function sprintf(text)
            var i = 1; args =arguments;
            return text.replace(/s%/g,function(){
                return (i < args.length) ? args[i++] : "";}
            )
        }
        sprintf(templateText,'/item/4',"Fourth item");

c.lebars模板框

6.全局變量污染，但全局變量。。
eg.

     var mainJs = {};

     //構造函數首字母大寫
     mainJs.Book = function(title){
         this.title = title;
         this.page =1;
     }

     mainJs.Book.prototype.turnPage = function(direction){
         this.page += direction;
     }

     mainJs.book1 = new mainJs.book('Introduction to sStyle Guidelines');

7.拋出錯誤

function getDivs(element){
    if(element && element.getElementsByTagName){
        return element.getElementsByTagName('div');
    }else{
        throw new Error('getDivs():Argument must be a DOM element.');
    }
}

該函數預期傳入的是一個html element，如果傳入的是其他類型 。則拋出錯誤，養成及時拋出問題的習慣方便他人調試。

Uncaught Error: getDivs():Argument must be a DOM element.(…)

8.不要爲了拋出錯誤而費盡心機的寫try……catch，而是在程序最容易出錯的地方加上即可。

function addClass(element,calssName){

    if(!element || typeof element.className != 'string'){
        throw new Error('addClass():First argument must be a  DOM element.');
    }

    if(typeof calssName != 'string'){
        throw new Error('addClass():Second argument must be a string.')
    }
    element.className += ''+className;
}

這個函數只是提供給元素添加樣式的功能，容易導致嚴重問題的地方在於element是否爲dom元素的監測。
所以只需這樣就好

function addClass(element,calssName){

    if(!element || typeof element.className != 'string'){
        throw new Error('addClass():First argument must be a  DOM element.');
    }

    element.className += ''+className;
}

同時如果函數不能確定在何時何地被調用，那麼錯誤檢查是有必要的。
9.錯誤類型

iI. ReferenceError   eg.JSON.stringify(obj1); //期望的對象去不存在
II. TypeError  eg. var a = null;a.toString(); //變量不是期望的類型是拋出
III. SyntaxError //給eval()函數傳遞的代碼有語法錯誤時拋出。
IV.  URIError  給encodeURI()、encodeURIComponent()、decodeURI()或者decodeURIComponent()函數傳遞格式非法的URI字符串時拋出

10.能用局部變量就用局部變量，因爲頻繁使用全局對象會導致函數追蹤原型鏈深處性能損耗。
eg. 下面的代碼裏用到了兩次docuemnt

var btn1 = docuemnt.getElementById('btn1');
btn1.onclick = function(){
    var txt1 = document.getElementByTagName('textare')[0];
    txt1.innerHTML += 'woshi';
}

如果把document保存成局部變量則避免每次執行都需要從當前執行環境追蹤到全局變量上面

var doc  = document;
vart btn1 = doc.getElementById('btn1');
btn1.onclick = function(){
    var txt1 = doc.getElementByTagName('textare')[0];
    txt1.innerHTML +='woshi';
}

如果這段代碼用的次數多，那麼性能的提升就會很明顯。
11.同時如果有對dom操作，可以將dom和js比作兩個小島，每次兩個小島通訊是要交錢的。故此在使用dom的時候儘量把所有邏輯都放在js裏面，儘量讓dom只需要在獲取和操作兩次調用即可。

    var doc = document;
    var btn1 = doc.getElementsByTagName('button')[0];
    var tab1 = doc.getElementById('table1');

    btn1.onclick= function(){
      for(var i=0;i<100;i++){
        tab1.innerHTML += '<tr><td>dian</td><td>wo<td/</tr>';
      }
    }

上面的方法直接循環一百次，雖然tab1是局部變量，但是每點擊一次還是找了一百次，這樣的js和dom通信是需要花很多錢的，下面這樣寫可以省很多錢。

var doc = document;
var btn1 = doc.getElementsByTagName('button')[0];
var tab1 = doc.getElementById('table1');

btn1.onclick= function(){
  var tempStr = '';
  for(var i=0;i<100;i++){
    tempStr += '<tr><td>dian</td><td>wo<td/</tr>';
  }
  tab1.innerHTML += tempStr;

}

12.放大