Modulares JavaScript schreiben

German (Deutsch) translation by Valentina (you can also view the original English article)

Beim Schreiben einer kompletten Webanwendung in JavaScript ist es sehr wichtig, dass sie gut organisiert ist. Die Wartung eines Spaghetti-Code-Projekts verursacht nur Kopfschmerzen und Alpträume. In diesem Tutorial zeige ich Ihnen, wie Sie Ihren Code modularisieren, um die Verwaltung großer JavaScript-Projekte zu vereinfachen.

Einführung

Vor kurzem habe ich mir eine meiner Lieblings-JavaScript-Präsentationen noch einmal angesehen: Scalable JavaScript Application Architecture von Nicolas C. Zakas. Ich fand die von ihm empfohlenen modularen JavaScript-Muster besonders faszinierend und beschloss, es auszuprobieren. Ich habe die theoretischen Code-Schnipsel aus seinen Folien genommen, sie erweitert und angepasst und bin zu dem gekommen, was ich Ihnen heute zeigen werde. Ich kann kaum behaupten, darin Experte zu sein: Über diese Methode, JavaScript zu schreiben, denke ich erst seit etwas mehr als einer Woche nach. Aber hoffentlich kann ich Ihnen zeigen, wie Sie das, was Zakas beworben hat, in die Praxis umsetzen und Sie dazu anregen, auf diese Weise zu programmieren.

Ein Wort zum begleitenden Screencast

Zu diesem Tutorial gibt er einen Screencast; es ist ziemlich lang (eigentlich fast zweieinhalb Stunden), daher ist hier das Inhaltsverzeichnis, das Ihnen beim Navigieren hilft; Ich habe jedem Abschnitt einen Titel "Folie" gegeben, um das Auffinden des Anfangs jedes Abschnitts zu erleichtern.

0:00:00 - Anfang
0:05:15 - Erstellung der Module
0:40:05 - Erstellung der Sandbox
1:04:39 - Erstellung des Kerns
1:36:55 - Erstellung der Schnittstelle (HTML & CSS)
1:51:08 - Fehlersuche!
2:02:27 – Erstellung des Kerns (Dojo-Edition)
2:18:47 - Die Vorteile besprechen

Präsentation von Nicolas Zakas

Wenn Sie sie in letzter Zeit nicht gesehen haben, sollten Sie sich Zakas' Präsentation ansehen, bevor Sie fortfahren; Das meiste von dem, was ich Ihnen zeigen werde, wird mit diesem unter Ihrem Gürtel leichter zu verstehen sein:

Die Präsentation

Hinweis: Dies ist nicht die Originalpräsentation, auf der dieses Tutorial basiert, sondern eine neuere Version desselben Vortrags.

Die Folien

Die Zusammenfassung

Zusammenfassend hat eine gute JavaScript-Anwendung also vier Schichten. Von unten nach oben sind dies wie folgt:

Die Basis: Dies wäre Ihr JavaScript-Framework, wie jQuery, wenn Sie eines verwenden. Oder Sie können Ihre eigene schreiben.
Der App-Kern: Diese Schicht ist dafür verantwortlich, alles miteinander zu verbinden und Ihre Web-App auszuführen. Es bietet auch eine Ausgleichsschicht für die nächste Schicht (die Sandbox); das mag überflüssig erscheinen, sobald Sie sich darauf eingelassen haben, und Sie werden sich fragen, warum wir die Sandbox nicht einfach direkt mit der Basis sprechen lassen. Wenn wir jedoch zuerst alles durch den Kern laufen lassen, können wir die Basis einfach gegen ein anderes Framework austauschen. Dann müssen wir nur noch die Mittelsmann-Funktionen im Kern ändern.
Die Sandbox: Dies ist die Mini-API – und die einzige API – auf die jeder Teil unserer Web-App Zugriff hat. Sobald Sie eine Sandbox erstellt haben, mit der Sie zufrieden sind, ist es sehr wichtig, dass sich die äußere Schnittstelle in keiner Weise ändert. Dies liegt daran, dass Sie viele Module davon abhängig haben und das Ändern der API bedeuten würde, jedes Modul durchzugehen und es zu aktualisieren - nicht etwas, das Sie tun möchten. Natürlich können Sie den Code in den Methoden der Sandbox ändern (solange sie immer noch dasselbe tun) oder Funktionen hinzufügen.
Die Module: Das sind die wahren Funktionen unserer App. Jedes Modul ist ein eigenständiger Code, der einen einzelnen Aspekt der Web-App ausführt. So wie ich zuvor Web-Apps geschrieben habe, ist der gesamte Modulcode in einem spaghettiartigen Durcheinander verflochten, und wenn ein Teil fehlt, stürzt die gesamte App ab. Wenn alles sauber in Module eingefügt wird (mit Interaktionen durch die Sandbox), verursacht ein fehlendes Teil keine Fehler.

Um dieses Muster zu erklären, erstellen wir einen Mini-Online-Shop (na ja, nur das Frontend). Dies zeigt wirklich den Nutzen von Modulen, denn ein Online-Shop besteht aus vielen unterschiedlichen Teilen:

ein Produktpanel
ein Einkaufswagen
ein Suchfeld
eine Möglichkeit, Produkte zu filtern

Jedes dieser Teile ist eindeutig ein separater Teil der Seite, aber alle müssen mit anderen Modulen interagieren – entweder als Initiator oder als Empfänger. Wir werden sehen, wie das alles funktioniert!

Alles klar, genug Theorie! Beginnen wir mit der Codierung!

Die Bausteine: Module

Als ich mit diesem Projekt begann, hatte ich weder einen Kern noch eine Sandbox, um daran zu arbeiten. Also beschloss ich, mit der Codierung der Module zu beginnen, da mir dies eine Vorstellung davon geben würde, was die Module benötigen, um über die Sandbox darauf zugreifen zu können.

Beim Erstellen eines Moduls habe ich ein Muster verwendet, das dem Beispielcode, den Zakas gezeigt hat, sehr nahe kommt:

CORE.create_module("search-box", function (sb) { 
    return { 
        init : function () {}, 
        destroy : function () {} 
    }; 
});

