我有一个脚本，我想将它分成多个模块。例如，将我所有的鼠标事件放在另一个模块中（mouseup、mousedown 等）。
我使用一堆全局变量来跟踪屏幕上的所有对象。鼠标模块将需要访问这些变量并更改它们。我意识到我可以向其他模块显示所需的每个变量，但他们无法更改它们。
使用Javascript如何最好地实现这一点？我目前使用显示模块模式，并且我读到我必须使用 getter 和 setter（例如我在学校回忆的 C++ 中使用的），但是我有很多全局变量要跟踪。我需要很多这样的方法。这是我应该这样做的方式吗？
或者......这是一个案例，它向我展示了一个问题描述了糟糕的设计。
我正在使用 Fabric.js 进行绘图和所有这些工作。
绘制脚本.js
var DrawScript = function(){
var DRAW = 0,
SELECT = 1,
SCROLL = 2;
var MOUSEBUTTONS = {
'S': 83,
'C': 67,
'D': 68,
'DELETE': 46,
'BACKSPACE': 8
};
var canvas;
var _started = false;
var _x, _y;
var square;
var edgedetection = 10; // pixels to snap
var lines = {};
var lines_group;
var rectangles_group;
var rectangle_txt = {};
var _text_offset_x = 20;
var _text_offset_y = 20;
var pressedKeys = [];
var _stroke_colour_var = "red";
var _stroke_width_var = 5;
var _selectionColor = "rgba(255,255,255,0.4)";
var _selectionBorderColor = "rgba(0,0,0,0.5)";
var selectedObjStartSettings = {};
var resetOpacityOfObject = false;
var drawingMode = true;
var mouseGlobal = null;
var garbage = null;
var window_height = 0;
var window_width = 0;
var canvasHeight = 0;
var canvasWidth = 0;
var bg_height = 0;
var _canvas_position = {
'x': {},
'y': {}
};
var _canvas_mouse_pos_x = 0;
var _canvas_mouse_pos_y = 0;
var _fullSizeOn = false;
var _fullWidth = 0;
var _fullHeight = 0;
var _fitWidth = 0;
var _fitHeight = 0;
var _scaleSizeWidth = 0;
var _scaleSizeHeight = 0;
var setCanvasSize = function(){
// stuff
},
checkDrawingMode = function(){
// stuff
},
checkKeyDown = function(e){
// stuff
},
saveDrawing = function(){
// stuff
},
deleteObjectFromCanvas = function (obj){
// stuff
},
setObjectStartPoints = function(){
// stuff
},
drawNewRect = function(top, left, width, height, name){
// stuff
},
updateCoords = function(x, y){
// stuff
},
changeZoom = function(input){
// stuff
},
init = function(){
garbage = $("#garbage");
// ===================================
// Set drawing mode when changed
// ===================================
$("input[name='draw']").change(function(){
checkDrawingMode();
});
// ===================================
// Zoom On
// ===================================
$("input[name='zoom-on']").change(function(){
changeZoom(this);
});
// ===================================
// Check keypress
// ===================================
$(document).keydown(function(e){
checkKeyDown(e);
});
$(document).keyup(function(e){
e.preventDefault();
var key;
if(e.metaKey)
{
// key = 91;
return;
}
else
key = e.keyCode;
pressedKeys[key] = false;
// console.log(pressedKeys);
});
// ===================================
// Save drawing
// ===================================
$("#save").click(function(){
saveDrawing();
});
$(window).resize(function(){
setCanvasSize();
});
// ===================================
// Create canvas and check drawing mode when launched
// ===================================
canvas = new fabric.Canvas('demoCanvas');
setCanvasSize();
checkDrawingMode();
canvas.selectionLineWidth = 2;
canvas.selectionDashArray = [4, 4];
canvas.cornerColor = "#900";
canvas.hoverCursor = 'pointer';
canvas.moveCursor = 'pointer';
canvas.selection = false;
// ===================================
// Add groups
// ===================================
rectangles_group = new fabric.Group();
lines_group = new fabric.Group();
canvas.add(lines_group);
// ===================================
// Get mouse events
// ===================================
canvas.on('mouse:down', function(options) { mousedown(options); });
canvas.on('mouse:move', function(options) { mousemove(options); });
canvas.on('mouse:up', function(options) { mouseup(options); });
canvas.on('object:scaling', function(e) { e.target.resizeToScale(rectangle_txt, _text_offset_x, _text_offset_y); });
canvas.on('object:selected', function() { setObjectStartPoints(); });
canvas.on('object:moving', function(options) { objectMoving(options); });
};
return {
init: init
};
}();
为简洁起见，我删除了顶部的函数实现。此外，我肯定需要使我的变量名称在命名约定方面更加统一。这一切都还很早，所以如果这让任何人想要打破我的膝盖，我深表歉意！
我不确定如何拆分鼠标事件，所以我的 drawScript.js 文件不会变成 3k 行。鼠标事件都使用我设置的各种组和坐标变量。此外，我需要在应用程序使用的脚本之间共享画布。
也许我只是想努力和过度组织，但我认为寻求帮助会帮助我在更大的项目中变得更好:)