由一段代碼談前端js最佳化和編碼規範，前端js最佳化編碼

由一段代碼談前端js最佳化和編碼規範，前端js最佳化編碼

這段代碼是擼主剛畢業那會寫的，主要是實現一個左側的導航條的摺疊功能。當時實現的比較簡陋，每次在導航條增加新的項目的時候，都要手動去修改js代碼中寫死的索引。。。確實是比較惱火的，後來就修改了一下，能夠自動的尋找索引了，但是寫的代碼很不規範，前幾天看到這段代碼的時候，簡直要吐血。。。所以就簡單最佳化了一下

1.情景描述：

html代碼大致就是如下所示：

<a><li></li></a><li></li><li></li><li></li><li></li><a><li></li></a><li></li><li></li><li></li><li></li><a><li></li></a><li></li><li></li><li></li><li></li><a><li></li></a><li></li><li></li><li></li><li></li>

我要做的工作就是使用js或者說jq讓我點擊每個a標籤的時候，能夠摺疊當前a標籤到下一個a標籤之間的li標籤元素。

2.代碼解析

之前寫代碼如下：

$('#sina_wolf_state').bind('click', function () {        var $me = $(this);        //擷取a標籤之後的所有元素        $li_elem = $me.nextAll();        //定義一個數組把兩個a標籤之間的對象加入到新數組中        wolfArray = []        for (var i=0;i<$li_elem.length;i++) {            var arrayTagName = $li_elem.get(i).tagName;            if (arrayTagName == 'LI') {                wolfArray.push($li_elem);            }            else {                break;            }        }        //判斷標籤是否含有style屬性，這個時候會有一個bug就是判斷會作用在所有的li元素上        var display = $li_elem.attr('style');        if (display == 'display: none') {            $li_elem.removeAttrs('style');        }        else {            $li_elem.slice(0, wolfArray.length).slideToggle();        }    });

由上面的代碼，可以看出我的意圖是想擷取當前元素之後的所有同級元素然後通過迴圈來擷取夾在兩個a標籤之間的li元素，然後通過判斷是否含有style屬性來控制事件觸發之後是否摺疊。

這段代碼主要問題：

之後我就對這些代碼就行了一些最佳化，最佳化後的代碼如下：

$('#sina_wolf_state').bind('click', function () {        //合并代碼減少代碼長度，並且聲明變數為函數內部的局部變數        var $li_elem = $(this).nextAll();        var wolfArray = [],liEleLength=0;        //在這裡不用每次迴圈都去計算$li_elem的長度        var liEleLength = $li_elem.length;        for (var i=0;i<liEleLength;i++) {            var arrayTagName = $li_elem.get(i).tagName;            if (arrayTagName == 'LI') {                wolfArray.push($li_elem[i]);            }            else {                break;            }        }        //這裡使用了擷取的wolfArry對象來判斷，而不會作用在全部的li元素上        var display = $(wolfArray).attr('style');        if (display == 'display: none') {            $(wolfArray).removeAttrs('style');        }        else {            $(wolfArray).slice(0, wolfArray.length).slideToggle();        }    });