关于面向对象

前言

我是歌谣最好的种树是十年前其次是现在今天继续给大家带来的是面向对象的讲解

环境配置

npm init -y
yarn add vite -D

修改page.json配置端口

{
  "name": "demo1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "vite --port 3002"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vite": "^4.4.9"
  }
}

简单案例

function Test(){
    var obj={
        a:1,
        b:2
    }
    return obj
}
console.log(Test())

运行结果

面向对象案例

function Test(){
    this.a=1;
    this.b=2
    console.log(this)
    this.plus=function(){
        return this.a+this.b
    }
}
const test1=new Test()
const test2=new Test()
console.log(test1===test2)
console.log(test1.plus())

运行结果

面向对象案例

function Test(a,b){
    this.a=a
    this.b=b
}
Test.prototype={
    plus:function(){
        console.log(this)
        return this.a+this.b
    }
}
const test1=new Test(1,2)
console.log(test1.plus())

运行结果

类组件

class Test{
    constructor(a,b){
        this.a=a
        this.b=b
    }
    plus=()=>{
        return this.a+this.b
    }
}
const test=new Test(1,2)
const test1=new Test(3,4)
console.log(test)
console.log(test1)
const {plus}=new Test(1,2)
const res=plus()
console.log(res)

运行结果

继承

class Test{
    constructor(a,b){
        this.a=a
        this.b=b
    }
    plus(){
        return this.a+this.b
    }
}
class Test1 extends Test{
    constructor(a,b){
       super(a,b)
    }
}




class Test2 extends Test{
    constructor(a,b){
       super(a,b)
    }
}
const test=new Test(1,2)
const test1=new Test(3,4)
console.log(test)
console.log(test1)




const res=new Test(1,2).plus()
const res1=new Test1(1,2).plus()
console.log(res)
console.log(res1)

运行结果

轮播图案例

index.html

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




<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>




<body>
    <div class="carousel" id="carousel-fade">
        <div class="img-stage">
            <div class="img-wrapper animate__animated">
                <img src="./geyao.jpg">
            </div>
            <div class="img-wrapper animate__animated">
                <img src="./fangfang.jpg">
            </div>
            <div class="img-wrapper animate__animated">
                <img src="./1.png">
            </div>
            <div class="img-wrapper animate__animated">
                <img src="./fangfang.jpg">
            </div>
        </div>
        <div class="indicator">
            <i class="dot"></i>
            <i class="dot"></i>
            <i class="dot"></i>
            <i class="dot"></i>
        </div>
    </div>
    <script type="module" src="./index5.js"></script>
</body>




</html>

index5.js

import Fade from "./fade";
new Fade('#carousel-fade',{
    defaultIndex:0,
    duration:3000
})

index.js

import './resets.css'
import './index.scss'
import 'animate.css';
export default class Fade{
    constructor(el,{
        defaultIndex,
        duration
    }){
        this.$el=document.querySelector(el)
        this.$imgWrapper=this.$el.querySelectorAll(".img-wrapper")
        this.$dotWrapper=this.$el.querySelector('.indicator')
        this.$dots=this.$dotWrapper.querySelectorAll('.dot')
        this.duration=duration
        this._index=defaultIndex
        this.init();
    
    }
    static t=null
    init(){
        this.show(true)
        this.bindEvent()
        this.play()
    }
    get currentIndex(){
        return this._index;
    }
    set currentIndex(newValue){
        // this._index=newValue
        this.update(()=>{
            this._index=newValue
        })
    }
    bindEvent(){
        this.$el.addEventListener('mouseenter',this.handlerMouseEnter.bind(this),false)
        this.$el.addEventListener('mouseenter',this.handlerMouseLeave.bind(this),false)
        this.$dotWrapper.addEventListener('click',this.handlerDotClick.bind(this),false)
    }
    handlerMouseEnter(){
        clearInterval(Fade.t)
    }
    handlerMouseLeave(){
        this.play()
    }
    handlerDotClick(e){
        console.log(e.target.className,"className is")
        e.target.className==='dot'&&(this.currentIndex=[].indexOf.call(this.$dots,e.target))
    }
    
    show(isInitial){
        if(isInitial){
            for(let i=0;i<this.$imgWrapper.length;i++){
                this.$imgWrapper[i].classList.add("animate__fadeOut")
            }
        }
        this.$imgWrapper[this.currentIndex].classList.remove('animate__fadeOut')
        this.$imgWrapper[this.currentIndex].classList.add('animate__fadeIn')
        this.$dots[this.currentIndex].classList.add('active')
    }
    hide(){
        this.$imgWrapper[this.currentIndex].classList.remove('animate__In')
        this.$dots[this.currentIndex].classList.remove('active')
        this.$imgWrapper[this.currentIndex].classList.add('animate__fadeOut')
    }
    update(setIndex){
        this.hide();
        setIndex();
        this.show()
    }
    play(){
        Fade.t=setInterval(()=>{
            this.currentIndex>=this.$imgWrapper.length-1?this.currentIndex=0:this.currentIndex++;
        },this.duration)
    }
}

运行结果