передача параметров конструктору в частичных классах и супер, javascript - PullRequest
Новая
       53

передача параметров конструктору в частичных классах и супер, javascript

0 голосов
/ 10 апреля 2020

Hay ..

Текущая ситуация

У меня есть функция для визуализации 9 квадратов в сетке 3x3, где в каждом квадрате 9 чисел также генерируются в сетке 3x3.

Наряду с этим я сохраняю созданные DOM-узлы в 3 Javascript классах: Grid, Square и Field. Квадрат расширяет сетку, а поле расширяет квадрат и сетку.

Требуемая ситуация

В конце я хочу, чтобы сетка содержала массив всех квадратов и массив всех полей. Квадраты и поля должны наследовать эти массивы. Мне нужно это для генератора судоку.

В настоящий момент у каждого квадрата есть все квадраты, а у каждого поля есть все поля и все квадраты. Сетка только свой элемент и только свой класс.

Есть ли способ иметь переменную в Grid, содержащую квадраты и поля, и каждый раз, когда создается новое поле или квадрат, Grid обновляет эту переменную? Или это вложение все неправильно?

Сетка. js

export class GridClass
{
    gridElem;

    constructor()
    {
        this.gridElem = this.getGridElem();
        console.log(this)
    }

    getGridElem = () => document.getElementById("grid");

}

export let GridInstance = new GridClass();

Квадрат. js

import {GridClass} from "./Grid";

export class SquareClass extends GridClass
{
    squareElem;
    squares;
    squareID;

    constructor(squares, squareElem, squareID, gridElem)
    {
        super(gridElem);
        this.squareID = squareID;
        this.squares = squares;
        this.squareElem = this.getSquareElem();
    }

    getSquareElem = () => {
        return document.getElementsByClassName("square")[this.squares.length];
    }
}

Поле. js

import {SquareClass} from "./Square";

export class FieldClass extends SquareClass
{
    fieldElem;
    fields;
    squareElem;

    constructor(gridElem, fieldElem, fields, squares, squareID)
    {
        super(gridElem, squares, squareID);
        console.log(squareID)
        this.fieldElem = fieldElem;
        this.fields = fields;
        this.squareElem = document.getElementsByClassName("square")[this.squares.length-1];
    }
}

Renderer. js

import {SquareClass} from "../dom/Square.js";
import {FieldClass} from "../dom/Field.js";

class RendererClass 
{
    squares;
    fields;

    constructor()
    {
        this.squares = new Array();
        this.fields = new Array();
    }

    renderGrid = () => {
        let squareJSON = {
            nodeName: "div",
            classes: ["square", "grid"],
        }
        let fieldJSON = {
            nodeName: "div",
            textNode: "0",
            classes: ["field"],
        }

        for(let squareCount=0; squareCount<9; squareCount++){
            let squareElement = this.createElement(document.getElementById("grid"), squareJSON);
            this.getSquarePosition(squareCount);
            this.squares.push(new SquareClass(this.squares, squareElement, squareCount));

            for(let fieldCount=0; fieldCount<9; fieldCount++) {
                let fieldElement = this.createElement(document.getElementsByClassName("square")[squareCount], fieldJSON);
                this.fields.push(new FieldClass(this.squares, fieldElement, this.fields))
            }
        }
    }
}
...