Wie Sie sehen, verwenden wir die Methode create_module auf dem CORE, um dieses Modul bei der Web-App zu registrieren (natürlich haben wir den Core noch nicht erstellt, aber wir werden es schaffen). Diese Funktion benötigt zwei Parameter: den Namen des Moduls (in diesem Fall „Suchfeld“) und eine Funktion, die das Modulobjekt zurückgibt. Was ich hier gezeigt habe, ist das einfachste Modul, das möglich ist. Beachten Sie einige Dinge über die Creator-Funktion: Erstens hat sie einen einzigen Parameter, der eine Instanz unserer Sandbox ist (wenn wir uns die Sandbox ansehen, werden wir sehen, warum eine Instanz besser ist, als wenn alle Module auf dieselbe Sandbox zugreifen Objekt). Dieses Sandbox-Objekt ist die einzige Verbindung, die das Modul zur „Außenwelt“ hat. (Natürlich gibt es, wie Zakas sagte, wirklich keine technischen Einschränkungen, die Sie daran hindern, direkt aus dem Modul auf die Basis oder den Kern zuzugreifen; Sie sollten es nur nicht tun.) Wie Sie sehen, gibt diese Funktion ein Objekt zurück, das ist unser Modulobjekt. Zumindest hat dieses Modul nur eine init-Methode (wird verwendet, wenn wir das Modul starten) und eine destroy-Methode (wird verwendet, wenn wir das Modul herunterfahren).

Lassen Sie uns also ein echtes Modul bauen.

Voller Screencast

Das Suchfeldmodul

CORE.create_module("search-box", function (sb) { 
    var input, button, reset; 
 
    return { 
        init : function () {}, 
        destroy : function () {}, 
        handleSearch : function () {}, 
        quitSearch : function () {} 
    }; 
});

Sie sollten verstehen, was hier vor sich geht: Unser Modul verwendet drei Variablen: input, button, und reset. Neben den beiden erforderlichen Modulfunktionen im Rückgabeobjekt erstellen wir zwei suchbezogene Funktionen. Ich glaube nicht, dass es einen Grund gibt, warum sie Teil des zurückgegebenen Modulobjekts sein müssen; sie könnten genauso gut über der return-Anweisung deklariert und per Closure referenziert werden. Lassen Sie uns in jede dieser Funktionen eintauchen:

init : function () { 
    input = sb.find('#search_input')[0]; 
    button = sb.find('#search_button')[0]; 
    reset  = sb.find("#quit_search")[0]; 
 
    sb.addEvent(button, 'click', this.handleSearch); 
    sb.addEvent(reset, 'click', this.quitSearch); 
},

Zuerst weisen wir die drei benötigten Variablen zu. Da wir in der Lage sein müssen, DOM-Elemente aus unseren Modulen zu finden, benötigen wir eine Find-Methode in unserer Sandbox. Aber was ist mit der [0] am Ende? Nun, unsere Methode sb.find gibt etwas zurück, das einem jQuery-Objekt ähnelt: Den Elementen, die dem Selektor entsprechen, werden nummerierte Schlüssel gegeben, und dann gibt es einige Methoden und Eigenschaften. Wir werden jedoch nur die rohen DOM-Elemente benötigen, die wir greifen (da nur ein Element eine ID hat, können wir sicher sein, dass wir nur ein Element zurückgeben).

Zwei dieser Elemente (button und reset) sind Schaltflächen, und daher müssen wir einige Ereignishandler anschließen. Das müssen wir auch der Sandbox hinzufügen! Wie Sie sehen, ist dies Ihre Standardfunktion zum Hinzufügen von Ereignissen: Sie nimmt das Element, das Ereignis und die Funktion an.

Wie wäre es mit der Zerstörung des Moduls:

destroy : function () { 
    sb.removeEvent(button, 'click', this.handleSearch); 
    sb.removeEvent(reset, 'click', this.quitSearch); 
    input = null; 
    button = null; 
    reset = null; 
},

Es ist ziemlich einfach: Es muss eine removeEvent-Funktion geben, die die Arbeit von addEvent rückgängig macht. Dann setzen wir einfach die drei Modulvariablen auf null.

Diese beiden Ereignis-Listener verweisen auf die Suchfunktionen. Schauen wir uns den ersten an:

handleSearch : function () { 
    var query = input.value; 
    if (query) { 
        sb.notify({ 
            type : 'perform-search', 
            data : query 
        }); 
    } 
},

Zuerst erhalten wir den Wert des Suchfelds. Wenn etwas drin ist, machen wir weiter. Aber was sollen wir tun? Normalerweise hätten wir bei einer dynamischen Suche (die keine Seitenaktualisierung der Ajax-Anfrage erfordert) Zugriff auf das Produktpanel und könnten sie entsprechend filtern. Aber unser Modul muss mit oder ohne Produktpanel existieren können; Außerdem ist die Verbindung zur Außenwelt nur über die Sandbox möglich. Hier ist also, was Zakas vorgeschlagen hat: Wir teilen der Sandbox (die wiederum dem Kern mitteilt) einfach mit, dass der Benutzer eine Suche durchgeführt hat. Dann wird der Kern diese Informationen den anderen Modulen anbieten. Wenn eines antwortet, nimmt er die Daten und läuft damit. Wir tun dies über die Methode sb.notify; sie braucht ein Objekt mit zwei Eigenschaften: die Art des Ereignisses, das wir durchführen, und die Daten, die sich auf das Ereignis beziehen. In diesem Fall führen wir ein „Perform-Search“-Ereignis durch und die relevanten Daten sind die Suchanfrage. Das ist alles, was das Suchfeldmodul tun muss. Wenn es ein anderes Modul gibt, das die Durchsuchbarkeit offengelegt hat, gibt der Kern ihm die Daten.

Das Schöne daran ist, dass diese Methode absolut vielseitig ist. Das Modul, das dieses Ereignis in unserem Beispiel verwendet, macht nichts Ajax-y, aber es gibt keinen Grund, warum ein anderes Modul dies nicht tun oder auf eine völlig andere Weise suchen könnte.

Die Methode quitSearch ist nicht viel komplizierter:

quitSearch : function () { 
    input.value = ""; 
    sb.notify({ 
        type : 'quit-search', 
        data : null 
    });                 
}

Zuerst leeren wir das Suchfeld; dann teilen wir der Sandbox mit, dass wir eine „quit-search“ ausführen; In diesem Fall liegen keine relevanten Daten vor.

Ob Sie es glauben oder nicht, das ist das gesamte Suchmodul. Ziemlich einfach, oder? Kommen wir zum nächsten.

Das Filterleistenmodul

Wir möchten, dass unser Online-Shop Benutzern die Möglichkeit gibt, Produkte nach Kategorie anzuzeigen. Lassen Sie uns also eine Filterleiste implementieren, in der der Benutzer auf die Kategorienamen klickt, um nur die Elemente in der angegebenen Kategorie anzuzeigen.

CORE.create_module("filters-bar", function (sb) { 
    var filters; 
    return { 
        init : function () { 
            filters = sb.find('a'); 
            sb.addEvent(filters, 'click', this.filterProducts); 
        }, 
        destroy : function () { 
            sb.removeEvent(filters, 'click', this.filterProducts); 
            filters = null; 
        }, 
        filterProducts : function (e) { 
            sb.notify({ 
                type : 'change-filter', 
                data : e.currentTarget.innerHTML 
            }); 
        } 
    };         
});

