我怎样才能简化这个JavaScript代码?开关()太多
How I can simplify this javascript code? too many switch()
我有下面的代码。它看起来又长又复杂,现在我必须添加更多条件。有什么方法可以简化此代码。javascript是否提供了任何其他方法来执行与switch相同的操作?很抱歉代码列表很长,但我认为我应该包含所有内容。
import { CanvasControls } from './CanvasControls.js';
import { Mouse } from './Mouse.js';
import { Pencil } from './Pencil.js';
import { loadImageURL } from './imageLoader.js';
import { Spray } from './Spray.js';
import { ColorPicker } from './ColorPicker.js';
import { Rectangle } from './Rectangle.js';
import { Eraser } from './Eraser.js';
window.onload = () => {
const canvas = document.querySelector('canvas');
canvas.style.cursor = 'crosshair';
const controls = new CanvasControls(canvas.getContext('2d'));
controls.setOptions({ color: '#008B8B', LineCap: 'butt', LineWidth: 1 });
const mouse = new Mouse();
const pencil = new Pencil(controls.context);
const spray = new Spray(controls.context);
const colorPicker = new ColorPicker(controls.context);
const eraser = new Eraser(controls.context);
let rectangle;
let sprayInterval;
let tool = 'PENCIL';
canvas.addEventListener('mousemove', (event) => {
event.preventDefault();
mouse.x = Math.floor(event.clientX - canvas.getBoundingClientRect().left);
mouse.y = Math.floor(event.clientY - canvas.getBoundingClientRect().top);
});
canvas.addEventListener('mousedown', (event) => {
event.preventDefault();
switch (tool) {
case 'PENCIL':
pencil.startToDraw(mouse.x, mouse.y);
break;
case 'SPRAY':
sprayInterval = setInterval(() => {
spray.paint(mouse.x, mouse.y);
}, 35);
break;
case 'RECTANGLE':
rectangle = new Rectangle(controls.context, mouse);
break;
case 'COLORPICKER':
console.log(colorPicker.getPixelColor(mouse.x, mouse.y));
break;
case 'ERASER':
eraser.erase(mouse.x, mouse.y);
break;
default:
break;
}
canvas.addEventListener('mousemove', (e) => {
e.preventDefault();
switch (tool) {
case 'PENCIL':
pencil.drawLine(mouse.x, mouse.y);
break;
case 'ERASER':
eraser.erase(mouse.x, mouse.y);
break;
case 'RECTANGLE':
rectangle.holdIlussion(mouse);
break;
default:
break;
}
});
});
canvas.addEventListener('mouseup', (event) => {
event.preventDefault();
switch (tool) {
case 'PENCIL':
pencil.lock();
break;
case 'SPRAY':
clearInterval(sprayInterval);
break;
case 'RECTANGLE':
rectangle.paint();
break;
default:
break;
}
});
const fileInput = document.getElementById('loadfromDisk');
fileInput.addEventListener('change', (event) => {
const reader = new FileReader();
reader.addEventListener('load', () => {
loadImageURL(canvas.getContext('2d'), reader.result);
});
reader.readAsDataURL(event.target.files[0]);
});
};
您可以创建一个对象,该对象包含要为每个事件调用的函数。
var actions = {
PENCIL: {
mousedown: () => { pencil.startToDraw(mouse.x, mouse.y); },
mousemove: () => { pencil.drawLine(mouse.x, mouse.y); },
mouseup: () => { pencil.lock(); }
},
SPRAY: {
mousedown: () => {
sprayInterval = setInterval() => {
spray.paint(mouse.x, mouse.y);
}, 35);
},
mouseup: () => { clearInterval(sprayInterval; }
},
...
};
然后,事件处理程序将如下所示:
canvas.addEventListener('mousedown', (event) => {
event.preventDefault();
var actionToRun = actions[tool].mousedown;
if (actionToRun) {
actionToRun();
};
}
相关文章:
- 云代码(javascript)失败,原因是:{代码:1,消息:内部错误
- 简化此If语句,使其不会't重复代码-Javascript
- 十进制到二进制代码Javascript
- 第二次单击时执行不同的代码(JavaScript)
- 在不使用jquery($symbol)knockout.js的情况下分离代码javascript
- 缩短几个元素的onclick代码 - JavaScript
- 英国银行排序代码 JavaScript 正则表达式
- 我无法在谷歌图表的代码 javascript 中获取 json 数据(项目 Python Hello Dashboard
- 和代码 JavaScript 没有被 &.
- 我怎样才能减少这段代码 javascript 代码,这样它就不会那么重复了
- 我想单击一个按钮,一次只执行已经制作的程序中的一行代码.(JavaScript)
- 滑动 DIV 代码 Javascript 的小问题
- 尝试重写代码 JavaScript
- 是否可以检测到在不使用键代码 javascript 的情况下按下了输入键
- 输入网址代码 JavaScript 播放器
- 管理通用客户端代码(javascript/css)
- 理解代码javascript
- 加载json-url参数代码(javascript修改)
- 变量检查错误的代码(javascript)
- css属性仅由代码javascript应用