JS转盘抽奖小Demo：从普通写法到设计模式再向ES6的进阶路程

2023-12-29 18:44:47

前言

抽奖是一种常见的促销活动，它可以吸引顾客参与并增加销售额。在互联网上，抽奖活动也可以通过网页或APP的形式进行。本文将介绍如何使用JS创建一个简单的抽奖小Demo，并从普通写法到设计模式再向ES6的进阶路程。

普通写法

创建一个简单的抽奖小Demo，首先需要创建一个HTML页面，然后在页面中添加一个<canvas>元素，并使用JavaScript来控制<canvas>元素的绘制。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <canvas id="canvas" width="500" height="500"></canvas>

  <script>
    var canvas = document.getElementById('canvas');
    var ctx = canvas.getContext('2d');

    // 绘制转盘
    ctx.beginPath();
    ctx.arc(250, 250, 200, 0, 2 * Math.PI);
    ctx.stroke();

    // 绘制指针
    ctx.beginPath();
    ctx.moveTo(250, 250);
    ctx.lineTo(250, 100);
    ctx.stroke();

    // 旋转转盘
    var angle = 0;
    var timer = setInterval(function() {
      angle += 0.1;
      ctx.clearRect(0, 0, 500, 500);
      ctx.beginPath();
      ctx.arc(250, 250, 200, 0, 2 * Math.PI);
      ctx.stroke();
      ctx.beginPath();
      ctx.moveTo(250, 250);
      ctx.lineTo(250 + 200 * Math.cos(angle), 250 + 200 * Math.sin(angle));
      ctx.stroke();
    }, 10);
  </script>
</body>
</html>

这段代码创建了一个简单的抽奖小Demo，转盘会不停地旋转。

设计模式

为了使小Demo的代码更易于维护，可以使用设计模式来优化代码。设计模式是一种软件设计方法，它可以帮助我们编写出更易于理解、维护和扩展的代码。

在小Demo中，我们可以使用工厂模式来创建转盘和指针对象。工厂模式是一种创建对象的设计模式，它可以帮助我们解耦创建对象的过程，使代码更易于维护和扩展。

// 转盘工厂
var DialFactory = {
  create: function(ctx) {
    return new Dial(ctx);
  }
};

// 转盘对象
var Dial = function(ctx) {
  this.ctx = ctx;
};

Dial.prototype.draw = function() {
  this.ctx.beginPath();
  this.ctx.arc(250, 250, 200, 0, 2 * Math.PI);
  this.ctx.stroke();
};

// 指针工厂
var PointerFactory = {
  create: function(ctx) {
    return new Pointer(ctx);
  }
};

// 指针对象
var Pointer = function(ctx) {
  this.ctx = ctx;
};

Pointer.prototype.draw = function() {
  this.ctx.beginPath();
  this.ctx.moveTo(250, 250);
  this.ctx.lineTo(250 + 200 * Math.cos(this.angle), 250 + 200 * Math.sin(this.angle));
  this.ctx.stroke();
};

// 抽奖小Demo
var RaffleDemo = function() {
  this.canvas = document.getElementById('canvas');
  this.ctx = this.canvas.getContext('2d');
  this.dial = DialFactory.create(this.ctx);
  this.pointer = PointerFactory.create(this.ctx);
  this.angle = 0;
  this.timer = setInterval(this.draw.bind(this), 10);
};

RaffleDemo.prototype.draw = function() {
  this.ctx.clearRect(0, 0, 500, 500);
  this.dial.draw();
  this.pointer.draw();
};

这段代码使用工厂模式创建转盘和指针对象，使代码更易于维护和扩展。

ES6

ES6是JavaScript的最新版本，它带来了许多新的特性，使JavaScript代码更简洁和高效。

在小Demo中，我们可以使用ES6的箭头函数来优化代码。箭头函数是一种简写函数，它可以使代码更简洁和易于阅读。

// 转盘工厂
const DialFactory = {
  create: ctx => new Dial(ctx)
};

// 转盘对象
class Dial {
  constructor(ctx) {
    this.ctx = ctx;
  }

  draw() {
    this.ctx.beginPath();
    this.ctx.arc(250, 250, 200, 0, 2 * Math.PI);
    this.ctx.stroke();
  }
}

// 指针工厂
const PointerFactory = {
  create: ctx => new Pointer(ctx)
};

// 指针对象
class Pointer {
  constructor(ctx) {
    this.ctx = ctx;
  }

  draw() {
    this.ctx.beginPath();
    this.ctx.moveTo(250, 250);
    this.ctx.lineTo(250 + 200 * Math.cos(this.angle), 250 + 200 * Math.sin(this.angle));
    this.ctx.stroke();
  }
}

// 抽奖小Demo
class RaffleDemo {
  constructor() {
    this.canvas = document.getElementById('canvas');
    this.ctx = this.canvas.getContext('2d');
    this.dial = DialFactory.create(this.ctx);
    this.pointer = PointerFactory.create(this.ctx);
    this.angle = 0;
    this.timer = setInterval(() => this.draw(), 10);
  }

  draw() {
    this.ctx.clearRect(0, 0, 500, 500);
    this.dial.draw();
    this.pointer.draw();
  }
}