effizient laden von jquery und javascript-Dateien, die in django-templates

In einem meiner django-Projekte arbeite ich mit vielen benutzerdefinierten jquery-Skripte und viele open-source-jquery-plugins. Nun, wenn ich laden der jquery-Scripte in meiner Basis-Vorlage, die ich laden viele ungenutzte javascript-code in die Vorlagen, die nicht verlangen, alle/einige der jquery-Dateien, die geladen wurden, die eine Auswirkung auf die Ladezeit der Seite der jeweiligen Vorlage.

So, Der aktuelle Ansatz, den ich zu mir nehme, ist

  • Laden Sie die basic jquery-Skripte in der Basis-Vorlage (diejenigen, die erforderlich sind, von jeder Vorlage)
  • Definieren Sie einen block für js in der Basis-Vorlage und selektiv laden benötigt javascripts für die einzelnen Vorlagen.e.g {% block selective_js %}{% endblock selective_js %}

Dem obigen Ansatz funktioniert gut, aber das einzige problem, das ich sehe, ist eine Menge code-Wiederholung in den Vorlagen. Sagen Sie zum Beispiel:

  • Habe ich die folgende javascript-Dateien

    <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.1.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.2.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.3.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.4.js"></script>
<script type="text/javascript" src="{{ STATIC_URL }}js/jquery.5.js"></script>

  • Nun in mehr als einer Vorlagen, die ich brauche all die oben genannten javascript-Dateien enthalten und auch initialisieren möchten, einige der Methoden, die innerhalb des erwähnten Skripts. Also aktuell habe ich dazu alle Vorlagen:

    {% block selective_js %}

    <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.1.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.2.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.3.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.4.js"></script>
    <script type="text/javascript" src="{{ STATIC_URL }}js/jquery.5.js"></script>

    <!-- Initialize Methods -->
    <script type="text/javascript">
        $(document).ready(function() {
            $('some_element').initializeScript();
        });
    </script>

{% endblock selective_js %}

Was bedeutet, es gibt eine Menge von Wiederholungen von Codes innerhalb des templates.

Frage:

Wie kann ich verhindern, dass sich wiederholende code ohne laden zu müssen ungenutzte javascript-code in einer effizienten Art und Weise ?

  • Schließen Sie in der Vorlage basieren, aber verkleinern oder komprimieren. Auf diese Weise müssen nur einmal heruntergeladen werden (mit einer einzigen Anfrage) und werden in den cache, die in nachfolgenden Anfragen.
InformationsquelleAutor Amyth | 2013-05-22
  1. 19

    Definieren Sie einen block in Ihr übergeordneten Vorlage, wo Sie Ihre "default" - JavaScript-Dateien und erweitern Sie den block wie gewünscht.

    # base.html

{% block js %}
    <script src="{{ STATIC_URL }}js/jquery.1.js"></script>
    <script src="{{ STATIC_URL }}js/jquery.2.js"></script>
    <script src="{{ STATIC_URL }}js/jquery.3.js"></script>
    <script src="{{ STATIC_URL }}js/jquery.4.js"></script>
    <script src="{{ STATIC_URL }}js/jquery.5.js"></script>
{% endblock %}


# child.html

{% extends "base.html %}

{% block js %}
    {{ block.super }} {# includes previous content in block #}
    {# view-specific imports here #}
{% endblock %}

    Dies wird verhindern, dass die Wiederholung in Ihren Vorlagen. Check-out: https://docs.djangoproject.com/en/1.5/topics/templates/#template-inheritance für mehr Informationen über Vorlagen und Vererbung.

    Können Sie django-Kompressor zu kombinieren und minifizieren von CSS-und JS-Importe und cache Sie für die effiziente Beladung.

    InformationsquelleAutor Brandon
Schreibe einen Kommentar