Adiós código limpio

Era tarde en la noche.

Mi colega acaba de escribir el código en el repositorio en el que había estado trabajando durante una semana. Luego creamos un editor gráfico, y en el nuevo código implementamos la capacidad de cambiar las formas en el campo de trabajo. Las formas, como los rectángulos y los óvalos, podrían modificarse moviendo pequeños marcadores ubicados en sus bordes.

El código funcionó.

Pero había muchas estructuras repetitivas del mismo tipo. Cada forma (como el mismo rectángulo u óvalo) tenía un conjunto diferente de marcadores. Mover estos marcadores en diferentes direcciones afectó la posición y el tamaño de la figura de diferentes maneras. Y si el usuario, mientras movía los marcadores, mantenía presionada la tecla Mayús, también teníamos que mantener las proporciones de la figura al cambiar su tamaño. En general, hubo muchos cálculos en el código.

El código en cuestión se parecía a esto:

let Rectangle = {
  resizeTopLeft(position, size, preserveAspect, dx, dy) {
    // 10   
  },
  resizeTopRight(position, size, preserveAspect, dx, dy) {
    // 10   
  },
  resizeBottomLeft(position, size, preserveAspect, dx, dy) {
    // 10   
  },
  resizeBottomRight(position, size, preserveAspect, dx, dy) {
    // 10   
  },
};

let Oval = {
  resizeLeft(position, size, preserveAspect, dx, dy) {
    // 10   
  },
  resizeRight(position, size, preserveAspect, dx, dy) {
    // 10   
  },
  resizeTop(position, size, preserveAspect, dx, dy) {
    // 10   
  },
  resizeBottom(position, size, preserveAspect, dx, dy) {
    // 10   
  },
};

let Header = {
  resizeLeft(position, size, preserveAspect, dx, dy) {
    // 10   
  },
  resizeRight(position, size, preserveAspect, dx, dy) {
    // 10   
  },  
}

let TextBlock = {
  resizeTopLeft(position, size, preserveAspect, dx, dy) {
    // 10   
  },
  resizeTopRight(position, size, preserveAspect, dx, dy) {
    // 10   
  },
  resizeBottomLeft(position, size, preserveAspect, dx, dy) {
    // 10   
  },
  resizeBottomRight(position, size, preserveAspect, dx, dy) {
    // 10   
  },
};

, , .

.

, . , Oval.resizeLeft() , , Header.resizeLeft(). , , .

, . , Oval.resizeLeft() Oval. — . Rectangle, Header TextBlock, .

.

, - . — :

let Directions = {
  top(...) {
    // 5   
  },
  left(...) {
    // 5   
  },
  bottom(...) {
    // 5   
  },
  right(...) {
    // 5   
  },
};

let Shapes = {
  Oval(...) {
    // 5   
  },
  Rectangle(...) {
    // 5   
  },
}

, :

let {top, bottom, left, right} = Directions;

function createHandle(directions) {
  // 20  
}

let fourCorners = [
  createHandle([top, left]),
  createHandle([top, right]),
  createHandle([bottom, left]),
  createHandle([bottom, right]),
];
let fourSides = [
  createHandle([top]),
  createHandle([left]),
  createHandle([right]),
  createHandle([bottom]),
];
let twoSides = [
  createHandle([left]),
  createHandle([right]),
];

function createBox(shape, handles) {
  // 20  
}

let Rectangle = createBox(Shapes.Rectangle, fourCorners);
let Oval = createBox(Shapes.Oval, fourSides);
let Header = createBox(Shapes.Rectangle, twoSides);
let TextBox = createBox(Shapes.Rectangle, fourCorners);

, , , . ! . , , , , .

( ). master , , «» .

… , .

, . . — . .

, , .

—

« » — , . , - , . , , , .

, , , . , . . , , : « , ». , .

, , . , , , . . . - , — , . , «».

, «», , , :

• -, , . , . ( ), — . . — .
• -, . . . , . . «» .

, «» ? . , «» «». - ? - , , ? , , ? , ?

, , . , — , , , .

— . , , , . , , , , . , . .

. . — . — - , . , , , , . 

. — .

! « »?