Dieser ist nicht sehr kompliziert. Wir benötigen eine Variable, um die Filter zu speichern. Wie Sie sehen können, verwenden wir sb.find, um alle Anker zu erhalten. Aber wie stehen die Chancen, dass alle Anker auf der Seite Filter sind? Nicht sehr gut. Sobald wir die find-Methode schreiben, werden Sie sehen, wie sie nur die Elemente innerhalb des DOM-Elements zurückgibt, das unserem Modul entspricht. Anschließend fügen wir den Filtern ein Click-Ereignis hinzu, das die Methode filterProduct aufruft. Wie Sie sehen können, teilt diese Methode der Sandbox einfach unser „change-filter“-Ereignis mit und gibt ihr den Text des Links an, auf den auf die Daten geklickt wurde (e ist das Ereignisobjekt und currentTarget ist das Element, auf das geklickt wurde.

Mit destroy werden natürlich die Ereignis-Listener einfach gelöscht.

Das Produktpanel-Modul

Dieses wird ziemlich langwierig und möglicherweise kompliziert sein, also halte dich fest! Wir beginnen mit einer Shell:

CORE.create_module(“product-panel”, function (sb) {  
    var products; 
         
    function eachProduct(fn) { 
        var i = 0, product; 
        for ( ; product = products[i++]; ) { 
            fn(product); 
        } 
    } 
    function reset () { 
        eachProduct(function (product) { 
            product.style.opacity = '1';     
        }); 
    } 
    return { 
        init : function () {}, 
        reset : reset, 
        destroy : function () {}, 
        search : function (query) {}, 
        change_filter : function (filter) {}, 
        addToCart : function (e) {} 
 
    };       
});

Nehmen Sie sich einen Moment Zeit, um darüber nachzudenken; es gibt nicht viel, das sich von unseren anderen Modulen unterscheidet; es gibt einfach mehr davon. Der Hauptunterschied besteht darin, dass ich zwei Hilfsfunktionen verwendet habe, die außerhalb des zurückgegebenen Objekts erstellt wurden. Die erste heißt eachProduct, und wie Sie sehen, nimmt sie einfach eine Funktion und führt sie für jedes Element in der Produktliste aus. Die andere ist eine Reset-Funktion, die wir gleich verstehen werden.

Schauen wir uns nun die init- und die destroy-Funktionen an.

init : function () { 
    var that = this; 
    products = sb.find('li'); 
    sb.listen({ 
            'change-filter'  : this.change_filter, 
            'reset-fitlers' : this.reset, 
            'perform-search' : this.search, 
            'quit-search'    : this.reset 
        }); 
    eachProduct(function (product) { 
        sb.addEvent(product, 'click', that.addToCart);        
    });  
}, 
destroy : function () { 
    var that = this; 
    eachProduct(function (product) { 
        sb.removeEvent(product, 'click', that.addToCart);         
    }); 
    sb.ignore(['change-filter', 'reset-filters', 'perform-search', 'quit-search']); 
},

Innerhalb von init sammeln wir alle Produkte (die in Listenelementen dargestellt werden). Dann müssen wir der Sandbox mitteilen, dass wir an mehreren Events interessiert sind. Wir übergeben ein Objekt an die Methode sb.listen; dieses Objekt verwendet den Ereignisnamen als Schlüssel und die Ereignisfunktion als Wert für jede Eigenschaft. Zum Beispiel teilen wir der Sandbox mit, dass wir, wenn jemand anderes ein „Perform-Search“-Ereignis ausführt, darauf reagieren möchten, indem wir unsere search-Funktion ausführen. Hoffentlich beginnen Sie zu sehen, wie das funktionieren wird!

Dann verwenden wir unsere eachProduct-Hilfsfunktion, um jedem Produkt eine On-Click-Funktion zuzuweisen. Wenn ein Produkt angeklickt wurde, führen wir addToCart aus. Wir müssen this zwischenspeichern, da sich sein Wert auf das globale Objekt innerhalb der Funktion ändert.

Bei Destroy entfernen wir einfach die Ereignishandler aus den Produkten und teilen der Sandbox mit, dass wir nicht mehr an den Ereignissen interessiert sind (eigentlich glaube ich nicht, dass dies aufgrund der Art und Weise, wie wir die Dinge im Kern handhaben, notwendig ist, aber Ich habe es nur für den Fall eingeworfen, dass sich etwas am "Backend" ändert).

Jetzt sehen wir uns die Funktionen an, die aufgerufen werden, wenn andere Module Ereignisse auslösen:

search : function (query) { 
    reset(); 
    query = query.toLowerCase(); 
    eachProduct(function (product) { 
        if (product.getElementsByTagName('p')[0].innerHTML.toLowerCase().indexOf(query) < 0) { 
            product.style.opacity = '0.2'; 
        }  
    }); 
}, 
change_filter : function (filter) { 
    reset(); 
    eachProduct(function (product) { 
        if (product.getAttribute('data-8088-keyword').toLowerCase().indexOf(filter.toLowerCase()) < 0) { 
            product.style.opacity = '0.2'; 
        } 
    }); 
}, 
addToCart : function (e) { 
    var li = e.currentTarget; 
    sb.notify({ 
        type : 'add-item', 
        data : { id : li.id, name : li.getElementsByTagName('p')[0].innerHTML, price : parseInt(li.id, 10) } 
    });  
}

Wir beginnen mit search; Diese Funktion wird aufgerufen, wenn die Aktion „Suche durchführen“ stattfindet. Wie Sie sehen, verwendet es die Suchanfrage als Parameter. Zuerst setzen wir den Produktbereich zurück (nur für den Fall, dass die Ergebnisse einer vorherigen Suche oder Filterung da sind). Dann durchlaufen wir jedes Produkt mit unserer Hilfsfunktion. Denken Sie daran, dass das Produkt ein Listenelement ist; Darin befindet sich ein Absatz mit der Produktbeschreibung, und danach werden wir suchen (in einem realen Beispiel wäre dies wahrscheinlich nicht der Fall). Wir erhalten den Text des Absatzes und vergleichen ihn mit dem Text der Abfrage (beachten Sie, dass beide durch toLowerCase() ausgeführt wurden). Wenn das Ergebnis kleiner als 0 ist, was bedeutet, dass keine Übereinstimmung gefunden wurde, setzen wir die Deckkraft des Produkts auf 0,2. So verstecken wir Produkte in diesem Beispiel. Das ist es!

Jetzt ist ein guter Zeitpunkt, darauf hinzuweisen, dass die reset-Funktion lediglich die Deckkraft aller Produkte auf 1 zurücksetzt.

Die Methode changeFilter ist search ziemlich ähnlich; Anstatt die Produktbeschreibung zu durchsuchen, nutzen wir diesmal die HTML5-Daten-*-Attribute. Dadurch können wir unseren HTML-Elementen benutzerdefinierte Attribute hinzufügen, ohne die Spezifikationsregeln zu verletzen. Sie müssen jedoch mit „data-“ beginnen, und ich habe auch ein persönliches Präfix hinzugefügt, damit sie nicht mit Attributen in Konflikt stehen, die der Code von Drittanbietern verwenden könnte. Der an diese Funktion übergebene Filter wird mit dem Datenattribut verglichen, das die Namen der Kategorien der Elemente enthält. Wenn es keine Übereinstimmungen gibt, reduzieren wir die Deckkraft des Elements.

Die letzte Funktion ist addToCart, die ausgeführt wird, wenn eines der Produkte angeklickt wird. Wir erhalten das angeklickte Element und senden dann eine Benachrichtigung an das System, die es über unser Ereignis „Element hinzufügen“ informiert. Diesmal sind die von uns übergebenen Daten ein Objekt. Es enthält die Produkt-ID, den Produktnamen und den Produktpreis. In diesem Beispiel sind wir faul und verwenden die Element-ID als ID und Preis und die Produktbeschreibung als Namen.

Das Einkaufswagen-Modul

Wir haben noch ein Modul zum Anschauen. Es ist das Modul „Warenkorb“:

CORE.create_module(“shopping-cart”, function (sb) {  
    var cart, cartItems; 
 
    return { 
        init : function () { 
            cart = sb.find('ul')[0];  
            cartItems = {}; 
 
            sb.listen({ 
                'add-item' : this.addItem 
            }); 
        }, 
        destroy : function () { 
            cart = null; 
            cartItems = null; 
            sb.ignore(['add-item']); 
        }, 
        addItem : function (product) { 
        } 
    }; 
});

Ich denke, Sie haben jetzt den Dreh raus; Wir verwenden zwei Variablen: den Warenkorb und die Artikel im Warenkorb. Bei der Initialisierung des Moduls setzen wir diese auf die ul im Warenkorb bzw. ein leeres Objekt. Dann teilen wir der Sandbox mit, dass wir auf ein Ereignis reagieren möchten. Bei der Zerstörung werden wir das alles rückgängig machen.

Folgendes sollte passieren, wenn ein Artikel in den Warenkorb gelegt wird:

addItem : function (product) { 
    var entry = sb.find('#cart-' + product.id + ' .quantity')[0]; 
    if (entry) { 
        entry.innerHTML =  (parseInt(entry.innerHTML, 10) + 1); 
        cartItems[product.id]++; 
    } else { 
        entry = sb.create_element('li', { id : "cart-" + product.id, children : [ 
                sb.create_element('span', { 'class' : 'product_name', text : product.name }), 
                sb.create_element('span', { 'class' : 'quantity', text : '1'}), 
                sb.create_element('span', { 'class' : 'price', text : '$' + product.price.toFixed(2) }) 
                ], 
                'class' : 'cart_entry' }); 
 
        cart.appendChild(entry); 
        cartItems[product.id] = 1; 
    } 
 
}

Diese Funktion nimmt das Produktobjekt, das wir gerade im Produkt-Panel-Modul gesehen haben. Dann erhalten wir das Element mit dem Selektor ‘#cart-’ + product.id + ’ .quantity’; Dies sucht nach einem Element mit einer Klasse von ‚quantity‘ innerhalb eines Elements mit einer ID von „cart-id_number“. Wenn dieses Produkt zuvor in den Warenkorb gelegt wurde, wird es gefunden. Wenn es gefunden wird, erhöhen wir das innerHTML dieses Elements (die Menge dieses Produkts, das der Benutzer dem Auto hinzugefügt hat) um eins und aktualisieren den Eintrag im cartItems-Objekt, das den Kauf verfolgt.

Wenn das Element nicht gefunden wurde, ist dies das erste Mal, dass der Benutzer eines dieser Produkte in den Warenkorb legt. In diesem Fall verwenden wir die create_element-Methode der Sandbox; Wie Sie sehen, wird ein Attributobjekt ähnlich wie jQuery verwendet. Der Sonderfall hier ist die children-Eigenschaft, bei der es sich um ein Array von Elementen handelt, die in das von uns erstellte Element eingefügt werden. Wie Sie sehen, erstellen wir im Grunde ein Listenelement mit drei Bereichen: Produktname, Menge und Preis. Dann hängen wir diesen Listenartikel an den Warenkorb an und fügen das Produkt dem cartItems-Objekt hinzu.

Das ist der gesamte Code für unsere Module; Ich sollte beachten, dass ich dies alles in einer Datei namens modules.js abgelegt habe. Jetzt, da wir wissen, mit welcher Schnittstelle unsere Module arbeiten müssen, können wir das bauen … und das ist die Sandbox.

Die Unterstützung: Sandbox

Ich weiß, dass ich das bereits erwähnt habe, aber es ist ziemlich wichtig, dass sich die nach außen gerichtete Oberfläche der Sandbox nicht ändert. Dies liegt daran, dass alle Module davon abhängen. Sicher, Sie können Methoden hinzufügen oder den Code innerhalb von Methoden ändern, solange Sie die Methoden oder das, was die Funktion tut/zurückgibt, nicht ändern.

Wenn wir die Datei modules.js destillieren, sehen wir, dass dies die Methoden sind, die die Sandbox den Modulen geben muss:

find
addEvent
removeEvent
notify
listen
ignore
create_element

Also machen wir uns an die Arbeit. Da ich mit dem Code Sandbox.create eine Sandbox-Instanz erstellen möchte, machen wir daraus ein Objekt mit(derzeit) nur einer Methode.

var Sandbox = { 
    create : function (core, module_selector) { 
            var CONTAINER = core.dom.query('#' + module_selector); 
            return { 
                 
            }; 
        }     
};

Hier ist unser Anfang. Wie Sie sehen, benötigt die create-Methode zwei Parameter: eine Referenz auf den Kern und den Namen des Moduls, an das sie übergeben wird. Dann erstellen wir eine Variable, CONTAINER, die auf das DOM-Element verweist, das dem Modulcode entspricht. Beginnen wir nun mit der Codierung der Funktionen, die wir aufgelistet haben.

1	find : function (selector) {
2	return CONTAINER.query(selector);
3	},

Das ist ziemlich einfach. Tatsächlich sind die meisten Funktionen in der Sandbox ziemlich einfach, da es sich um einen dünnen Wrapper handeln soll, der dem Modul genau das richtige Maß an Zugriff auf den Kern bietet. Als die von uns aufgerufene Methode core.dom.query den Container zurückgab, gab sie dem Container eine Methode, die es ihm ermöglicht, per Selektor nach untergeordneten Elementen zu suchen; Wir verwenden dies, um die Fähigkeit eines Moduls, das DOM zu beeinflussen, einzuschränken, so dass es sowohl im HTML- als auch im JavaScript-Modul ein Modul bleibt.

addEvent : function (element, evt, fn) { 
    core.dom.bind(element, evt, fn); 
}, 
removeEvent : function (element, evt, fn) { 
    core.dom.unbind(element, evt, fn); 
},

Wie ich schon sagte, sind die meisten dieser Sandbox-Funktionen ziemlich klein; Wir werden die Ereignisdaten einfach zum Anschluss an den Kern übertragen.

notify : function (evt) { 
    if(core.is_obj(evt) && evt.type) { 
        core.triggerEvent(evt); 
    } 
}, 
listen : function (evts) { 
    if (core.is_obj(evts)) { 
        core.registerEvents(evts, module_selector); 
    }             
},  
ignore : function (evts) { 
    if (core.is_arr(evts)) { 
        core.removeEvents(evts, module_selector); 
    }          
},

Diese drei Funktionen sind, wie Sie sich erinnern werden, die Vehikel, mit denen die Module andere Module über ihre Aktionen informieren. Ich habe diesen eine kleine Fehlerprüfung hinzugefügt, um sicherzustellen, dass die Ereignisdaten alle in Ordnung sind, bevor wir sie an den Kern senden. Beachten Sie, dass wir auch den Namen des Moduls übergeben müssen, wenn wir dem Kern mitteilen, worauf wir hören oder was wir ignorieren.

create_element : function (el, config) { 
    var i, text; 
    el = core.dom.create(el); 
    if (config) { 
        if (config.children && core.is_arr(config.children)) { 
            i = 0; 
            while (config.children[i]) { 
                el.appendChild(config.children[i])); 
                i++; 
            } 
            delete config.children; 
        } else if (config.text) { 
           text = document.createTextNode(config.text); 
           delete config.text; 
           el.appendChild(text); 
        } 
        core.dom.apply_attrs(el, config); 
    } 
    return el; 
}

