js中属性是一个大括号，里面对应很多方法，他们之间的层次关系是什么，能帮解释一下吗

var newPage = {};
newPage.bandwidth = {
        init : function(){
            var _this = this;
            //初始化有效区域
            _this.config.xMin = $('.bwTabCon').offset().left;
            _this.config.xMax = $('.bwTabCon').offset().left + $('.bwTabCon').width();
            _this.config.yMin = $('.bwTabCon').offset().top;
            _this.config.yMax = $('.bwTabCon').offset().top +　$('.bwTabCon').height();
            //鼠标动作
            newPage.mouseSelect.init();
        },
        config : {
            xMin : null,
            xMax : null,
            yMin : null,
            yMax : null,
            currentId : 0
        },
        alertSureClick : function(){
            var selectedInput = $('.bwTabNav input:checked');
            this.delAlertDiv();
            this.Reset();
            return false;
        },
        Reset : function(){
            $('.bwTabNav input').each(function(index, element) {
                element.checked = false;
            });
            $('.time_select .select').removeClass('select');
        },
        timeSelect : function(t){
            this.showDarkDiv();
        },
        showDarkDiv : function(){
            var _opacity = 0.6 ; 
            var htmlOpacity = '<div id="opacity"></div>';
            $('body').append(htmlOpacity);
            $('#opacity').css({'height':$(document).height()}).animate({opacity:_opacity}).fadeIn(200);
        },
        delAlertDiv : function(){
            $('.newPageAlertDiv,#opacity').remove();
            $('#overDiv').hide()
        }
    };
    newPage.mouseSelect = {
        init : function(){
            var _this = this;
            $('.bwTabCon').mousedown(function(e){
                $('#overDiv').show()
                $('#selectArea').remove();
                var selectArea = '<div id="selectArea"></div>'
                _this.config.startX = e.pageX;
                _this.config.start_Y = e.pageY;
                _this.config.down = true;
                _this.currentBox().append(selectArea);
                $('#selectArea').fadeTo(200, 0.5);
            }).mouseup(function(e){
                _this.mouseUp(e);
            });
            $('.bwTabCon').mousemove(function(e){
                return _this.mouseOver(e);
            });
            $('.bwTabCon').mousemove(function(e){
                return _this.mouseOver(e);
            }).mouseout(function(e){
                if(e.pageX > newPage.bandwidth.config.xMax || e.pageX < newPage.bandwidth.config.xMin || e.pageY < newPage.bandwidth.config.yMin || e.pageY > newPage.bandwidth.config.yMax){
                    _this.config.down = false;
                 $('#selectArea').remove();
                }
            });
        },
        config : {
            down : false,
            ihide : true,
            currentId : 0,
            currentTarget : null,
            startX : 0,
            startY : 0
        },
        checkAttr : function(obj, value, type){
            var value = value || 'select';
            var type = type || 'class';
            if($(obj).attr(type) && $(obj).attr(type).indexOf(value) >= 0){
                return true;
            }else{
                return false;
            }
        },
        mouseOver : function(event){
            var width,left;
            width = Math.abs(event.pageX - this.config.startX)
            if(event.pageX - this.config.startX >=0){
                left = this.config.startX - $('.bwTabCon').offset().left;
            }else{
                left = this.config.startX - $('.bwTabCon').offset().left - width;
            }
            $('#selectArea').css({'left':left,'width' : width}).show();
        },
        addClassSelect : function(target){
            $(target).addClass('select').attr('name','div'+this.config.currentId);
        },
        removeClassSelect : function(target){
            $(target).removeClass('select').attr('name','');
        },
        mouseUp : function(event){
            this.config.startY = event.pageX;
            this.config.down = false;
            this.fewItemAdd();
            this.showSetBox();
            this.config.currentId++;
            $('#selectArea').remove();
        },
        showSetBox : function(){
            if ( checkWeekSelect()==false ) {
                return;
            }
            if(this.config.ihide == false) {return ;}
            var bandwidth = newPage.bandwidth;
            bandwidth.showDarkDiv();
            //if($('#alertDiv').css('display') != 'none'){return false;};
            var box = $('#alertDiv').clone(true);
            box.addClass('newPageAlertDiv');
            this.config.ihide = false;
            $('body').append(box);
            setTimeout(function(){
                box.fadeIn(400);
            },400)
            this.setSelectedTime();
        },
        fewItemAdd : function(){
            var _this = this,xMin,xMax;
            this.config.startX > this.config.startY ? xMin = this.config.startY : xMin = this.config.startX ;
            this.config.startX > this.config.startY ? xMax = this.config.startX : xMax = this.config.startY ;
            $('#bwTab_'+ newPage.bandwidth.config.currentId + ' .time_select div').each(function(index,item){
                if(!_this.checkAttr(item,'div'+ _this.config.currentId,'name') && checkInclude(item)){
                    if(_this.checkAttr(item)){
                        _this.removeClassSelect(item);
                    }else{
                        _this.addClassSelect(item);
                    }
                }
            })
            function checkInclude(i){
                if(($(i).offset().left + $(i).width()) > xMin && $(i).offset().left < xMax){
                    return true;
                }
            }
        },
        currentBox : function(){
            return $('#bwTab_'+ newPage.bandwidth.config.currentId + ' .time_select');
        },
        setSelectedTime : function(){
            var selectItems = $('.time_select div:[name = "div' + this.config.currentId + '"]');
            last = $('.newPageAlertDiv #time_to option[value = "'+selectItems.last().html() +'"]');
            if(selectItems.length>1){
                myValue = $(selectItems[selectItems.length -1]).html();
                myValueInt = parseInt(myValue, 10);
                if (myValueInt < 24) {
                    myValueInt ++;
                }
                if (myValueInt < 10) {
                    myValue = "0" + myValueInt;
                } else {
                    myValue = "" + myValueInt;
                }
                last = $('.newPageAlertDiv #time_to option[value = "'+ myValue +'"]');
            }
            $('.newPageAlertDiv #time_from option[value = "'+selectItems.first().html() +'"]')[0].selected = true
            $(last)[0].selected = true;
        }
    }

---

var newPage = {}; //等价于 var newPage = new Object(); 这种方式不建议使用

再比如：

var Person = {
    action: function(){
        return "doing";
    }
}

等价于

var Person = new Object();
Person.action = function () {
    return "doing";
}

---

这个你可以看做设计模式里面的单例模式：
http://www.cnblogs.com/cangowu/p/5062130.html
里面有常用的设计模式系列，可以参考

---

对象里面的对象

``

---

大括号就是对象直接量啊，表示这一个属性就是一个对象，层次关系很明显的…

---

建议楼主学习一下JSON数据结构，数据格式

---

var a = {}

就是新建一个对象的语法糖吧

但是{}本身通常表示一个块级(block)

---

教你一个简单的方法：把所有函数用fn代替，然后会变成：

var newPage = {};

newPage.bandwidth = {
    init : fn,
    config : fn,
    alertSureClick : fn,
    Reset : fn,
    timeSelect : fn,
    showDarkDiv : fn,
    delAlertDiv : fn
};

newPage.mouseSelect = {
    init : fn,
    config : fn,
    checkAttr : fn,
    mouseOver : fn,
    addClassSelect : fn,
    removeClassSelect : fn,
    mouseUp : fn,
    showSetBox : fn,
    fewItemAdd : fn,
    currentBox : fn,
    setSelectedTime : fn
};

怎么样，是不是好理解多了。

---

我都是理解为一个大数组的，个人观点。