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]();
}

对扩展开发，对修改封闭，面向对象的开闭原则。