javascript - telerik mvc




Javascript-Code Organisation datengesteuerte Anwendung (2)

Sie können versuchen, Ihre Dateien in verschiedenen Komponenten zu trennen, da jede Komponente über einen Ordner verfügt.

Zum Beispiel: Seite 1 ist über Rechtecke, so dass Sie einen Ordner Rechteck in diesem Ordner erstellen Sie erstellen 3 Dateien rectanga.component.html, rectangle.component.css, rectanga.component.js (optional rectangle.spec.js zum Testen).

app
└───rectangle
        rectangle.component.css
        rectangle.component.html
        rectangle.component.js

Wenn also etwas Schlimmes mit einem Rechteck passiert, wissen Sie, wo das Problem liegt

Eine gute Möglichkeit, Variablen zu isolieren und an der richtigen Stelle auszuführen, ist die Verwendung eines Routers, was er an der URL überprüft und den Teil des Codes ausführt, den Sie dieser Seite zuweisen

Ich hoffe, es hilft, lassen Sie mich wissen, wenn Sie mehr Hilfe benötigen.

Ich arbeite derzeit am Front-End einer datenbankbasierten ASP.NET MVC-Anwendung im mittleren und großen Maßstab, und ich habe Zweifel , ob die richtige Code-Organisation / Design-Muster folgen wird. Die Webanwendung besteht aus mehreren Seiten, die viele mit der Razor-Vorlage definierte Kendo UI MVC-Widgets enthalten.

Für diejenigen, die mit Kendo nicht vertraut sind, wird die Rasierersyntax in Javascript wie folgt übersetzt:

Ich habe in meinem Skriptordner zwei Hauptordner definiert und meine js-Dateien wie folgt strukturiert:

  • shared // Enthält die freigegebenen js-Dateien -file1.js -file2.js

  • Seiten // Eine Datei pro Seite

    • page1.js
    • page2.js
    • ...
    • Ticket.js // Seite 4 :)

Jede js-Datei ist ein separates Modul, das mit dem folgenden Muster definiert ist:
Hinweis : Innerhalb der init Funktion wird jede Callback-Funktion für die Fenster-Events registriert und gelegentlich ein $(document).ready(function(){}) -Block.

;(function () {
    "use strict";

    function Ticket(settings) {
        this.currentPageUrls = settings.currentPageUrls;
        this.currentPageMessages = settings.currentPageMessages;
        this.currentPageEnums = settings.currentPageEnums;
        this.currentPageParameters = settings.currentPageParameters;         


        this.gridManager = new window.gridManager(); //usage of shared modules

        this.init();
    }

    Ticket.prototype.init = function () {           

            $("form").on("submit", function () {
                $(".window-content-sandbox").addClass("k-loading");
            });

            ...
    }    

    Ticket.prototype.onRequestStart = function (e) {

        ...
    }

    //private functions definition
    function private(a, b, c){

    }

    window.Ticket = Ticket;
}());   

Sobald ich meine Javascript-Funktionen in einem Modul definiert habe, füge ich die zugehörige Javascript-Datei in die Seite ein. Eine Eigenschaft meines Objekts wird in einer Variablen gespeichert, und darüber hinaus ist eine Funktion an das Widget-Ereignis gebunden (siehe: onRequestStart).

HTML / JAVASCRIPT

@(Html.Kendo().DropDownList()
      .Name("Users")
      .DataValueField("Id")
      .DataTextField("Username")
      .DataSource(d => d.Read(r => r.Action("UsersAsJson", "User"))
                        .Events(e => e.RequestStart("onRequestStart"))))



var settings = {};

var ticket = new window.Ticket(settings);

function onRequestStart(e){
    ticket.onRequestStart(e);
}

Ich habe das Gefühl, dass mein Design-Muster zu anderen Front-End-Delevopern unfreundlich sein könnte, wie ich es bin, hauptsächlich deshalb, weil ich mich dazu entschieden habe, die Javascript-Module im Jquery-Plugin nicht zu implementieren.

Erstens , mache ich alles falsch?
Zweitens , ist mein Designmuster für ein Javascript Test-Framework geeignet?
Drittens , welches sind die Must-Have-Szenarien für Jquery-Plugins?

Aktualisieren

Die Javascript-Ausgabe wurde mit der obigen Razor-Syntax hinzugefügt.


Die Organisation und das Muster scheint gut, aber ich habe ein paar Tipps:

Tipp 1:

Anstatt bestimmte globale Variablen in Ihrem Modul zu setzen, könnten Sie das Objekt stattdessen zurückgeben. Also anstatt das zu tun:

;(function () {
"use strict";

    function Ticket(settings) {
        console.log("ticket created", settings);
    }
    ...
    window.Ticket = Ticket;
}()); 

Du würdest das tun:

;window.Ticket = (function () {
"use strict";

    function Ticket(settings) {
        console.log("ticket created", settings);
    }
    ...
    return Ticket;
}()); 

Der Grund dafür ist, dass Sie in der Lage sind, Ihren Modulcode zu übernehmen und ihm ggf. einen anderen globalen Variablennamen zu geben. Wenn es einen Namenskonflikt gibt, können Sie ihn in MyTicket oder ähnliches umbenennen, ohne den internen Code des Moduls zu ändern.

Tipp 2:

Tipp 1, globale Variablen stinken. Erstellen Sie keinen Objektmanager und verwenden Sie nicht eine einzige globale Variable, um alle Ihre Objekte zu verwalten, anstatt eine separate globale Variable für jeden Objekttyp zu erstellen:

window.myCompany = (function () {
    function ObjectManager(modules) {
        this.modules = modules || {};
    }

    ObjectManager.prototype.getInstance = function(type, settings) {
        if (!type || !this.modules.hasOwnProperty(type)) {
            throw "Unrecognized object type:";
        }
        return new this.modules[type](settings);
    };

    ObjectManager.prototype.addObjectType = function(type, object) {
        if (!type) {
            throw "Type is required";
        }
        if(!object) {
            throw "Object is required";
        }
        this.modules[type] = object;
    };

    return new ObjectManager();
}());

Jetzt kann jedes Ihrer Module mit diesem einzelnen globalen Objekt verwaltet werden, an das Ihr Firmenname angehängt ist.

;(function () {
"use strict";

    function Ticket(settings) {
        console.log("ticket created", settings);
    }
    ...
    window.myCompany.addObjectType("Ticket", Ticket);
}()); 

Jetzt können Sie leicht eine Instanz für jeden einzelnen Objekttyp erhalten:

var settings = {test: true};
var ticket = window.myCompany.getInstance("Ticket", settings);

Und Sie haben nur eine globale Variable, um die Sie sich sorgen müssen.





kendo-ui