前端歌谣-第八课-关于面向对象

前言

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

环境配置

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

运行结果

在这里插入图片描述
在这里插入图片描述

posted @   前端导师歌谣  阅读(5)  评论(0)  编辑  收藏  举报  
相关博文：
·  关于面向对象
·  前端歌谣-第七课-关于原型
·  开课吧前端1期.阶段2：ES6详解-3 面向对象 JSON
·  面向对象变成笔记
·  07.面向对象编程
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
点击右上角即可分享
微信分享提示