前面的話

　　本文將詳細介紹JS程式設計風格的幾個要點

鬆耦合

　　當修改一個元件而不需要更改其他元件時，就做到了鬆耦合

　　1、將JS從CSS中抽離：不要使用CSS表示式

//不好的做法
.box{width: expression(document.body.offsetWidth + ’px')}

　　2、將CSS從JS中抽離：通過JS修改CSS樣式時，使用className或classList，不要逐條修改style樣式

//不好的做法一
ele.style.color = 'red';
ele.style.left= '10px';
//不好的做法二
ele.style.cssText ='color:red;left:10px;';
 

.reveal{color:red;left:10px;}
//好的做法一
ele.className += 'reveal';
//好的做法二
ele.classList.add('reveal');

　　3、將JS從HTML中抽離：從JS檔案放入外接檔案中

　　4、將HTML從JS中抽離：不要在innerHTML中拼接DOM結構，而是使用字串模板，如handlerbars

全域性變數

　　建立全域性變數被認為是糟糕的實踐，尤其在團隊開發的大背景下更是問題多多。隨著程式碼量的增長，全域性變數會導致一些非常重要的可維護性難題，全域性變數越多，引入錯誤的概率會變得越高

　　一般而言，有如下三種解決辦法

　　1、零全域性變數

　　實現方法是使用一個立即呼叫函式IIFE並將所有指令碼放置其中

(function(){
  var doc = win.document;
})(window);

　　這種模式的使用場景有限，只要程式碼需要被其他的程式碼所依賴，或者需要在執行中被不斷擴充套件或修改，就不能使用這種方式

　　2、單全域性變數和名稱空間

　　依賴儘可能少的全域性變數，即只建立一個全域性變數，使用單變數模式，如YUI或jQuery

　　單全域性變數，即所建立的這個唯一全域性物件名是獨一無二的，並將所有的功能程式碼都掛載到這個全域性物件上。因此，每個可能的全域性變數，都成為唯一全域性變數的屬性，從而不會建立多個全域性變數

　　名稱空間是簡單的通過全域性物件的單一屬性表示的功能性分組。比如Y.DOM下的所有方法都是和DOM操作相關的，Y.Event下的所有方法都是和事件相關的。常見的約定是每個檔案中都通過新的全域性物件來宣告自己的名稱空間

　　3、使用模組

　　模組是一種通用的功能片段，它並沒有建立新的全域性變數或名稱空間。相反，所有的這些程式碼都存放於一個表示執行一個任務或釋出一個介面的單函式中。可以用一個名稱來表示這個模組，同樣這個模組可以依賴其他模組

事件處理

　　將事件處理相關的程式碼和事件環境耦合在一起，導致可維護性很糟糕

　　1、隔離應用邏輯

　　將應用邏輯從所有事件處理程式中抽離出來是一種最佳實踐，將應用邏輯和事件處理的程式碼拆分開來

//不好的做法
function handleClick(event){
  var popup = document.getElementById('popup');
  popup.style.left = event.clientX + 'px';
  popup.style.top = event.clientY + 'px';
  popup.className = 'reveal';
}
addListener(element,'click',handleClick);

//好的做法
var MyApplication = {
  handleClick: function(event){
    this.showPopup(event);
  },
  showPopup: function(event){
    var popup = document.getElementById('popup');
    popup.style.left = event.clientX + 'px';
    popup.style.top = event.clientY + 'px';
    popup.className = 'reveal';
  }
};
addListener(element,'click',function(event){
  MyApplication.handleClick(event);
});

　　2、不要分發事件物件

　　應用邏輯不應當依賴於event物件來正確完成功能，方法介面應該表明哪些資料是必要的。程式碼不清晰就會導致bug。最好的辦法是讓事件處理程式使用event物件來處理事件，然後拿到所有需要的資料傳給應用邏輯

//改進的做法
var MyApplication = {
  handleClick: function(event){
    this.showPopup(event.clientX,event.clientY);
  },
  showPopup: function(x,y){
    var popup = document.getElementById('popup');
    popup.style.left = x + 'px';
    popup.style.top = y + 'px';
    popup.className = 'reveal';
  }
};
addListener(element,'click',function(event){
  MyApplication.handleClick(event);
});

　　當處理事件時，最好讓事件程式成為接觸到event物件的唯一的函式。事件處理程式應當在進入應用邏輯之前針對event物件執行任何必要的操作，包括阻止事件冒泡，都應當直接包含在事件處理程式中

//改進的做法
var MyApplication = {
  handleClick: function(event){
    event.preventDefault();
    event.stopPropagation();
    this.showPopup(event.clientX,event.clientY);
  },
  showPopup: function(x,y){
    var popup = document.getElementById('popup');
    popup.style.left = x + 'px';
    popup.style.top = y + 'px';
    popup.className = 'reveal';
  }
};
addListener(element,'click',function(event){
  MyApplication.handleClick(event);
});

配置資料

　　程式碼無非是定義一些指令的集合讓計算機來執行。我們常常將資料傳入計算機，由指令對資料進行操作，並最終產生一個結果。當不得不修改資料時，可能會帶來一些不必要的風險。應當將關鍵資料從程式碼中抽離出來 

　　配置資料是指導在應用中寫死的值，且將來可能會被修改，包括如下內容

1、URL
2、需要展現給使用者的字串
3、重複的值
4、配置項
5、任何可能發生變更的值

　　下面是未處理配置資料的做法

//不好的做法
function validate(value){
  if(!value){
    alert('Invalid value');
    location.href="/errors/invalid.php";
  }
}
function toggleSelected(element){
  if(hasClass(element,'selected')){
    removeClass(element,'selected');
  }else{
    addClass(element,'selected');
  }
}

　　下面程式碼中將配置資料儲存在了config物件中，config物件的每個屬性都儲存了一個數據片段，每個屬性名都有字首，用以表明資料的型別(MSG表示展現給使用者的資訊，URL表示網路地址，CSS表示這是一個className)。當然，也可以將整個config物件放到單獨的檔案中，這樣對配置資料的修改可以完全和使用這個資料的程式碼隔離開來

//好的做法
var config = {
  MSG_INVALID_VALUE: 'Invalid value',
  URL_INVALID:'/errors/invalid.php',
  CSS_SELECTED:'selected'
}
function validate(value){
  if(!value){
    alert(config.MSG_INVALID_VALUE);
    location.href=config.URL_INVALID;
  }
}
function toggleSelected(element){
  if(hasClass(element,config.CSS_SELECTED)){
    removeClass(element,config.CSS_SELECTED);
  }else{
    addClass(element,config.CSS_SELECTED);
  }
}

選擇器優化

　　將選擇器選擇到的元素作為物件的靜態屬性集中到一個地方統一管理

initializeElements: function() {
    var eles = app.Eles;
    for (var name in eles) {
        if (eles.hasOwnProperty(name)) {
            this[name] = $(eles[name]);
        }
    }
}

　　下面是一個例子

//好的做法
app.Eles = {
    widgetDiv: ".left-widget div",
    inputResize: '.input-resize',
    hr: '.hr',
    txt: '.input-group-btn button',
    cus: '#paper-type-cus',
    hid: '#hidden',
    mainCon: '#mainCon',
    rulerX: '.ruler-x',
    rulerY: '.ruler-y',
};

函式優化

【提煉函式】

　　在javascript開發中，大部分時間都在與函式打交道，所以希望這些函式有著良好的命名，函式體內包含的邏輯清晰明瞭。如果一個函式過長，不得不加上若干註釋才能讓這個函式顯得易讀一些，那這些函式就很有必要進行重構

　　如果在函式中有一段程式碼可以被獨立出來，那最好把這些程式碼放進另外一個獨立的函式中。這是一種很常見的優化工作，這樣做的好處主要有以下幾點

　　1、避免出現超大函式

　　2、獨立出來的函式有助於程式碼複用

　　3、獨立出來的函式更容易被覆寫

　　4、獨立出來的函式如果擁有一個良好的命名，它本身就起到了註釋的作用

　　比如在一個負責取得使用者資訊的函式裡面，還需要列印跟使用者資訊有關的log，那麼列印log的語句就可以被封裝在一個獨立的函式裡：

var getUserInfo = function(){
    ajax( 'http:// xxx.com/userInfo', function( data ){
        console.log( 'userId: ' + data.userId );
        console.log( 'userName: ' + data.userName );
        console.log( 'nickName: ' + data.nickName );
    });
};
//改成：
var getUserInfo = function(){
    ajax( 'http:// xxx.com/userInfo', function( data ){
        printDetails( data );
    });
};
var printDetails = function( data ){
    console.log( 'userId: ' + data.userId );
    console.log( 'userName: ' + data.userName );
    console.log( 'nickName: ' + data.nickName );
};

【儘量減少引數數量】

　　如果呼叫一個函式時需要傳入多個引數，那這個函式是讓人望而生畏的，必須搞清楚這些引數代表的含義，必須小心翼翼地把它們按照順序傳入該函式。在實際開發中，向函式傳遞引數不可避免，但應該儘量減少函式接收的引數數量。下面舉個非常簡單的示例。有一個畫圖函式draw，它現在只能繪製正方形，接收了3個引數，分別是圖形的width、heigth以及square：

var draw = function(width,height,square){};

　　但實際上正方形的面積是可以通過width和height計算出來的，於是我們可以把引數square從draw函式中去掉：

var draw = function( width, height ){
    var square = width * height;
};

　　假設以後這個draw函式開始支援繪製圓形，需要把引數width和height換成半徑radius，但圖形的面積square始終不應該由客戶傳入，而是應該在draw函式內部，由傳入的引數加上一定的規則計算得來。此時，可以使用策略模式，讓draw函式成為一個支援繪製多種圖形的函式

【傳遞物件引數代替過長的引數列表】 

　　有時候一個函式有可能接收多個引數，而引數的數量越多，函式就越難理解和使用。使用該函式的人首先得搞明白全部引數的含義，在使用的時候，還要小心翼翼，以免少傳了某個引數或者把兩個引數搞反了位置。如果想在第3個引數和第4個引數之中增加一個新的引數，就會涉及許多程式碼的修改，程式碼如下：

var setUserInfo = function( id, name, address, sex, mobile, qq ){
    console.log( 'id= ' + id );
    console.log( 'name= ' +name );
    console.log( 'address= ' + address );
    console.log( 'sex= ' + sex );
    console.log( 'mobile= ' + mobile );
    console.log( 'qq= ' + qq );
};
setUserInfo( 1314, 'xiaohuochai', 'beijing', 'male', '150********', 121631835 );

　　這時可以把引數都放入一個物件內，然後把該物件傳入setUserInfo函式，setUserInfo函式需要的資料可以自行從該物件裡獲取。現在不用再關心引數的數量和順序，只要保證引數對應的key值不變就可以了：

    var setUserInfo = function( obj ){
        console.log( 'id= ' + obj.id );
        console.log( 'name= ' + obj.name );
        console.log( 'address= ' + obj.address );
        console.log( 'sex= ' + obj.sex );
        console.log( 'mobile= ' + obj.mobile );
        console.log( 'qq= ' + obj.qq );
    };
    setUserInfo({
        id: 1314,
        name: 'xiaohuochai',
        address: 'beijing',
        sex: 'male',
        mobile: '150********',
        qq: 121631835
    });

條件優化

【合併條件片段】

　　如果一個函式體內有一些條件分支語句，而這些條件分支語句內部散佈了一些重複的程式碼，那麼就有必要進行合併去重工作。假如有一個分頁函式paging，該函式接收一個引數currPage，currPage表示即將跳轉的頁碼。在跳轉之前，為防止currPage傳入過小或者過大的數字，要手動對它的值進行修正，詳見如下虛擬碼：

var paging = function( currPage ){
    if ( currPage <= 0 ){
        currPage = 0;
        jump( currPage ); // 跳轉
    }else if ( currPage >= totalPage ){
        currPage = totalPage;
        jump( currPage ); // 跳轉
    }else{
        jump( currPage ); // 跳轉
    }
};

　　可以看到，負責跳轉的程式碼jump(currPage)在每個條件分支內都出現了，所以完全可以把這句程式碼獨立出來：

var paging = function( currPage ){
    if ( currPage <= 0 ){
        currPage = 0;
    }else if ( currPage >= totalPage ){
        currPage = totalPage;
    }
    jump( currPage ); // 把jump 函式獨立出來
};

【把條件分支語句提煉成函式】

　　在程式設計中，複雜的條件分支語句是導致程式難以閱讀和理解的重要原因，而且容易導致一個龐大的函式。假設現在有一個需求是編寫一個計算商品價格的getPrice函式，商品的計算只有一個規則：如果當前正處於夏季，那麼全部商品將以8折出售。程式碼如下：

var getPrice = function( price ){
    var date = new Date();
    if ( date.getMonth() >= 6 && date.getMonth() <= 9 ){ // 夏天
        return price * 0.8;
    }
    return price;
};

　　觀察這句程式碼：

date.getMonth()>=6&&date.getMonth()<=9

　　這句程式碼要表達的意思很簡單，就是判斷當前是否正處於夏天（7~10月）。儘管這句程式碼很短小，但程式碼表達的意圖和程式碼自身還存在一些距離，閱讀程式碼的人必須要多花一些精力才能明白它傳達的意圖。其實可以把這句程式碼提煉成一個單獨的函式，既能更準確地表達程式碼的意思，函式名本身又能起到註釋的作用。程式碼如下：

var isSummer = function(){
    var date = new Date();
    return date.getMonth() >= 6 && date.getMonth() <= 9;
};

var getPrice = function( price ){
    if ( isSummer() ){ // 夏天
        return price * 0.8;
    }
    return price;
};

【提前讓函式退出代替巢狀條件分支】

　　許多程式設計師都有這樣一種觀念：“每個函式只能有一個入口和一個出口。”現代程式語言都會限制函式只有一個入口。但關於“函式只有一個出口”，往往會有一些不同的看法。下面這段虛擬碼是遵守“函式只有一個出口的”的典型程式碼：

var del = function( obj ){
    var ret;
    if ( !obj.isReadOnly ){ // 不為只讀的才能被刪除
        if ( obj.isFolder ){ // 如果是資料夾
            ret = deleteFolder( obj );
        }else if ( obj.isFile ){ // 如果是檔案
            ret = deleteFile( obj );
        }
    }
    return ret;
};

　　巢狀的條件分支語句絕對是程式碼維護者的噩夢，對於閱讀程式碼的人來說，巢狀的if、else語句相比平鋪的if、else，在閱讀和理解上更加困難。巢狀的條件分支往往是由一些深信“每個函式只能有一個出口的”程式設計師寫出的。但實際上，如果對函式的剩餘部分不感興趣，那就應該立即退出。引導閱讀者去看一些沒有用的else片段，只會妨礙他們對程式的理解

　　於是可以挑選一些條件分支，在進入這些條件分支之後，就立即讓這個函式退出。要做到這一點，有一個常見的技巧，即在面對一個巢狀的if分支時，可以把外層if表示式進行反轉。重構後的del函式如下：

var del = function( obj ){
    if ( obj.isReadOnly ){ // 反轉if 表示式
        return;
    }
    if ( obj.isFolder ){
        return deleteFolder( obj );
    }
    if ( obj.isFile ){
        return deleteFile( obj );
    }
};

迴圈優化

【合理使用迴圈】

　　在函式體內，如果有些程式碼實際上負責的是一些重複性的工作，那麼合理利用迴圈不僅可以完成同樣的功能，還可以使程式碼量更少。下面有一段建立XHR物件的程式碼，為了簡化示例，只考慮版本9以下的IE瀏覽器，程式碼如下：

var createXHR = function(){
    var xhr;
    try{
        xhr = new ActiveXObject( 'MSXML2.XMLHttp.6.0' );
    }catch(e){
        try{
            xhr = new ActiveXObject( 'MSXML2.XMLHttp.3.0' );
        }catch(e){
            xhr = new ActiveXObject( 'MSXML2.XMLHttp' );
        }
    }
    return xhr;
};
var xhr = createXHR();

　　下面靈活地運用迴圈，可以得到跟上面程式碼一樣的效果：

//下面我們靈活地運用迴圈，可以得到跟上面程式碼一樣的效果：
var createXHR = function(){
    var versions= [ 'MSXML2.XMLHttp.6.0ddd', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp' ];
    for ( var i = 0, version; version = versions[ i++ ]; ){
        try{
            return new ActiveXObject( version );
        }catch(e){
        }
    }
};
var xhr = createXHR();

【用return退出多重迴圈】

　　假設在函式體內有一個兩重迴圈語句，需要在內層迴圈中判斷，當達到某個臨界條件時退出外層的迴圈。大多數時候會引入一個控制標記變數：

var func = function(){
    var flag = false;
    for ( var i = 0; i < 10; i++ ){
        for ( var j = 0; j < 10; j++ ){
            if ( i * j >30 ){
                flag = true;
                break;
            }
        }
        if ( flag === true ){
            break;
        }
    }
};

　　第二種做法是設定迴圈標記：

var func = function(){
    outerloop:
    for ( var i = 0; i < 10; i++ ){
        innerloop:
        for ( var j = 0; j < 10; j++ ){
            if ( i * j >30 ){
                break outerloop;
            }
        }
    }
};

　　這兩種做法無疑都讓人頭暈目眩，更簡單的做法是在需要中止迴圈的時候直接退出整個方法：

var func = function(){
    for ( var i = 0; i < 10; i++ ){
        for ( var j = 0; j < 10; j++ ){
            if ( i * j >30 ){
                return;
            }
        }
    }
};

　　當然用return直接退出方法會帶來一個問題，如果在迴圈之後還有一些將被執行的程式碼呢？如果提前退出了整個方法，這些程式碼就得不到被執行的機會：

var func = function(){
    for ( var i = 0; i < 10; i++ ){
        for ( var j = 0; j < 10; j++ ){
            if ( i * j >30 ){
                return;
            }
        }
    }
    console.log( i ); // 這句程式碼沒有機會被執行
};

　　為了解決這個問題，可以把迴圈後面的程式碼放到return後面，如果程式碼比較多，就應該把它們提煉成一個單獨的函式：

var print = function( i ){
    console.log( i );
};
var func = function(){
    for ( var i = 0; i < 10; i++ ){
        for ( var j = 0; j < 10; j++ ){
            if ( i * j >30 ){
                return print( i );
            }
        }
    }
};
func();