Dies ist offensichtlich die längste Funktion in der Sandbox (und um ehrlich zu sein, je mehr ich darüber nachdenke, desto mehr sollte sie meiner Meinung nach im Kern sein, aber trotzdem …). Wie wir wissen, nimmt sie den Namen eines Elements und eines Konfigurationsobjekts an. Wir beginnen mit der Erstellung des DOM-Elements (verwenden Sie eine Kernmethode). Wenn es dann ein Konfigurationsobjekt gibt und es ein Array namens children hat, werden wir jedes Kind durchlaufen und es an das Element anhängen. Dann löschen wir die children-Eigenschaft. Andernfalls, wenn wir eine text-Eigenschaft haben, setzen wir den Text des Elements darauf und löschen die text-Eigenschaft (in diesem Beispiel können wir nicht sowohl text- als auch untergeordnete Elemente haben). Schließlich verwenden wir eine weitere Kernfunktion, um die verbleibenden Attribute anzuwenden und das Element zurückzugeben.

Und das ist das Ende der Sandbox. Mir ist klar, dass dies eine ziemlich einfache Sandbox sein könnte, aber es sollte Ihnen eine Vorstellung davon geben, wie die Sandbox funktioniert. Außerdem können Sie bei der Verwendung andere Methoden hinzufügen, wenn Ihre Module dies erfordern.

