关于面向对象

前言

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

环境配置

代码语言：javascript复制

npm init -y
yarn add vite -D

修改page.json配置端口

代码语言：javascript复制

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

简单案例

代码语言：javascript复制

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

运行结果

面向对象案例

代码语言：javascript复制

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

运行结果

面向对象案例

代码语言：javascript复制

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

运行结果

类组件

代码语言：javascript复制

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)

运行结果

继承

代码语言：javascript复制

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

代码语言：javascript复制

<!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

代码语言：javascript复制

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

index.js

代码语言：javascript复制

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

class console el 继承配置

0 人点赞