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

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.delAlertp();
            this.Reset();
            return false;
        },
        Reset : function(){
            $('.bwTabNav input').each(function(index, element) {
                element.checked = false;
            });
            $('.time_select .select').removeClass('select');
        },
        timeSelect : function(t){
            this.showDarkp();
        },
        showDarkp : function(){
            var _opacity = 0.6 ; 
            var htmlOpacity = '';
            $('body').append(htmlOpacity);
            $('#opacity').css({'height':$(document).height()}).animate({opacity:_opacity}).fadeIn(200);
        },
        delAlertp : function(){
            $('.newPageAlertp,#opacity').remove();
            $('#overp').hide()
        }
    };
    newPage.mouseSelect = {
        init : function(){
            var _this = this;
            $('.bwTabCon').mousedown(function(e){
                $('#overp').show()
                $('#selectArea').remove();
                var selectArea = ''
                _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','p'+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.showDarkp();
            //if($('#alertp').css('display') != 'none'){return false;};
            var box = $('#alertp').clone(true);
            box.addClass('newPageAlertp');
            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 p').each(function(index,item){
                if(!_this.checkAttr(item,'p'+ _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 p:[name = "p' + this.config.currentId + '"]');
            last = $('.newPageAlertp #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 = $('.newPageAlertp #time_to option[value = "'+ myValue +'"]');
            }
            $('.newPageAlertp #time_from option[value = "'+selectItems.first().html() +'"]')[0].selected = true
            $(last)[0].selected = true;
        }
    }

var newPage = {}; newPage.bandwidth = { init : fn, config : fn, alertSureClick : fn, Reset : fn, timeSelect : fn, showDarkp : fn, delAlertp : 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 };

全部回复(7)

PHPz2017-04-10 16:55:16 7楼

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

再比如：

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

等价于

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

赞 +0

添加回复

怪我咯2017-04-10 16:55:16 6楼

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

黄舟2017-04-10 16:55:16 5楼

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

阿神2017-04-10 16:55:16 4楼

var a = {}

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

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

天蓬老师2017-04-10 16:55:16 3楼

对象里面的对象

迷茫2017-04-10 16:55:16 2楼

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

阿神2017-04-10 16:55:16 1楼

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

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