JavaScript 内容总结(一)面向对象

辛跃

于 2021-03-21 13:33:41 发布

阅读量101

点赞数

文章标签： js

本文链接：https://blog.csdn.net/qq_47735503/article/details/115048267

版权

JavaScript 内容总结

面向对象编程介绍
ES6中的类和对象
类的继承
面向对象案例

1. 面向对象编程介绍

面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作
面向对象是以对象功能来划分问题，而不是步骤
灵活，代码可复用，易维护和开发，更适合多人协作
面向对象的特性：封装、继承、多态

2. ES6中的类和对象

面向对象的思维特点
1. 抽取（抽象）对象共用的属性和行为组织（封装）成一个类（模板）
2. 对类进行实例化、获取类的对象
类 class

抽象了对象的公共部分，泛指某一大类
对象

通过类实例化一个具体的对象，特指某一个

是由属性和方法组成的：
1. 属性：事物的特征，在对象中用属性来表示
2. 方法：事物的行为，在对象中用方法来表示

3. 类的继承

子类可以继承父类的属性和方法
关键字：extends
关键字：super：指针指向父类，必须在子类的this之前

4. 面向对象案例

面向对象的tab栏切换

html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Js面向对象动态添加标签页</title>
  <link rel="stylesheet" href="./tab栏切换.css">
</head>

<body>
  <div class="box" id="tab">
    <div class="title">
      <ul>
        <li class="liactive"><span>测试1</span><button><span>×</span></button></li>
        <li><span>测试2</span><button>×</button></li>
      </ul>
      <button class="add">+</button>
    </div>
    <div class="content">
      <section class="conactive">测试1</section>
      <section>测试2</section>
    </div>
  </div>
  <script src="./tab栏切换.js"></script>
</body>

</html>

css

*{
  padding: 0;
  margin: 0;
}
.box{
  margin: 100px auto;
  width: 700px;
  height: 300px;
  border: 1px solid rgb(212, 67, 31);
}
.title{
  height: 45px;
  border-bottom: 1px solid #bebbbb;
}
button{
  float: right;
  width: 20px;
  height: 20px;
  margin: 10px;
  background-color: transparent;
}
.title ul>li{
  position: relative;
  float: left;
  list-style: none;
  width: 90px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  border-right: 1px solid #d3d2d2;
  border-bottom: 1px solid #d3d2d2;
  overflow: hidden;
}
.title ul li input{
  width: 50px;
  height: 20px;
}
.title .liactive{
  border-bottom: 1px solid white;
}
.title ul>li>button{
  position: absolute;
  top: -20px;
  right: -20px;
  color: aliceblue;
  padding-right: 7px;
  line-height: 28px;
  background-color: rgb(15, 15, 15);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 0;
}
section{
  display: none;
}
section input{
  margin: 30px;
  width: 500px;
  height: 200px;
}
.conactive{
  display: block;
}

var that;
class Tab {
  constructor(id) {
    //获取要操作的区域
    this.main = document.querySelector(id);
    this.additem = this.main.querySelectorAll('.add')[0];
    this.ul = this.main.querySelector('.title ul:first-child');
    this.content = this.main.querySelector('.content');
    this.init();
    that = this;
  }
  //初始化 让相关元素绑定事件
  init() {
    this.update();
    for (let i = 0; i < this.lis.length; i++) {
      this.lis[i].index = i;
      this.lis[i].onclick = this.toggle
      this.removeitem[i].onclick = this.remove
      this.spans[i].ondblclick = this.edit
      this.sections[i].ondblclick = this.edit
    }
    this.additem.onclick = this.add
  }
  //清空所有class
  clearClass() {
    for (let i = 0; i < that.lis.length; i++) {
      that.lis[i].className = '';
      that.sections[i].className = '';
    }
  }
  //更新dom树
  update() {
    this.lis = this.main.querySelectorAll('li');
    this.sections = this.main.querySelectorAll('section');
    this.removeitem = this.main.querySelectorAll('.title ul li button');
    this.spans = this.main.querySelectorAll('.title ul li>span')
  }
  //1.切换
  toggle() {
    that.clearClass();
    this.className = 'liactive'
    that.sections[this.index].className = 'conactive';
  }

  //2.添加
  add() {
    that.clearClass()
    var random = Math.random();
    var li = '<li class="liactive"><span>测试1</span><button><span>×</span></button></li>'
    that.ul.insertAdjacentHTML('beforeend', li);
    var section = '<section class="conactive">' + random + '</section>';
    that.content.insertAdjacentHTML('beforeend', section);
    that.init();
  }
  //3.删除
  remove(e) {
    e.stopPropagation();
    var index = this.parentNode.index
    that.lis[index].remove();
    that.sections[index].remove();
    //当我们删除了非选中状态的li的时候，让其他保持不变
    if (document.querySelector('.liactive')) return;
    //当我们删除了选中状态的这个li的时候，让它的前一个li处于选中状态
    index--;
    //手动调用点击事件 不需要鼠标触发
    that.lis[index] && that.lis[index].click();
    that.init()
  }
  //4.修改 双击事件：ondblclick
  //双击禁止选中文字：window.getSelection ? window.getSelection().removeAllRanges() : document.section.empty();
  edit() {
    var str = this.innerHTML;
    window.getSelection ? window.getSelection().removeAllRanges() : document.section.empty();
    this.innerHTML = '<input type="text"/>';
    var input = this.children[0];
    input.value = str;
    input.select();
    input.onblur = function () {
      if (this.value == '') {
        this.value = str;
      }
      this.parentNode.innerHTML = this.value;
    }
    input.onkeyup = function (e) {
      if (e.keyCode == 13) {
        this.blur();
      }
    }
  }
}
new Tab('#tab')

辛跃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 内容总结(一)面向对象

JavaScript 内容总结面向对象编程介绍ES6中的类和对象类的继承面向对象案例1.面向对象编程介绍面向对象是把事务分解成为一个个对象，然后由对象之间分工与合作面向对象是以对象功能来划分问题，而不是步骤灵活，代码可复用，易维护和开发，更适合多人协作面向对象的特性：封装、继承、多态2.ES6中的类和对象面向对象的思维特点抽取（抽象）对象共用的属性和行为组织（封装）成一个类（模板）对类进行实例化、获取类的对象类 class抽象了对象的公共部分，泛指某一大类
复制链接

扫一扫