关于面向对象

爱学习的前端歌谣

发布于 2023-10-18 11:13:01

1520

发布于 2023-10-18 11:13:01

文章被收录于专栏：前端小歌谣

前言

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

环境配置

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

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2023-10-10，如有侵权请联系 cloudcommunity@tencent.com 删除

class