两大编程思想
- 面向过程
- 面向对象
面向过程编程 POP(Process-oriented programming)
面向过程就是分析出解决问题所需的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。
举个例子：把大象装进冰箱 面向过程的做法
- 打开冰箱门
- 把大象装进去
- 关上冰箱门 面向过程，就是按照我们分析好的步骤，按照步骤解决问题
面向对象编程(Object Oriented Prigramming)
面向对象是把事物分解为一个个对象，然后由对象分工与合作。
举个例子：把大象装进冰箱 面向对象的做法
先找出对象，并写出这些对象的功能
1.大象对象
- 进去
2.冰箱对象
- 打开
- 关闭
3.使用大象和冰箱的功能
面向对象是以对象功能划分问题，而不是步骤。
面向对象的特性
- 封装性
- 继承性
- 多态性
面向过程和面向对象的对比
面向过程
- 优点：性能比面向对象高，适合跟硬件联系很紧密的东西，例如单片机就采用的面向过程编程
- 缺点：没有面向对象易维护、易复用、易扩展。
面向对象
- 优点：易维护、易复用、易扩展，由于面向对象有封装、继承、多态的特性，可以设计出低耦合的系统，使系统更加灵活、更易于维护
- 缺点：性能比面向过程低
面向对象版的tab栏切换
功能需求：
- 点击tab栏可以切换效果。
- 点击+号，可以添加tab项和内容项。
- 点击x号，可以删除当前的tab项和内容。
- 双击tab项文字或者内容项文字，可以修改里面的文字内容
抽取对象：Tab对象
- 该对象具有切换功能
- 该对象具有添加功能
- 该对象具有删除功能
- 改对象具有修改功能
tab栏代码
//tab.js
let that;
class Tab{
constructor(id){
that=this
this.main=document.querySelector(id);
this.add=this.main.querySelector('.add');
this.ul=this.main.querySelector('ul:first-child')
this.fsection=this.main.querySelector('.tabcontent')
this.init()
}
init(){
this.upDateNode();
//init 初始化操作让相关的元素绑定事件
this.add.onclick=this.addTab
for(let i=0;i<this.lis.length;i++){
this.lis[i].index=i;
this.lis[i].onclick=this.toggleTab;
this.remove[i].onclick=this.removeTab;
this.spans[i].ondblclick=this.editTab;
this.sections[i].ondblclick=this.editTab;
}
}
//动态添加元素，需要重新获取对应元素
upDateNode(){
this.lis=this.main.querySelectorAll("li");
this.sections=this.main.querySelectorAll("section");
this.remove=this.main.querySelectorAll('.close');
this.spans=this.main.querySelectorAll('.firstnav li span:first-child');
}
alearClass(){
for(let i=0;i<this.lis.length;i++){
this.lis[i].className="";
this.sections[i].className="";
}
}
toggleTab(){
that.alearClass()
this.className="li-active";
that.sections[this.index].className="show";
}
addTab(){
that.alearClass()
let random=Math.random()
let li=`<li class="li-active"><span>新选项</span><span class="close">x</span></li>`;
let section='<section class="show">内容'+random+'</section>'
that.ul.insertAdjacentHTML('beforeend',li);
that.fsection.insertAdjacentHTML('beforeend',section);
that.init()
}
removeTab(e){
e.stopPropagation()//阻止事件冒泡
let index=this.parentNode.index;
//根据元素下标删除对应的li和section
that.lis[index].remove();
that.sections[index].remove();
that.init();
//当我们删除的不是选中状态的li 的时候 原来的选中状态li保持不变
if(document.querySelector('.li-active')) return
//当我们删除了选中状态的这个li的时候，让它前一个li处于选中状态；
index--;
//手动调用点击事件 不需要鼠标触发
that.lis[index]&&that.lis[index].click();
}
editTab(){
//禁止双击选中文字
window.getSelection?window.getSelection().removeAllRanges():document.selection.empty();
let str=this.innerHTML
this.innerHTML='<input type="text" />'
let input=this.childNodes[0];
input.value=str;
input.select();//文本框里的文字处于选中状态
//当input失去焦点把value值赋值给span
input.onblur=function(){
this.parentNode.innerHTML=this.value
}
//按下回车键
input.onkeyup=function(e){
if(e.keyCode===13){
this.blur()
}
}
}
}
new Tab("#tab")
<!--tab.html-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
html,dody,div,ul,li.p,section,input{
margin:0;
padding:0
}
li{
list-style:none
}
.tab{
position:relative;
border:1px solid #000;
width:500px;
margin:50px auto 0;
}
.tab ul{
display:flex;
}
.tab ul li{
padding:10px 15px;
border-bottom:1px solid #000;
border-right:1px solid #000;
position:relative;
cursor:pointer
}
.close{
position:absolute;
top:0;
right:0;
background:#000;
color:#fff;
display:inline-block;
width:18px;
height:18px;
line-height:18px;
text-align:center
}
.tab .add{
position:absolute;
top:0;
right:0;
background:blue;
color:#fff;
width:20px;
text-align:center
}
.firstnav ul li input{
width:50px;
height:25px;
}
.li-active{
border-bottom:0 !important;
}
.show{
display:block !important;
}
.tabcontent section{
display:none;
height:500px;
padding:15px
}
</style>
</head>
<body>
<div id="tab" class="tab">
<nav class="firstnav">
<ul>
<li class="li-active">
<span>选项一</span>
<span class="close">x</span></li>
<li><span>选项二</span><span class="close">x</span></li>
<li><span>选项三</span><span class="close">x</span></li>
</ul>
<div class="add">
<span>+</span>
</div>
</nav>
<div class="tabcontent">
<section class="show">内容一</section>
<section>内容二</section>
<section>内容三</section>
</div>
</div>
<script type="text/javascript" src="./tab.js"></script>
</body>
</html>
因为写的是demo，css样式写的有点简单。主要学习js的编程思想
