RequireJS – Part 2 (Praktischer Einsatz)

RequireJS – Part 2 (Praktischer Einsatz)

RequireJS – Part 2 (Praktischer Einsatz)

Nach längerer Zeit nun wie angekündigt der zweite Part der Nutzung von RequireJS
(hier geht’s zu Part 1).
In diesem Part werde ich den praktischen Einsatz von RequireJS in einem ASP.NET MVC Projekt zeigen.

Projekt Beschreibung

Ich habe für die Demonstration eine MVC Web Anwendung mit Visual Studio 2013 erstellt.

Die Applikation soll eine Firma mitsamt ihren Abteilungen und Angestellten anzeigen. Dabei können neue Mitarbeiter hinzugefügt und anschließend den Abteilungen zugeordnet werden. Zusätzlich ist es möglich, Mitarbeiter aus den Abteilungen zu entfernen.

Benötigte Libraries

Für das Projekt habe ich neben RequireJS auch KnockoutJS verwendet und beide Abhängigkeiten mit Hilfe von NuGet nachgeladen.
In der Package Manager Console (VS2013 -> Tools -> NuGet Package Manager -> Package Manager Console) müsst ihr dazu folgendes eingeben:

PM> Install-Package knockoutjs

PM> Install-Package RequireJS

Alternativ kann man sich aber auch die JavaScript Libraries von den Seiten www.knockoutjs.com und www.requirejs.org herunterladen und beide Dateien in den Scripts-Ordner der MVC-Applikation hinzufügen. Ordnerstruktur

Die Ordner Struktur ist für die Applikation sehr einfach gehalten.

Die eigentlichen Module befinden sich in einem neu angelegten Ordner „CompanyApp“ innerhalb des Scripts-Verzeichnisses, welches bereits von Visual Studio erstellt worden ist.

Hier ein Screenshot der Ordnerstruktur:

Ordnerstruktur

Konfiguration

Als nächstes müssen wir in der main.js die Konfiguration für RequireJS festlegen, damit die Library weiß, in welchen Verzeichnissen er nach den Modulen und JavaScript Dateien suchen soll.

(function () {
    // Basis Konfiguration für RequireJS
    requirejs.config({
        // unsere Basis URL für JavaScript Dateien
        baseUrl: '/Scripts',
        paths: {
            // der Ordner zur eigentlichen JavaScript Applikation -> /Scripts/CompanyApp
            app: 'CompanyApp',
            // KnockoutJS Skript -> /Scripts/knockout-3.1.0.js
            ko: 'knockout-3.1.0'
        }
    }); 
})();

Durch diese Konfiguration „weiß“ nun RequireJS, dass generelle JavaScript Dateien im Ordner „Scripts“ zu finden sind.
Zusätzlich geben wir hier an, dass unsere Applikations-spezifische JavaScript Dateien im Unterverzeichnis „CompanyApp“ zu finden sind und mit „app“ zugegriffen werden kann.

Das gleiche Prinzip verwenden wir auch für KnockoutJS, nur dass hier spezifisch der Skriptname ohne Dateiendung angegeben wird und mit „ko“ darauf zugegriffen werden kann.

Modul Definitionen

Anschließend können wir nun die einzelnen Module definieren.

employee.js

// Beschreibt ein Mitarbeiter Objekt
define(['ko'], function (ko) {
     return function Employee(name) {
          // Name des Mitarbeiters
          this.name = ko.observable(name);
     };
});

Das Mitarbeiter Modul ist sehr trivial und hat nur eine Eigenschaft, welches den Namen des Mitarbeiters halt.

division.js

// Beschreibt ein Abteilungs Objekt
define(['ko'], function (ko) {
    return function Division(divisionName) {
        this.divisionName = ko.observable(divisionName);
        this.employees = ko.observableArray();

        this.addEmployee = function(employee) { ... }

        this.removeEmployee = function(employee) { ... }
    };
});

Das Abteilungs Modul besitzt zum einen eine Eigenschaft, für den Namen der Abteilung, sowie ein Array, in dem die Mitarbeiter der Abteilung gehalten werden.

Um Mitarbeiter einer Abteilung zuweisen bzw. von einer Abteilung zu entfernen, besitzt das Modul zusätzlich noch zwei „public“ Funktionen.