Das Fundament: Basis und Kern

Jetzt sind wir bereit, zum Kern überzugehen. Hier ist, womit wir beginnen:

var CORE = (function () { 
    var moduleData = {}, debug = true; 
 
    return { 
        debug : function (on) { 
            debug = on ? true : false; 
        }, 
 
    }; 
 
}());

Wir werden das Modul data-Objekt verwenden, um alles zu speichern, was Sie über die Module wissen müssen; Die Debug-Variable steuert, ob Fehler in der Konsole protokolliert werden oder nicht. Wir haben eine einfache Debug-Funktion, um Fehler ein- und auszuschalten.

Beginnen wir mit der Funktion create_module, mit der wir unsere Module registriert haben:

create_module : function (moduleID, creator) { 
    var temp; 
    if (typeof moduleID === 'string' && typeof creator === 'function') { 
        temp = creator(Sandbox.create(this, moduleID)); 
        if (temp.init && temp.destroy && typeof temp.init === 'function' && typeof temp.destroy === 'function') { 
            moduleData[moduleID] = { 
                create : creator, 
                instance : null 
            }; 
            temp = null; 
        } else { 
            this.log(1, "Module \"" + moduleId + "\" Registration: FAILED: instance has no init or destroy functions"); 
        } 
    } else { 
        this.log(1, "Module \"" + moduleId +  "\" Registration: FAILED: one or more arguments are of incorrect type" ); 
 
    } 
},

Als erstes bestätigen wir, dass die an die Funktion übergebenen Parameter den richtigen Typ haben; Wenn dies nicht der Fall ist, rufen wir eine Protokollfunktion auf, die eine Schweregradnummer und eine Nachricht benötigt (wir werden die Protokollfunktion in einigen Minuten sehen).

Als Nächstes erstellen wir eine Kopie des fraglichen Moduls, um sicherzustellen, dass es die Funktionen init und Destroy hat; Wenn nicht, protokollieren wir erneut einen Fehler. Wenn jedoch alles in Ordnung ist, fügen wir moduleData ein Objekt hinzu; wir speichern die Creator-Funktion und einen leeren Platz für die Instanz, wenn wir das Modul starten. Dann löschen wir die temporäre Kopie des Moduls.

start : function (moduleID) { 
    var mod = moduleData[moduleID]; 
    if (mod) { 
        mod.instance = mod.create(Sandbox.create(this, moduleID)); 
        mod.instance.init(); 
    } 
}, 
start_all : function () { 
    var moduleID; 
    for (moduleID in moduleData) { 
        if (moduleData.hasOwnProperty(moduleID)) { 
            this.start(moduleID); 
        } 
    } 
},

Als nächstes fügen wir die Funktion zum Starten der Module hinzu; wie zu erwarten, akzeptiert es einen Modulnamen als einzelnen Parameter. Wenn in moduleData ein entsprechendes Modul vorhanden ist, führen wir seine create-Methode aus und übergeben ihm eine neue Sandbox-Instanz. Dann starten wir es, indem wir seine init-Methode ausführen.

