《web前端设计》课件-第12章 JavaScript面向对象（上）

第12章JavaScript面向对象（上）面向对象概述面向对象开发标签页组件ES6面向对象语法学习目标掌握了解掌握掌握了解什么是面向对象编程12掌握类与对象的关系3掌握类的继承及super关键字的使用4掌握使用class创建类的方法目录☞点击查看本节相关知识点12.1面向对象概述☞点击查看本节相关知识点12.2ES6面向对象语法☞点击查看本节相关知识点12.3面向对象开发标签页组件知识架构12.1面向对象概述1面向过程与面向对象2面向对象的优势3面向对象的特征知识架构12.2ES6面向对象语法1类和对象2类的基本语法3类中的方法4继承5super关键字知识架构12.3面向对象开发标签页组件1功能分析2页面结构3切换标签页4添加标签页5删除标签页知识架构12.3面向对象开发标签页组件6修改标签页面向过程：面向过程就是分析出解决问题需要的步骤，然后用函数把这些步骤一个个实现，使用的时候依次调用。面向过程的核心是过程。12.1面向对象概述1

面向过程与面向对象

面向对象：面向对象就是把需要解决的问题分解成一个个对象，建立对象不是为了实现一个步骤，而是为了描述每个对象在解决问题中的行为，面向对象的核心是对象。12.1面向对象概述1

面向过程与面向对象

面向对象的优势：模块化更深，封装性强。更容易实现复杂的业务逻辑。更易维护、易复用、易扩展。12.1面向对象概述2

面向对象的优势

面向对象的特征：封装性；多态性；继承性；12.1面向对象概述3

面向对象的特征

12.2ES6面向对象语法1

类和对象

类：事物分为具体的事物和抽象的事物，当我们脑中出现“书”这个词的时候，可以大致想象到书的基本样貌特征，这个过程就是抽象，抽象出来的结果，就是类。对象：而当我们拿起手里的一本真实存在的书的时候，这本书有自己的书名、作者、页数等信息，像这种具体的事物，就是对象。12.2ES6面向对象语法2

类的基本语法

//定义类classPerson{constructor(name){=name;}}class关键字class关键字：用来定义一个类，在类中可以定义constructor()构造方法，用来初始化对象的成员。//利用类创建对象varp1=newPerson('张三'); //创建p1对象varp2=newPerson('李四'); //创建p2对象console.log();//访问p1对象的name属性console.log();//访问p2对象的name属性class关键字12.2ES6面向对象语法3

类中的方法