company.js

// Beschreibt ein Firmen Objekt
define(['ko', 'app/division', 'app/employee'], function (ko, Division, Employee) {
    return function Company(companyName) {
        this.companyName = ko.observable(companyName);
        this.divisions = ko.observableArray();
        this.employees = ko.observableArray();

        this.addNewDivision = function () { ... }

        this.addNewEmployee = function () { ... }

        this.addDivision = function (divisionName) { ... };

        this.addEmployee = function (employeeName) { ... };

        this.moveEmployee = function (employeeName, divisionName) { ... };

        this.moveEmpToDiv = function() { ... };

        this.unassignEmp = function(divName, empName) { ... }
    };
});

Das Hauptmodul ist die Firma. Neben dem Namen der Firma hält es auch eine Liste seiner Abteilungen, sowie eine Liste der nicht zugewiesenen Mitarbeiter.

Die Funktionen „addNewDivision“ und „addNewEmployee“ dienen der Erzeugung neuer Abteilungen bzw. Mitarbeiter Objekten anhand von Input Werten.

„addDivision“ und „addEmployee“ werden für die Initialisierung der Applikation verwendet.

Die „moveEmployee“ Funktion verschiebt einen Mitarbeiter zu einer Abteilung. Diese Funktion wird sowohl zur Initialisierung genutzt, aber auch innerhalt der „moveEmpToDiv“ Funktion.

Gleiches tut die „moveEmpToDiv“ Funktion, nutzt jedoch Werte von Inputs.

„unassignEmp“ erzielt das Gegenteil von „moveEmployee“ und entfernt somit einen Mitarbeiter aus einer Abteilung.

Einstiegspunkt

main.js

(function () {
    // Basis Konfiguration für RequireJS
    requirejs.config({
        // ...
    });

    // Dies ist die Initialisierung der Applikation
    require(['ko', 'app/company'], function (ko, Company) {
        $(document).ready(function () {
            var company = new Company('ACME Inc.');
            company.addDivision('R&D');
            company.addEmployee('Some Developer');
            company.moveEmployee('Some Developer', 'R&D');
            ko.applyBindings(company);
        });
    });
})();

In der „main.js“ müssen wir nun noch die Initialisierung durchführen. Damit dies auch funktioniert, nutzen wir die Methode „require“ und übergeben als ersten Parameter ein Array mit den benötigten Referenzen. In unserem Fall benötigen wir einmal KnockoutJS (hier ‚ko‘) und das Hauptmodul (hier ‚app/company‘).

Als zweiten Parameter übergeben wir eine Funktion mit zwei Parameter die die Referenzen wiederspiegeln (ko für KnockoutJS und Company für unser Hauptmodul).

Die restlichen Anweisungen erzeugen eine neue Firma, einen Mitarbeiter, eine Abteilung und verschieben dann den Mitarbeiter in die eben erzeugte Abteilung.

Abschließend wird noch ko.applyBindings von KnockoutJS aufgerufen, um die Daten anzuzeigen.

Index.cshtml

@section scripts
{
    @*main.js verlinken und RequireJS einbinden*@
    <script data-main="../Scripts/CompanyApp/main" src="~/Scripts/require.js"></script>
}

Damit nun auch die erstellte Applikation starten kann, müssen wir in der View noch ein Skript-Tag hinzufügen, welches einmal das „data-main“-Attribut hat und auch unsere „main.js“ Datei zeigt, sowie mit dem „src“-Attribut RequireJS einbindet und somit unsere Applikation initialisiert.

Fazit

Wie man nun sehen kann, haben wir mit Hilfe von RequireJS eine simple JavaScript Applikation in mehrere Dateien aufgetrennt.

Gleichzeitig brauchen wir nun nicht mehr alle Dateien einzeln und in der richtigen Reihenfolge einer View hinzufügen, sondern haben mit Hilfe der Modul Definitionen dafür gesorgt, dass diese bei Bedarf nachgeladen werden.

Screenshots:

Applikation nach der Initialisierung

Screen1

Applikation in Betrieb

Screen2

Download Project

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Time limit is exhausted. Please reload the CAPTCHA.