it-swarm.com.de

Jumpy Code mit beschreibenden Funktionsnamen

Ich baue gerade einige Funktionen auf einer Seite aus. Beim Schreiben von JS habe ich eine Reihe kleinerer Funktionen wie FindCarouselLocations(elem), GetImagesFromLibrary(url) und BuildCarousels(images, locs) erstellt, die alle eine Teilmenge der in meinem globalen JS enthaltenen Funktionen verwenden Datei.

Ist es beim Entwerfen einer Seite, die stark von JS abhängig ist, sinnvoll, eine einzige Funktion zu haben, die durch andere Funktionsaufrufe eine Geschichte erzählt? Mit den obigen Beispielfunktionen würde ich machen:

// previous function definitions...

function AddImageCarousels (){    
    var imageLibraryUrl = 'http://mysite.com';
    var parentElem = document.querySelectorAll('.image-carousel');

    var images = GetImagesFromLibrary(imageLibraryUrl);
    var locs = FindCarouselLocations(parentElem);
    BuildCarousels(images, locs);
}
document.addEventListener('DOMContentLoaded', AddImageCarousels, false);

Was meiner Meinung nach eine Geschichte darüber erzählt, was passiert, wenn die Seite geladen wird. Ich könnte alternativ eine Abstraktion entfernen, müsste dann aber weitere Kommentare hinzufügen oder auf andere Weise umgestalten. Ich persönlich denke, dass dies ein bisschen Selbstdokumentation schafft, aber ich bin ziemlich neu in der Entwicklungspraxis ...

Wenn auf der Seite viele Dinge vor sich gehen würden, würde ich sogar noch einen letzten Schritt weiter gehen und eine Funktion erstellen, die so aussehen könnte:

// previous function definitions...
function AddImageCarousels(){ /* */ }

function BuildPage () {
    AddImageCarousels();
    AddChatbot();
    AddMaintenanceNotification();
}
document.addEventListener('DOMContentLoaded', BuildPage, false);

Wobei jede Hauptfunktionalität durch eine einzelne Funktion definiert wurde, diese Funktionen jedoch ähnlich der Funktion AddImageCarousels aufgebaut sind.

Ist dies eine gute Praxis oder ein Codegeruch, der ein besseres Design erfordert? Und wenn ja, was wäre dann eine bessere Alternative?

Ich bevorzuge es, Produktionsdateien in so wenigen separaten Dateien wie möglich zu speichern, um die Anzahl der HTTP-Aufrufe zu verringern, aber jede Funktionalität befindet sich normalerweise in einer eigenen Entwicklungsdatei und wird später in dieselbe .js Transpiliert.

9
KGlasier

ist es sinnvoll, eine einzige Funktion zu haben, die durch andere Funktionsaufrufe eine Geschichte erzählt?

Ja.

Die Verwendung anderer Funktionsaufrufe ist jedoch nicht das Schöne an diesem Code. Was schön ist, ist, dass es eine Kurzgeschichte auf einer Abstraktionsebene erzählt und gute Namen verwendet. Mit anderen Funktionsaufrufen haben Sie das einfach geschafft.

Die Lösung eines komplexen Problems mit kurzen Funktionen erfordert viele Funktionen. Viele Funktionen erfordern viele Namen. Daher ist der begrenzende Faktor hier Ihre Fähigkeit, gute Namen zu finden. Wenn Sie mir keine guten Namen geben können, geben Sie mir lange Funktionen. Ersparen Sie mir schlechte Namen bei kurzen Funktionen.

Eine weitere schöne Sache ist, dass klar ist, welche Funktionen durch Nebenwirkungen wirken und welche durch Rückgabe eines Wertes. Dies ist eine Funktion der folgenden Command Query Segregation .

Das Muster, das ich in AddImageCarousels() sehe, lautet: Konstruieren Sie Abhängigkeiten und übergeben Sie sie an etwas, das das tut, was wir versprochen haben. Diese Trennung stellt sicher, dass parametrisierte Versionen von Funktionen vorhanden sind, speichert jedoch nicht die Abhängigkeitskonstruktion über Ihren gesamten Einstiegspunkt.

Die Einschränkung dieses Entwurfs besteht darin, dass Add-Funktionen nicht gemeinsam genutzt werden können. Wenn dies nicht kritisch wird, würde ich die Vervielfältigung einfach zugunsten der sauberen Trennung tolerieren.

Ein weiteres Problem ist, dass die Parametrisierung von BuildCarousels() nur dann sinnvoll ist, wenn sie auf mehrere Arten aufgerufen wird. Dieser andere Weg benötigt einen Namen, der sich von AddImageCarousels() unterscheidet. Was Ihre Macht hier einschränkt, ist die Fähigkeit, gute Namen zu finden.

Ich muss sagen, dies ist einer der schönsten Codes, die ich seit einiger Zeit gesehen habe. Hoffe, es steht bereit zu verwenden.

9
candied_orange
function BuildPage () {
   AddImageCarousels();
   AddChatbot();
   AddMaintenanceNotification();
}
document.addEventListener('DOMContentLoaded', BuildPage, false);

Das ist großartiger Code. Die Funktionsnamen sind beschreibend und es ist leicht zu erkennen, wie die Seite aufgebaut ist. Wenn Sie mehr Details darüber wünschen, wie der Chatbot hinzugefügt wurde, können Sie sich diese Methode ansehen. Wenn Sie jedoch nur sehen möchten, wie die Seite erstellt wird oder was sich auf der Seite auf hoher Ebene befindet, müssen Sie sich nur ansehen diese eine Methode.

Beachten Sie, dass ein sehr ähnliches Stück Code schrecklich wäre:

function BuildPage () {
   AddIcs();
   Chat();
   AddEntity();
}
document.addEventListener('DOMContentLoaded', BuildPage, false);

Weil die Funktionsnamen überhaupt nicht beschreibend sind. Um herauszufinden, was sich auf der Seite befindet, müssen Sie sich jede der drei Funktionen ansehen, was bedeutet, dass Sie viel in Ihrem Gehirn darüber nachdenken müssen, was dieser Code tut.

Eine Einschränkung des Codes, den Sie geschrieben haben: Sie müssen sicherstellen, dass jede der in BuildPage aufgerufenen Methoden genau das tut, was sie verspricht. Sie möchten nicht, dass Ihre AddChatBot() -Methode mit den Bildkarussellen herumspielt oder Dinge für die Benachrichtigungen oder irgendetwas anderes einrichtet - tun Sie einfach das, was Sie tun müssen, um den Chat-Bot hinzuzufügen.

9
mmathis