前言

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

  环境配置

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())

 运行结果

关于面向对象_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())

 运行结果

关于面向对象_面向对象_02

 面向对象案例

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())

 运行结果

关于面向对象_Test_03

 类组件

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)

 运行结果

关于面向对象_html_04

继承

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)

 运行结果

关于面向对象_Test_05

 轮播图案例

  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)
    }
}

 运行结果

关于面向对象_面向对象_06

关于面向对象_html_07