09.062014

Verwendung von JSON mit RequireJS

RequireJS ist ein JavaScript-Datei- und Modul-Loader, mit dem JavaScript Dateien erst geladen werden müssen, wenn sie gebraucht werden. Dies kann, bei richtiger Anwendung für eine höhere Seitengeschwindigkeit und zu einen besseren, übersichtlicheren Code Führen.

Leider bringt RequireJS von Haus aus keine Unterstützung von JSON-Dateien mit. Man kann entweder auf das RequireJS Text-Plugin oder externe Librarys wie jQuery zurück greifen um JSON-Dateien zu laden.
Es gibt aber noch eine dritte Möglichkeit die ich euch kurz erläutern möchte.

JavaScript Dateien die mit requireJS geladen werden müssen der Asynchronous module definition (AMD) entsprechen. Alle Dateien die so definiert wurden können ohne Probleme per require geladen werden. Wenn wir nun unser JSON-Objekt ebenfalls auf diese Weise kapseln, können wir dieses an jeder beliebigen Stelle laden und sind in der Nutzung viel flexibler.

Ein solchen Objekt kann zum Beispiel so aussehen:

define(function(require) {
  'use strict';

  function colors() {

    this.colors = {
      red: 'FF0000',
      blue: '0000FF',
      green: '00FF00'
      yellow: 'FFF00'
    };

  }

  return colors;

});

Die Datei kann dann einfach über require geladen werden:

require(['colors'], function(colors) {
	console.log(colors);
});