Wir können eine Funktion erstellen, die es einfach macht, alle Module auf einmal zu starten, da dies wahrscheinlich etwas ist, was wir tun möchten. Wir müssen nur moduleData durchlaufen und jede moduleID an die Startmethode senden. Vergessen Sie nicht, den hasOwnProperty-Teil zu verwenden; Ich weiß, dass es unnötig und hässlich erscheint (zumindest für mich), aber es ist da, nur für den Fall, dass jemand dem Prototypobjekt des Objekts einen Gegenstand hinzugefügt hat.

stop : function (moduleID) { 
	var data; 
	if (data = moduleData[moduleId] && data.instance) { 
		data.instance.destroy(); 
		data.instance = null; 
	} else { 
		this.log(1, "Stop Module '" + moduleID + "': FAILED : module does not exist or has not been started"); 
	} 
}, 
stop_all : function () { 
	var moduleID; 
	for (moduleID in moduleData) { 
		if (moduleData.hasOwnProperty(moduleID)) { 
			this.stop(moduleID); 
		} 
	} 
},

Die nächsten beiden Funktionen sollten offensichtlich sein: stop und stop_all. Die stop-Funktion nimmt einen Modulnamen an; Wenn das System ein Modul mit diesem Namen kennt und dieses Modul ausgeführt wird, rufen wir die destroy-Methode des Moduls auf und und setzen dann die Instanz auf null. Wenn das Modul nicht existiert oder nicht ausgeführt wird, protokollieren wir den Fehler.

Die Funktion stop_all ist genau wie start_all, außer dass sie in jedem Modul stop aufruft.

Als nächstes: Umgang mit den Ereignissen.

registerEvents : function (evts, mod) { 
	if (this.is_obj(evts) && mod) { 
		if (moduleData[mod]) { 
			moduleData[mod].events = evts; 
		} else { 
			this.log(1, ""); 
		} 
	} else { 
		this.log(1, ""); 
	} 
}, 
triggerEvent : function (evt) { 
	var mod; 
	for (mod in moduleData) { 
		if (moduleData.hasOwnProperty(mod)){ 
			mod = moduleData[mod]; 
			if (mod.events && mod.events[evt.type]) { 
				mod.events[evt.type](evt.data); 
			} 
		} 
	} 
}, 
removeEvents : function (evts, mod) { 
	var i = 0, evt; 
	if (this.is_arr(evts) && mod && (mod = moduleData[mod]) && mod.events) { 
		for ( ; evt = evts[i++] ; ) { 
				delete mod.events[evt]; 
			} 
	} 
},

Wie wir wissen, verwendet registerEvents ein Ereignisobjekt und das Modul, das sie registriert. Auch hier führen wir einige Fehlerüberprüfungen durch (ich habe die Fehler in diesem Fall leer gelassen, nur um das Beispiel zu vereinfachen). Wenn evts ein Objekt ist und wir wissen, von welchem Modul wir sprechen, stopfen wir das Objekt einfach in das Schließfach des Moduls in moduleData.

Wenn es um das Auslösen von Ereignissen geht, erhalten wir ein Objekt mit einem Typ und Daten. Wir werden jedes Modul in moduleData noch einmal durchlaufen: Wenn das Modul eine Ereigniseigenschaft hat und dieses Ereignisobjekt einen Schlüssel hat, der dem Ereignis entspricht, das wir ausführen, rufen wir die für dieses Ereignis gespeicherte Funktion auf und übergeben ihr die Ereignisnummer Daten.

Das Entfernen von Ereignissen ist noch einfacher. wir erhalten das events-Objekt und (nach der üblichen Fehlerprüfung) durchlaufen wir es und entfernen die Events im Array aus dem Event-Objekt des Moduls. (Hinweis: Ich glaube, ich habe das beim Screencast etwas durcheinander gebracht, aber dies ist die richtige Version.)

log : function (severity, message) { 
	if (debug) { 
		console[ (severity === 1) ? 'log' : (severity === 2) ? 'warn' : 'error'](message); 
	} else { 
		// send to the server 
	}      
},

Hier ist die Log-Funktion, die uns schon seit einiger Zeit verfolgt; grundsätzlich, wenn wir uns im Debug-Modus befinden, werden wir Fehler in der Konsole protokollieren; andernfalls senden wir sie an den Server. Oh, das schicke ternäre Zeug? Das verwendet nur das Schweregrad-Argument, um zu entscheiden, welche der Funktionen von Firebug verwendet werden soll, um den Fehler zu protokollieren: 1 === console.log, 2 === console.warn, >2 === console.error.

Jetzt können wir uns den Teil des Kerns ansehen, der der Sandbox die Basisfunktionalität verleiht. für das meiste davon habe ich sie in ein dom-Objekt eingeordnet, weil ich auf diese Weise zwanghaft bin.

dom : { 
	query : function (selector, context) { 
		var ret = {}, that = this, jqEls, i = 0; 
 
		if (context && context.find) { 
			jqEls = context.find(selector); 
		} else { 
			jqEls = jQuery(selector); 
		} 
		 
		ret = jqEls.get(); 
		ret.length = jqEls.length; 
		ret.query = function (sel) { 
			return that.query(sel, jqEls); 
		} 
		return ret; 
	},

Hier ist unsere erste Funktion, query. Sie braucht einen Selektor und einen Kontext. Denken Sie daran, dies ist der Kern, auf den wir direkt auf die Basis verweisen können (die jQuery ist). In diesem Fall sollte der Kontext ein jQuery-Objekt sein. Wenn der Kontext eine find-Methode hat, setzen wir jqEls auf das Ergebnis von context.find(selector); Wenn Sie mit jQuery vertraut sind, wissen Sie, dass dies nur die Elemente erhält, die untergeordnete Elemente des context sind. So erhalten wir die Funktionalität von sandbox.query! Dann setzen wir unser Rückgabeobjekt auf das Ergebnis des Aufrufs der get-Methode von jQuery; Dies gibt ein Objekt mit unformatierten dom-Elementen zurück. Dann geben wir ret die Länge-Eigenschaft, damit sie leicht durchgeschleift werden kann. Schließlich geben wir ihm eine Abfragefunktion: Diese Funktion benötigt nur einen Parameter, einen Selektor, und ruft core.dom.query auf, wobei dieser Selektor und jqEls als Parameter übergeben werden. Das war's!

bind : function (element, evt, fn) { 
	if (element && evt) { 
		if (typeof evt === 'function') { 
			fn = evt; 
			evt = 'click'; 
		} 
		jQuery(element).bind(evt, fn); 
	} else { 
		// log wrong arguments 
	} 
}, 
unbind : function (element, evt, fn) { 
	if (element && evt) { 
		if (typeof evt === 'function') { 
			fn = evt; 
			evt = 'click'; 
		} 
		jQuery(element).unbind(evt, fn); 
	} else { 
		// log wrong arguments 
	} 
},

In den DOM-Event-Bind- und Unbind-Funktionen habe ich beschlossen, dem Benutzer einen Vorteil bereitzustellen. Die Benutzer müssen mindestens zwei Funktionen übergeben, aber wenn der evt-Parameter eine Funktion ist, gehen wir davon aus, dass der Benutzer den Ereignistyp verlassen hat, den er verarbeiten möchte. In diesem Fall gehen wir von einem Klick aus, da er am häufigsten vorkommt. Dann verwenden wir einfach die Bindefunktion von jQuery, um es zu verbinden. Ich sollte beachten, dass, da unsere Abfragefunktion (minimal) umschlossene DOM-Sätze zurückgibt, ähnlich wie die von jQuery, diese Funktion unser Set an das Jquery-Objekt übergeben kann und keine Probleme damit hat.

Unsere Funktion zum Aufheben der Bindung ist genau dieselbe, außer dass sie natürlich die Ereignisse aufhebt.

    create: function (el) { 
        return document.createElement(el);         
    }, 
    apply_attrs: function (el, attrs) { 
        jQuery(el).attr(attrs);              
    } 
}, // end of dom object 
is_arr : function (arr) { 
    return jQuery.isArray(arr);          
}, 
is_obj : function (obj) { 
    return jQuery.isPlainObject(obj);          
}

