/*使用块模式--立即执行的匿名函数*/(function(){//所有声明的变量在构造函数内部，不会向windows添加任何属性

/*构造函数的基本规范：

1、构造函数的第一个字母是大写的，与其他函数区分开来

2、调用构造函数的时候需要用new，不然会创建全局变量*/

var Menubar = function(){this.el = document.querySelector('#sidebar ul'); //菜单项的DOM元素通过css的querySelctor查找得到

this.state = 'allClosed';//初始状态时，allClosed，当打开某一个时，则为hasOpened

this.el.addEventListener('click',function(e){//7.1阻止冒泡事件向上传播，这样点击菜单项，只响应菜单项事件，无关sidebar

e.stopPropagation();

});var self = this;var currentOpendMenuContent = null;//7.2点击菜单项添加监听事件

this.menuList = document.querySelectorAll('#sidebar ul > li');for( var i=0; i

var menuContentEl = document.getElementById(e.currentTarget.id + '-content');/*7.2-1：没有打开菜单项，打开响应的菜单项

7.2-2：有打开的菜单项，关闭该菜单项再打开响应的菜单项*/

if(self.state === 'allClosed'){

console.log('打开' +menuContentEl.id);/*9.1菜单项打开的动画效果*/

//先设置菜单栏的高和左边的位置

menuContentEl.style.top = '0px';

menuContentEl.style.left= '-85px';

menuContentEl.classList.add('menuContent-move-right');

self.state= 'hasOpened';

self.currentOpendMenuContent=menuContentEl;

}else{

console.log('关闭' +self.currentOpendMenuContent.id);/*9.2菜单栏关闭的动画效果*/self.currentOpendMenuContent.className= 'nav-content';

self.currentOpendMenuContent.style.top= '0';

self.currentOpendMenuContent.style.left= '35px';

self.currentOpendMenuContent.classList.add('menuContent-move-left')

console.log('打开' +menuContentEl.id);

menuContentEl.className= "nav-content"menuContentEl.style.top= '250px';

menuContentEl.style.left= '35px';

menuContentEl.classList.add('menuContent-move-up');

self.state= 'hasOpened';

self.currentOpendMenuContent=menuContentEl;

}

});

}/*10、关闭按钮的样式*/

this.menuContentList = document.querySelectorAll('.nav-content >div.nav-con-close');for(i=0;i

var menuContent =e.currentTarget.parentNode;

menuContent.className= "nav-content";

menuContent.style.top= '0';

menuContent.style.left= '35px';

menuContent.classList.add('menuContent-move-left');

that.state= 'allClosed';

});

}

};/*1、使用构造函数创建sidebar对象 ，

实例化该对象，向内提供属性eId、closeId*/

var Sidebar = function(eId,closeBarId){/*2、定义对象的状态和属性和方法*/

this.state = 'opened';/*4、继续完成构造函数

4.1、完成对象的初始化,获取所需要的DOM元素

4.2、在构造函数的关闭按钮中增加事件响应函数

{借助Javascript的事件的冒泡传播机制:使用向上冒泡的机制来传播,在'sidebar的div上能监听closebar按钮的事件响应'}*/

this.el = document.getElementById(eId || 'sidebar'); //在参数中，需要传入默认的id以防不提供参数

this.closeBarEl = document.getElementById(closeBarId || 'closeBar');/*4.3、在el元素上面调用事件函数*/

var self = this;/*修改事件函数内的this指向回Sidebar对象有两种方法:

1、修改函数的上下文(比较复杂)

2、javascript的特性--闭包

this指向构造函数返回的对象，则指向下方 new sidebar返回的对象，

闭包原理，再在事件响应函数中调用该变量*/

/*7、在sidebar构造函数中，需要将Menubar函数作为一个属性传进*/

this.menubar = newMenubar();this.el.addEventListener("click",function(event){if(event.target !==self.el){

self.triggerSwitch();//代表打开和关闭的统一函数名称

}

});

};/*3、声明sidebar的两个行为

对象的行为添加在构造函数的原型链上*/Sidebar.prototype.close= function(){

console.log('关闭sidebar');/*8、增加sidebar和关闭按钮的动画效果*/

this.el.className = 'sidebar-move-left';this.closeBarEl.className = 'closeBar-move-right';this.state = 'closed';

};

Sidebar.prototype.open= function(){

console.log('打开sidebar');/*9、增加sidebar打开和关闭按钮向左移动的动画效果*/

//9.1需要先将sidebar的位置定位到上次关闭的位置

this.el.style.left ='-120px';this.el.className = 'sidebar-move-right';this.closeBarEl.style.left = '160px';this.closeBarEl.className = 'closeBar-move-left';this.state = 'opened';

};/*5、增加triggerSwich()函数*/Sidebar.prototype.triggerSwitch= function(){if(this.state === 'opened'){this.close();

}else{this.open();

}

};/*6、验证构造函数的成果

6.1在close函数中console.log输出值来验证

6.2增加test单元测试，单元测试一直伴随代码存在*/

var sidebar = newSidebar();

})();