前言
我是歌谣 最好的种树是十年前 其次是现在 今天继续给大家带来的是面向对象的讲解
环境配置
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)
}
}运行结果
