Bouwen van een Spreadsheettoepassing in JavaScript: Een Stapsgewijze Gids

Spreadsheetprogramma’s zijn een integraal onderdeel van moderne computertoepassingen geworden. Ze stellen gebruikers in staat om gegevens in een tabelvorm te organiseren, manipuleren en analyseren. Toepassingen zoals Google Sheets hebben de standaard gezet voor krachtige, interactieve spreadsheets.

In deze blogpost nemen we je mee door het proces van het bouwen van een spreadsheettoepassing met JavaScript. We zullen ons richten op belangrijke programmeerconcepten, de kenmerken van JavaScript verkennen en gedetailleerde codefragmenten met uitleg opnemen.

De volledige broncode is beschikbaar hier in mijn Codepen.

Wat is Google Spreadsheet?

Google Spreadsheet is een webgebaseerde toepassing die gebruikers in staat stelt om online spreadsheets te maken, te bewerken en samen te werken. Het biedt functies zoals formules, gegevensvalidatie, grafieken en voorwaardelijke opmaak.

Ons project emuleert enkele kernfuncties van Google Spreadsheet, met focus op:

1. Bewerkbare cellen.
2. Formuleparseren en evaluatie.
3. Live-updates via een Pub/Sub-model.
4. Toetsenbordnavigatie en celselectie.
5. Dynamische afhankelijkheidsevaluatie tussen cellen.

Kenmerken van dit project

1. Bewerkbare cellen: Stelt gebruikers in staat om tekst of vergelijkingen in cellen in te voeren.
2. Formuleondersteuning: Verwerkt formules die beginnen met = en evalueert uitdrukkingen.
3. Live updates: Wijzigingen in afhankelijke cellen veroorzaken updates met een Pub/Sub-model.
4. Toetsenbordnavigatie: Maakt beweging tussen cellen mogelijk met de pijltoetsen.
5. Dynamic evaluatie: Zorgt voor realtime updates voor formules die afhankelijk zijn van andere cellen.
6. Foutafhandeling: Biedt betekenisvolle foutmeldingen voor ongeldige invoer of circulaire afhankelijkheden.
7. Schalbare ontwerp: Maakt gemakkelijke uitbreiding mogelijk om meer rijen, kolommen of functies toe te voegen.

Belangrijke componenten van de applicatie

1. Modusbeheer

const Mode = {

  EDIT: 'edit',

  DEFAULT: 'default'

};

Deze enum definieert twee modi:

• Bewerken: Maakt het mogelijk om een geselecteerde cel te bewerken.
• Standaard: Maakt navigatie en interactie mogelijk zonder te bewerken.

Waarom modi gebruiken? 

Modi vereenvoudigen het beheer van de UI-status. In de STANDAARD-modus bijvoorbeeld, verplaatsen toetsenbordinvoeren zich tussen cellen, terwijl in de BEWERKEN-modus invoeren de celinhoud aanpassen.

2. Pub/Sub Klasse

Het Pub/Sub-model beheert abonnementen en live updates. Cellen kunnen zich abonneren op andere cellen en dynamisch bijwerken wanneer afhankelijkheden veranderen.

class PubSub {

  constructor() {

    this.map = {};

  }

​

  get(source) {

    let result = [];

    let queue = [...(this.map[source] || [])];

​

    while (queue.length) {

      let next = queue.shift();

      result.push(next.toUpperCase());

      if (this.map[next]) queue.unshift(...this.map[next]);

    }

    return result;

  }

​

  subscribeAll(sources, destination) {

    sources.forEach((source) => {

      this.map[source] = this.map[source] || [];

      this.map[source].push(destination);

    });

  }

}

Belangrijkste functies:

• Dynamisch afhankelijkheidsbeheer: Volgt afhankelijkheden tussen cellen.
• Verspreiding van updates: Werkt afhankelijke cellen bij wanneer broncellen veranderen.
• Breedte-eerst zoeken: Voorkomt oneindige lussen door alle afhankelijke knooppunten te volgen.

Voorbeeldgebruik:

let ps = new PubSub();

ps.subscribeAll(['A1'], 'B1');

