Ich versuche ein wiederverwendbares Widget in ASP.Net MVC zu erstellen. Dies ist ein Widget, das 2 Daten in einer Zeichenfolge verkettet. Das Widget enthält 3 Dateien: Widget.cshtml, Widget.css und Widget.js und Abhängigkeiten zu mehreren jquery-Bibliotheken.
Widget.cshtml
%Vor%Widget.css
%Vor%Widget.js
%Vor%Ich möchte dieses Widget in meinen MVC-Seiten wiederverwendbar machen. Ich habe mir verschiedene Optionen ausgedacht, darunter:
Ich war dabei, einen Helfer zu benutzen, als ich mich an Steve Souders Regeln für die Website-Performance erinnerte:
Regel 5: Setze Stylesheets ganz oben
Regel 6: Setzen Sie die Skripte ganz unten
Die Optionen 1), 2) und 3) scheinen alle gute Ideen zu sein, aber alle schreiben den Code inline und verletzen die Leistungsregeln. Option 4) ermöglicht es mir, die Javascript- und CSS-Dateien manuell dort zu platzieren, wo sie hingehören, aber Kopieren und Einfügen ist fehleranfällig. Eine mögliche Idee wäre, einen Gerüstbauer zu schreiben, der alles dorthin bringt, wo es hingehört, aber das scheint zu viel Arbeit für jetzt.
Was ist die beste (hoffentlich einfache) Art, Widgets zu machen und trotzdem den Leistungsregeln zu folgen 5 & amp; 6?
Sie könnten RenderSection () verwenden, das dem alten ContentPlaceHolder ähnelt, und sie in Ihre _Layout.cshtml
einfügen %Vor%Dann in Ihrem View put:
%Vor%Es ist eine einfache Alternative, wenn Sie Combress oder Chirpy nicht verwenden möchten. Sie müssen den Code immer noch den Seiten hinzufügen, auf denen Sie das Steuerelement verwenden, aber es wird an den richtigen Stellen angezeigt.
>Ich fand auch eine handliche Blogbeitrag zum Registrieren von Scripts innerhalb einer Teilansicht , die sich lohnen könnten.
Das ursprüngliche Beispiel verwendet bereits einige unauffällige JavaScript-Techniken, aber hier können Sie dieses Muster noch weiter ausdehnen, wie in this jsfiddle .
Widget.cshtml
%Vor%Widget.js
%Vor% Beachten Sie, dass Sie jetzt mehrere Instanzen dieses Widgets mit unterschiedlichen id - und name -Werten auf Ihrer Seite haben können, die unabhängig voneinander funktionieren.
Wenn kein Datenbereichs-Widget vorhanden ist, sucht das Javascript weiterhin im DOM, findet keine und bewegt sich weiter. Allerdings sind die Kosten für diese Operation in der Regel ziemlich gering im Vergleich zu einem separaten Round-Trip für eine andere Javascript-Datei. Wenn CSS und Javascript in separaten, statischen Dateien gespeichert werden, kann der Browser diese Dateien zwischenspeichern. Das bedeutet, dass weniger Daten im Durchschnitt über die Leitung übertragen werden (da nur der HTML-Code von einer Anfrage zur nächsten wechselt).
Ich habe es persönlich gefunden, dass es sich lohnt, mein Javascript und CSS in einer Datei zu kombinieren, so dass der Browser nur eine Javascript- und eine CSS-Datei für eine bestimmte Seite laden muss (und beide werden nach dem ersten Laden der Seite zwischengespeichert) ). Wenn Sie eine sehr große JavaScript-Datei haben, die nur auf bestimmten Seiten verwendet wird, möchten Sie sie möglicherweise getrennt halten und nur auf bestimmten Seiten laden.
Unabhängig davon sollte Ihr Javascript so geschrieben sein, dass Sie alle JavaScript-Dateien auf Ihrer Website gleichzeitig laden können, ohne sich gegenseitig auf die Füße zu treten.
Sollte ziemlich selbsterklärend sein.
Tags und Links asp.net-mvc performance widget