class关键字：用来定义一个类，在类中可以定义constructor()构造方法，用来初始化对象的成员。classPerson{constructor(name){=name;}say(){ //在类中定义一个say()方法console.log('你好，我叫'+);}}varp1=newPerson('张三');p1.say(); //输出结果：你好，我叫张三类中的方法12.2ES6面向对象语法4

继承

继承：在JavaScript中，继承用来表示两个类之间的关系，子类可以继承父类的一些属性和方法，在继承以后还可以增加自己独有的属性和方法。//先准备一个父类classFather{constructor(){}money(){console.log(100);}}//子类继承父类classSonextendsFather{}定义父类和子类//创建子类对象varson=newSon();son.money(); //输出结果：100调用父类中的方法12.2ES6面向对象语法5

super关键字

super关键字：super关键字用于访问和调用对象在父类上的方法，可以调用父类的构造方法，也可以调用父类的普通方法。classFather{constructor(x,y){this.x=x;

this.y=y;}sum(){console.log(this.x+this.y);}}classSonextendsFather{constructor(x,y){super(x,y);}}定义父类和子类varson=newSon(1,2);son.sum();//输出结果：3调用父类中的方法12.2ES6面向对象语法5

super关键字

super关键字调用父类的普通方法：classFather{say(){return'我是父类';}}classSonextendsFather{say(){console.log(super.say()+'的子类');}}定义父类和子类varson=newSon(1,2);son.say();//输出结果：我是父类的子类调用父类中的方法12.2ES6面向对象语法5

super关键字

在子类中添加特有的方法：classFather{constructor(x,y){this.x=x;this.y=y;}sum(){console.log(this.x+this.y);}}定义父类12.2ES6面向对象语法5

super关键字

在子类中添加特有的方法：classSonextendsFather{constructor(x,y){super(x,y);//super必须在子类的this之前调用this.x=x;

this.y=y;}subtract(){//子类特有的方法console.log(this.x-this.y);}}subtract()子类特有的方法varson=newSon(5,3);son.sum();//输出结果：8son.subtract();//输出结果：2调用父类中的方法12.3面向对象开发标签页1

功能分析

案例展示：2

页面结构

案例展示：

<divclass="tabsbox"id="tab"><navclass="firstnav">……（省略导航标签）</nav><!--内容--><divclass="tabscon">……（省略内容结构）</div></div>标签页组件结构12.3面向对象开发标签页2

页面结构

引入tab.js：

<scriptsrc="js/tab.js"></script>//编写Tab类，用来创建标签页对象classTab{constructor(){} //构造方法toggleTab(){} //切换标签页addTab(){} //添加标签页removeTab(){} //删除标签页editTab(){} //修改标签页}//创建标签页对象newTab();引入tab.js12.3面向对象开发标签页2

页面结构

在tab.js中创建Tab类：

//编写Tab类，用来创建标签页对象classTab{constructor(){} //构造方法toggleTab(){} //切换标签页addTab(){} //添加标签页removeTab(){} //删除标签页editTab(){} //修改标签页}//创建标签页对象newTab();创建Tab类12.3面向对象开发标签页2

页面结构

给Tab类传递id值：

newTab('#tab');constructor(id){this.main=document.querySelector(id);}传递id12.3面向对象开发标签页3

切换标签页

获取页面元素：

constructor(id){this.main=document.querySelector(id);//大盒子this.lis=this.main.querySelectorAll('li');//小标签this.sections=this.main.querySelectorAll('section'); //内容区域}this.init()获取页面元素12.3面向对象开发标签页3

切换标签页

初始化：

init(){varthat=thisfor(vari=0;i<this.lis.length;i++){this.lis[i].index=i;this.lis[i].onclick=function(){console.log(this.index);//目前只获取标签的索引，其他操作在后面实现that.toggleTab(this);};}}初始化12.3面向对象开发标签页3

切换标签页

编写toggleTab()方法：

toggleTab()方法toggleTab(el){this.clearClass();el.className='liactive';this.sections[el.index].className='conactive';}12.3面向对象开发标签页3

切换标签页

编写clearClass()方法：

clearClass()方法clearClass(){for(vari=0;i<this.lis.length;i++){this.lis[i].className='';this.sections[i].className='';}}12.3面向对象开发标签页4

添加标签页

为“+”绑定单击事件：

获取+元素constructor(){

……（原有代码）this.add=this.main.querySelector('.tabadd'); //新增代码this.init();}

绑定单击事件init(){varthat=this;this.add.onclick=function(){that.addTab();};

……（原有代码）}12.3面向对象开发标签页4

添加标签页

创建新标签页的li和section元素：

创建li和section元素constructor(){

……（原有代码）this.ul=this.main.querySelector('.firstnavul:first-child');//新增this.fsection=this.main.querySelector('.tabscon');//新增this.init();}12.3面向对象开发标签页4

添加标签页

编写addTab()方法：

addTab()方法addTab(){this.clearClass();//先清除所有的li和section的类varli='<liclass="liactive"><span>新标签页</span><spanclass="iconfonticon-close"></span></li>';vartime=newDate().getTime();varsection='<sectionclass="conactive">'+time+'</section>';this.ul.insertAdjacentHTML('beforeend',li);this.fsection.insertAdjacentHTML('beforeend',section);}12.3面向对象开发标签页4

添加标签页

重新获取this.li和this.section元素：

updateNode()方法updateNode(){this.lis=this.main.querySelectorAll('li');this.sections=this.main.querySelectorAll('section');}

init()方法中调用init(){//放在初始化的时候调用this.updateNode();

……（原有代码）}12.3面向对象开发标签页5

删除标签页

获取所有“X”按钮：

获取关闭按钮updateNode(){

……（原有代码）this.remove=this.main.querySelectorAll('.icon-close');}12.3面向对象开发标签页5

删除标签页

绑定单击事件：

绑定单击事件for(vari=0;i<this.lis.length;i++){

……（原有代码）this.remove[i].onclick=function(e){that.removeTab(this,e);};}12.3面向对象开发标签页5

删除标签页

编写removeTab()方法：

removeTab()方法removeTab(el,e){e.stopPropagation();//阻止冒泡，防止触发li的click事件切换标签页varindex=el.parentNode.index;//获取父元素的索引this.lis[index].remove();this.sections[index].remove();this.init();}12.3面向对象开发标签页5

删除标签页

更新标签页选中状态：

更新标签页选中状态removeTab(el,e){

……（原有代码）if(!this.main.querySelector('.liactive')){this.lis[index-1]&&this.lis[index-1].click();}}12.3面向对象开发标签页6

修改标签页

获取页面中“标签”span元素：

获取“标签”updateNode(){

……（原有代码）this.spans=this.main.querySelectorAll('.firstnavlispan:first-child');}12.3面向对象开发标签页6

修改标签页

绑定双击事件：

绑定单击事件for(vari=0;i<this.lis.length;i++){

……（原有代码）this.spans[i].ondblclick=function(){that.editTab(this);};}12.3面向对象开发标签页6

修改标签页

编写editTab()方法