JS優化：減少前端代碼耦合

避免全局耦合

場景

<script>
    var PAGE = 20;
</script>
<script src="main.js">
</script>

全局變量跨了兩個文件使用，html和main.js,對於維護main.js的開發很難去理解PAGE變量的含義。
不利於維護。

JS/CSS/HTML的耦合

場景

//bad
$('.bar').css({
    position:fixed;
    top:0;
    left:0;
})

//good
$('.bar').addClass('fixed');

儘量不要在js中給元素添加樣式，把樣式統一放到css中去維護，js中的樣式其它開發很難在瀏覽器中發現來源。

減少重複代碼

場景

ajax請求的封裝

//bad
$('#search').on("click",function(){
    var formData = getFormData();
    $.ajax({
        url:'./search',
        data:formData,
        success:function(data){
            showResult(data);
        }
    })
});

$('input').on("change",function(){
    //把用戶的搜索條件展示進行改變
    changeInputFilterShow();
    var formData = getFormData();
    $.ajax({
        url:'./search',
        data:formData,
        success:function(data){
            showResult(data);
        }
    })
});

//better
function getAndShowData(){
    var formData = getFormData();
    $.ajax({
        url:'./search',
        data:formData,
        success:function(data){
            showResult(data);
        }
    })
}
$('#search').on("click",function(){
    var formData = getFormData();
    getAndShowData()
});

$('input').on("change",function(){
    //把用戶的搜索條件展示進行改變
    changeInputFilterShow();
    getAndShowData()
});

進一步可以將ajax請求封裝成一個公共模塊，所有發請求的處理都可以使用該模板，傳參數，返回結果。

整體思路：出現了重複代碼 --> 封裝成一個函數 --> 封裝成一個模塊 --> 封裝成一個插件

使用策略模式

場景

//bad
function popCallback(popType){
    switch(popType){
        case "register":
            //do nothing
            break;
        case "favHouse":
            favHouse();
            break;
        case "saveSearch":
            saveSearch();
            break;
    }
}

//good

//pop-callback.js
var popCallback = {
    favHouse: function(){

    },
    saveSearch: function(){

    }
}
//main.js
var popCallback = require("pop-callback");
if(typeof popCallback[popType] === "function"){
    popCallback[popType]();
}

對擴展開發，對修改封閉，面向對象的開閉原則。