Ich habe die letzten vier Funktionen zusammengefasst, weil sie alle ziemlich einfach sind; dom.create gibt einfach ein neues DOM-Element zurück; dom.apply_attrs verwendet die attr-Methode von jQuery, um den Elementattributen zuzuweisen. Schließlich haben wir die beiden Hilfsfunktionen, die wir verwendet haben, um unsere Parameter zu überprüfen.

Ob Sie es glauben oder nicht, das ist der ganze Kern; und unsere Basis ist jQuery, also sind wir bereit, dies zusammenzustellen.

Alles zusammenfügen

Jetzt können wir etwas HTML erstellen, damit wir unser JavaScript in Aktion sehen können. Ich werde dies nicht im Detail durchgehen, da dies nicht der Sinn des Tutorials ist.

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Online Store</title> 
    <link rel="stylesheet" href="default.css" /> 
</head> 
<body> 
    <div id="main"> 
        <div id="search-box"> 
            <input id="search_input" type="text" name='q' /> 
            <button id="search_button">Search</button> 
            <button id="quit_search">Reset</button> 
        </div> 
 
        <div id="filters-bar"> 
            <ul> 
                <li><a href="#red">Red</a></li> 
                <li><a href="#blue">Blue</a></li> 
                <li><a href="#mobile">Mobile</a></li> 
                <li><a href="#accessory">Accessory</a></li> 
            </ul> 
        </div> 
 
       <div id="product-panel"> 
            <ul> 
                <li id="1" data-8088-keyword="red"><img src="img/1.jpg"><p>First Item</p></li> 
                <li id="2" data-8088-keyword="blue"><img src="img/2.jpg"><p>Second Item</p></li> 
                <li id="3" data-8088-keyword="mobile"><img src="img/3.jpg"><p>Third Item</p></li> 
                <li id="4" data-8088-keyword="accessory"><img src="img/4.jpg"><p>Fourth Item</p></li> 
                <li id="5" data-8088-keyword="red mobile"><img src="img/5.jpg"><p>Fifth Item</p></li> 
                <li id="6" data-8088-keyword="blue mobile"><img src="img/6.jpg"><p>Sixth Item</p></li> 
                <li id="7" data-8088-keyword="red accessory"><img src="img/7.jpg"><p>Seventh Item </p></li> 
                <li id="8" data-8088-keyword="blue accessory"><img src="img/8.jpg"><p>Eighth Item</p></li> 
                <li id="9" data-8088-keyword="red blue"><img src="img/9.jpg"><p>Ninth Item</p></li> 
                <li id="10" data-8088-keyword="mobile accessory"><img src="img/10.jpg"><p>Tenth Item</p></li> 
            </ul> 
 
        </div> 
         
        <div id="shopping-cart"> 
            <ul> 
            </ul>  
        </div>  
    </div> 
    <script src="js/jquery.js"></script> 
    <script src="js/core-jquery.js"></script> 
    <script src="js/sandbox.js"></script> 
    <script src="js/modules.js"></script> 
</body> 
</html>

Es ist nichts Besonderes; Es ist wichtig zu beachten, dass jedes der Haupt-Divs IDs hat, die den JavaScript-Modulen entsprechen. Und vergessen Sie nicht die HTML5 data-*-Attribute, die uns die Kategorien zum Filtern geben.

Natürlich müssen wir es stylen:

 
body { 
    background:#ececec; 
    font:13px/1.5 helvetica, arial, san-serif; 
} 
#main {  
    width:950px; 
    margin:auto;  
    overflow:hidden;  
} 
#search-box, #filters-bar {  
    margin-left:10px;  
} 
#filters-bar ul {  
    list-style-type:none;  
    margin:10px 0;  
    padding:0;  
    border-top:2px solid #474747;  
    border-bottom:2px solid #474747;  
    } 
#filters-bar li {  
    display:inline-block;  
    padding:5px 10px 5px 0; 
} 
#filters-bar li a { 
    text-decoration:none; 
    font-weight:bold; 
    color:#474747; 
} 
#product-panel { 
    float:left; 
    width: 588px; 
} 
#product-panel ul { 
    margin:0; 
    padding:0; 
} 
#product-panel li { 
    list-style-type:none; 
    display:inline-block; 
    text-align:center; 
    background:#474747; 
    border:1px solid #eee; 
    padding:15px; 
    margin:10px; 
} 
#product-panel li p { 
    margin:10px 0 0 0; 
} 
 
#shopping-cart { 
    float:left; 
    background:#ccc; 
    height:300px; 
    width:300px; 
    padding:30px; 
    border:1px solid #474747; 
} 
 
#shopping-cart ul { 
    list-style-type:none; 
    padding:0; 
} 
 
#shopping-cart li { 
    padding:3px; 
    margin:2px 0; 
    background:#ececec; 
    border: 1px solid #333; 
} 
 
#shopping-cart .product_name { 
    display:inline-block; 
    width:230px; 
} 
 
#shopping-cart .price { 
    display: inline-block; 
    float:right; 
}

Es ist schwer, es in Aktion zu zeigen (dafür ist der Screencast da!), aber hier sind ein paar Aufnahmen:

