请教关于javascript编写代码的优化方式

Question

var userAddressId = 0;    // 存储着用户的地址序列id
var addressNumber = $('.address-item').length;    //    当前用户有多少个收货地址
var defaultAddress = false;    //    默认收货地址
var addressType = null;
var bgLayer = $('.bg-layer');
var popBlock = $('.pop-block');
var addAddressWrap = $('.add-address-wrap');
var receivingAdddressList = $('.receiving-address-list');
var showBlockButton = $('.show-block-button')
var init, showPop, showAddressList, addUserAddress, pay, switchUseDefault;
var addressListManageButton = $('.address-list-manage-button');    //    收货地址按钮
var defaultAddressCheckbox = $('.default-address-checkbox');
var useDefaultAddressCheckbox = $('.use-default-address-checkbox');

init = function(){
    showPop();
    showAddressList();
    addUserAddress();

    //    用户切换是否使用默认地址的操作
    useDefaultAddressCheckbox.bind('click', function(event) {
        if($(this).prop('checked')){
            $(this).next('.font-icon').css('color', '#ff0066');
        }else{
            $(this).next('.font-icon').css('color', '#ccc');
        }
    });

    $('.pop-block .pay').bind('click', pay);
};

getDefaultAddress = function(){

};

// 用户点击支付按钮后的操作
pay = function(){
    //    当用户点击支付时首先判断是否有勾选 使用默认地址的checkbox，如果选中则使用默认地址
    if(useDefaultAddressCheckbox.attr('checked')){
        defaultAddress = true;
    }else{
        defaultAddress = false;
    }
    alert(defaultAddress);
    window.location.href = "支付成功.html";
    return false;
};    

//    展开用户地址列表的操作
showAddressList = function(){
    addressListManageButton.bind('click', function(event) {
        receivingAdddressList.show();
        
        // 用户点选地址列表的操作
        receivingAdddressList.delegate('li', 'click', function(event) {
            $(this).addClass('select').siblings().removeClass('select');
            userAddressId = $(this).attr('data-user-address-id');
            
            if(!userAddressId) return false;

            receivingAdddressList.hide();
        });

        event.preventDefault();
    });
};

//    用户新增地址的操作
addUserAddress = function(){
    //    用户新增地址按钮的操作
    $('.add-new-address-button').bind('click', function(event) {
        addAddressWrap.show();
        $('.user-address-text').focus();
    });

    //    切换新增地址是否作为默认地址的图标颜色
    defaultAddressCheckbox.bind('click', function(event) {
        if($(this).prop('checked')){
            $(this).prev().css('color', '#ff0066');
        }else{
            $(this).prev().css('color', '#ccc');
        }
        event.stopPropagation();
    });

    //  用户点击提交新增地址的按钮操作
    $('.add-user-address-button').bind('click', function(event) {
        //    校验用户输入信息 然后检查是否勾选 然后提交信息到服务器，最后获得返回的数据库标识
        var userAddressText = $('.user-address-text').val();
        var userPhone = $('.user-phone').val();
        var userName = $('.user-name').val();

        if(!userAddressText.length && !userPhone.length && !userName.length)  return false;

        var data = {
            "userAddressText" : userAddressText,
            "userPhone" : userPhone,
            "userName" : userName
        };

        if(defaultAddressCheckbox.prop('checked')){
            data.setDefaultAddress = '1';
        }

        console.log(data);
        // 异步发送给服务器
        // $.post('/path/to/file', {"data": data}, function(data, textStatus, xhr) {
        //     /*optional stuff to do after success */
        // });

        addAddressWrap.hide();    //    隐藏新增地址表单
        receivingAdddressList.hide();    //    隐藏收货地址列表
        event.preventDefault();
    });
};

// 用户点击展开支付块
showPop = function(){
    showBlockButton.bind('click', function(event) {
        bgLayer.show();
        popBlock.show();
        bgLayer.bind('click', function(event) {
            bgLayer.hide();
            popBlock.hide();
        });
        event.preventDefault();
    });
};

////////////////////////////////////////////

以上就是我javascript在实际工作中学的基本样子，感觉这样的代码好恶心啊，乱七八糟的，请问怎么优化？看别人的代码怎么貌似很少dom操作呢？是我太蠢吗？

Answer 1

的确乱。。。。不用其他双向绑定框架的情况下,dom操作不可避免，但是逻辑还是可以清楚的。我稍微帮你整理下，下面是伪代码。
来分析下，粗略来看你这个功能应该是实现一个下单支付前填写用户信息，选择地址之类的，那么我们把方法根据你的操作行为来分一下：

//首先是地址就分为dom上的增删改查4种（可以还有个校验），加上ajax数据传输
var Address={
    add:function(){
            //添加地址
            Address._ajax();
    },
    update:function(){
            //修改地址
    },
    remove:function(){
            //移除地址
    },
    setDefault:function(){
            //将某条地址设置为默认
    },
    _ajax:function(data){
            //操作地址后将数据异步传输到后台
    }
}
//添加事件绑定
$("#add").on("click",Address.add);
//移除事件绑定
$(".address").on("click",".remove",Address.remove);



其他的以此类推，这样结构是不是一下就清晰了？

Answer 2

你这个数据使用这么频繁，推荐还是AngularJs这种东西来做，双向数据绑定做这种确实舒服

Answer 3

1.将回调函数抽取做一个函数
2.将对DOM元素的取值作为函数的参数传入
3.将函数按功能归并到相应的模块中
4.函数之间的交互通过事件监听或传入回调函数的方式实现脱耦