ps.subscribeAll(['B1'], 'C1');

console.log(ps.get('A1')); // Output: ['B1', 'C1']

3. Het maken van rijen en cellen

class Cell {

  constructor(cell, row, col) {

    cell.id = `${String.fromCharCode(col + 65)}${row}`;

    cell.setAttribute('data-eq', '');

    cell.setAttribute('data-value', '');

​

    if (row > 0 && col > -1) cell.classList.add('editable');

    cell.textContent = col === -1 ? row : '';

  }

}

​

class Row {

  constructor(row, r) {

    for (let c = -1; c < 13; c++) {

      new Cell(row.insertCell(), r, c);

    }

  }

}

Kenmerken:

• Dynamische tabelgeneratie: Maakt het toevoegen van rijen en kolommen programmeerbaar.
• Celidentificatie: Genereert ID’s op basis van positie (bijv. A1, B2).
• Bewerkbare cellen: Cellen zijn alleen bewerkbaar als ze geldig zijn (geen koptekstrijen/kolommen).

Waarom Dynamische Rijen en Cellen Gebruiken?

Deze aanpak maakt het mogelijk de grootte van de tabel schaalbaar en flexibel te maken, en ondersteunt functies zoals het toevoegen van rijen of kolommen zonder de structuur te wijzigen.

4. Gebeurtenisbehandeling voor Interactie

addEventListeners() {

  this.table.addEventListener('click', this.onCellClick.bind(this));

  this.table.addEventListener('dblclick', this.onCellDoubleClick.bind(this));

  window.addEventListener('keydown', this.onKeyDown.bind(this));

}

Kenmerken:

• Klikgebeurtenis: Selecteert of bewerkt cellen.
• Dubbelklikgebeurtenis: Maakt formulebewerking mogelijk.
• Toetsaanslaggebeurtenis: Ondersteunt navigatie met pijltoetsen.

5. Formule-analyse en Evaluatie

function calcCell(expression) {

  if (!expression) return 0;

​

  return expression.split('+').reduce((sum, term) => {

    let value = isNaN(term) ? getCellValue(term) : Number(term);

    if (value === null) throw new Error(`Invalid cell: ${term}`);

    return sum + Number(value);

  }, 0);

}

Kenmerken:

• Dynamische berekening: Berekent formules die verwijzen naar andere cellen.
• Recursieve evaluatie: Lost geneste afhankelijkheden op.
• Foutafhandeling: Identificeert ongeldige verwijzingen en circulaire afhankelijkheden.

6. Foutafhandeling voor Gebruikersinvoer

function isValidCell(str) {

  let regex = /^[A-Z]{1}[0-9]+$/;

  return regex.test(str);

}

​

Kenmerken:

• Validatie: Zorgt ervoor dat de invoer geldige cel-ID’s bevat.
• Schaalbaarheid: Ondersteunt dynamische tabeluitbreiding zonder validatie te verbreken.

JavaScript-onderwerpen behandeld

1. Gebeurtenisbehandeling

Beheert interacties zoals klikken en toetsaanslagen.

window.addEventListener('keydown', this.onKeyDown.bind(this));

2. DOM-manipulatie

Maakt en wijzigt DOM-elementen dynamisch.

let cell = document.createElement('td'); cell.appendChild(document.createTextNode('A1'));

3. Recursie

Verwerkt afhankelijkheden dynamisch.

function calcCell(str) {  if (isNaN(str)) {    return calcCell(getCellValue(str));  } }

4. Foutafhandeling

Detecteert ongeldige cellen en circulaire afhankelijkheden.

if (!isValidCell(p)) throw new Error(`invalid cell ${p}`);

Conclusie

Dit project toont een krachtige spreadsheet met behulp van JavaScript. Het maakt gebruik van gebeurtenisbeheer, recursie en Pub/Sub-patronen en legt daarmee de basis voor complexe webtoepassingen. Breid het uit door functies toe te voegen zoals het exporteren van gegevens, grafieken of opmaakregels.

Referenties

1. MDN Web Docs – Gebeurtenisbeheer
2. MDN Web Docs – DOM-manipulatie
3. JavaScript.info – Recursie