Nun, das wäre alles, aber lassen Sie uns noch etwas tun: Lassen Sie uns einen Kern erstellen, der auf Dojo funktioniert, um zu zeigen, wie die Verwendung eines Kerns, wie wir es getan haben, das Wechseln der Basen erleichtert.

Warum Dojo? Um ganz ehrlich zu sein, habe ich Mootools und YUI ausprobiert, aber es gab ein paar Herausforderungen, die länger dauern würden als die Zeit, die ich brauchte, um es herauszufinden. Ich denke sicherlich nicht, dass es unmöglich ist, sie zu verwenden; Wenn Sie einen Kern mit Mootools, YUI oder einem anderen JavaScript-Framework erstellen, würde ich ihn gerne sehen. Lassen Sie uns vorerst einen mit Dojo erstellen.

Natürlich müssen wir keine der Modul-Handling-Funktionen ändern; In unserem Fall müssen wir lediglich den Abschnitt dom, is_arr und is_obj ändern.

query : function (selector, context) { 
    var ret = {}, that = this, len, i =0, djEls; 
 
    djEls = dojo.query( ((context) ? context + " " : "") + selector); 
 
    len = djEls.length; 
 
    while ( i < len) { 
        ret[i] = djEls[i++]; 
    } 
    ret.length = len; 
    ret.query = function (sel) { 
        return that.query(sel, selector); 
    } 
    return ret; 
},

Hier ist die Abfragefunktion, die so umgeschrieben wurde, dass sie mit Dojo funktioniert. Wie Sie sehen können, macht es genau das, was die jQuery-Version tut; Der Hauptunterschied besteht darin, dass Kontext eine Zeichenfolge ist, die am Anfang des Selektors angehängt wird.

Nun zu den DOM-Ereignisfunktionen:

eventStore : {}, 
bind : function (element, evt, fn) { 
    if (element && evt) { 
        if (typeof evt === 'function') { 
            fn = evt; 
            evt = 'click'; 
        } 
        if (element.length) { 
            var i = 0, len = element.length; 
            for ( ; i < len ; ) { 
                this.eventStore[element[i] + evt + fn] = dojo.connect(element[i], evt, element[i], fn); 
                i++; 
            } 
        } else { 
           this.eventStore[element + evt + fn] = dojo.connect(element, evt, element, fn); 
        } 
    } 
}, 
unbind : function (element, evt, fn) { 
    if (element && evt) { 
        if (typeof evt === 'function') { 
            fn = evt; 
            evt = 'click'; 
        } 
         if (element.length) { 
            var i = 0, len = element.length; 
            for ( ; i < len ; ) { 
                dojo.disconnect(this.eventStore[element[i] + evt + fn]); 
                delete this.eventStore[element[i] + evt + fn]; 
                i++; 
            } 
        } else { 
            dojo.disconnect(this.eventStore[element + evt + fn]); 
            delete this.eventStore[element + evt + fn]; 
        } 
    } 
},

Sie werden feststellen, dass wir ein eventStore-Objekt hinzugefügt haben. Dies liegt daran, dass Dojo Ereignisse mit dojo.connect bindet und mit dojo.disconnect aufhebt; Der Haken dabei ist, dass dojo.disconnect das von dojo.connect zurückgegebene Objekt als einzigen Parameter verwendet. Wir verwenden eventStore, um diese Werte zu verfolgen, damit wir Ereignisse leicht trennen können. Der Rest der Komplexität hier besteht nur darin, unsere verpackten DOM-Sets zu durchlaufen, da Dojo diese nicht allein bewältigen kann.

    create: function (el) { 
        return document.createElement(el);         
    }, 
    apply_attrs: function (el, attrs) { 
        var attr; 
        for (attr in attrs) { 
            dojo.attr(el, attr, attrs[attr]); 
        } 
    } 
}, // end of dom object 
is_arr : function (arr) { 
    return dojo.isArray(arr); 
}, 
is_obj : function (obj) { 
    return dojo.isObject(obj); 
}

Dieser Teil sollte nicht allzu schwer zu verstehen sein; es ist alles ziemlich ähnlich zu jQuery.

Jetzt sollten Sie in der Lage sein, Dojo als Ihre Basis und unseren neuen Dojo-Kern als Ihren Kern aufzunehmen und unsere App wird weiterhin wie bisher funktionieren.

Abschluss: Sollten Sie auf diese Weise codieren?

Nun, da wir genau gesehen haben, wie ein solches System funktionieren sollte, lassen Sie uns darüber sprechen, ob Sie Ihre JavaScript-Apps so schreiben möchten. Offensichtlich ist dies kein Muster, das Sie auf Ihrer durchschnittlichen Website verwenden würden. Es ist für vollwertige Anwendungen. Folgendes ist mir eingefallen:

Nachteile:

Es kann ziemlich schwierig sein, diese Art der Codierung zu erlernen. Modulares Denken erfordert definitiv einen Paradigmenwechsel.
Wenn Sie anfangen, ist es schwer zu wissen, wie viel Kraft Sie den Schichten geben sollen. Was sollen Module können? Sollte die Sandbox echte Funktionalität enthalten oder ist sie nur dazu da, den Modulen die richtige Menge an Kernfunktionalität zur Verfügung zu stellen? Wo führen wir Fehlerprüfungen durch? Können wir innerhalb der Module einfache Aufgaben wie das Erstellen von Dom-Elementen ausführen? Ich bin sicher, Sie haben Ihre eigenen Ansichten dazu und weitere Fragen, also lassen Sie mich Ihre Meinung wissen, entweder in den Kommentaren zum Nettuts+-Beitrag oder über das Formular auf meiner Website. Oder noch besser: Schreiben Sie auf Ihrem Blog / Ihrer Website darüber, damit die Welt es sehen kann, und senden Sie mir unbedingt einen Link.
Schließlich ist es seltsam, ein JavaScript-Framework als Basis zu verwenden; Mit meinem derzeitigen Verständnis davon eignen sie sich nicht wirklich dafür.

Vorteile

Sobald Sie einen soliden Kern und eine Sandbox haben, wird das Erstellen neuer Web-Apps viel schneller sein. Es geht im Grunde genommen darum, Module aus Ihrer ständig wachsenden Modulbibliothek auszuwählen und sie miteinander zu verbinden.
Es ist viel einfacher, Ihren Code zu testen, weil alles so modular ist.

Nun, das ist alles, was ich heute für Sie habe; Ich hoffe, ich habe Ihren Verstand ein wenig gedehnt; Ich weiß, dass das Lernen über all dies in der letzten Woche oder so meins gestreckt hat! Ich würde gerne wissen, was Sie davon halten, also lassen Sie es mich bitte wissen, wenn Sie Kommentare haben! Danke fürs Lesen!