JavaScript am unteren Rande der Django-Seiten zu setzen, wenn templatetags mit?

StackOverflow https://stackoverflow.com/questions/4101458

  •  29-09-2019
  •  | 
  •  

Frage

Best Practices für die Beschleunigung Ihrer Website heißt es:

  

Setzen Sie Scripts an der Unterseite

Das gibt es zwei Arten von Skripten in meiner Django-Anwendung:

  1. Scripts in meiner Base (z geerbt) Vorlage enthalten sind; und
  2. Scripts innerhalb Vorlagen geschrieben von templatetags instanziiert

Scripts zur Unterstützung UI-Steuerelemente sind notwendigerweise ein Teil der Vorlage für ihre Unterstützung Template-Tag zu Griff Sachen wie eindeutige IDs und abhängigen Code zusammen zu halten.

Das Problem ist, dass, wenn ich Yahoos Rat folgen und stellen die Bibliotheken (# 1) am unteren Rand der Seite, 100% der Skripte inline enthalten (# 2) fehl, weil die Bibliotheken nicht geladen und analysiert noch.

Ich kann kein {% block%} Element in meiner Basisvorlage verlängern, weil alles, was ich im Rahmen des TemplateTag tun werde nicht außerhalb verbreiten - von Design, variable zu vermeiden Namenskonflikte (nach Djangos Dokumentation ).

Hat jemand eine Idee, wie ich JavaScript aus meiner templatetags' Vorlagen am unteren Rand meiner Basisvorlage zu machen verschieben kann?

War es hilfreich?

Lösung

Ich habe in der Regel eine Basisvorlage Einrichtung wie dieser. 

<html>
<head>

{% block js-head %} Tags that need to go up top  {% endblock js-head %}

</head>
<body>
{% block header %}  Header {% endblock header %}

{% block body %} Body goes here {% endblock body %}

{% block footer %}  Footer {% endblock footer %}

{% block js-foot %}  All other javascript goes here {% endblock js-foot %}
</body>
</html>

Dann kann ich diese Basis-Vorlage erweitern und nur die Blöcke außer Kraft setzen, dass ich wichtig ist. Ich habe alle Javascript, die nicht in der Kopfzeile in js-Fuß sein muss und weil es am unteren Rand der Vorlage ist, wird es zuletzt laden. Wenn Sie haben zu bewegen, wo sie JavaScript laden Sie müssen nur den js-Fuß-Block um in der Basis-Vorlage zu bewegen.

Nichts Besonderes, aber es funktioniert.

Andere Tipps

Wickeln Sie die Skripte, dass Sie mit Inline-in

  

jQuery (function () {...});

Welche ausgeführt wird, wenn das DOM bereit ist und Skripte heruntergeladen wurde.

Eine weitere Option könnte sein, eine Art von benutzerdefinierten Vorlagen-Tag zu erstellen, wie: 

{% inlinescript %}
// some javascript code.
{% endinlinescript %}

Was Sie Aggregat Inline-Scripts wie geht die Ausführung nutzen könnten. Sie müßten diese Daten aggregieren als Vorlage analysiert wird - was schwierig wird, weil Template-Tags verschiedene Kontexte haben, und das ist etwas, das Sie in einer benutzerdefinierten Variablen zum Speichern in einem globalen Kontext wollen würden, sagen inline_scripts.

ich auf dem Weg Django implementiert die verschiedenen with ... as .. Konstrukte in der Standard-Template-Bibliothek für ein Beispiel aussehen würde, wie Sie Ihre eigene Variable zu einem Kontext hinzuzufügen.

Dann am unteren Rand der Seite könnten Sie tun, {{inline_scripts}}.

Die einfachste Lösung ist die jQuery.ready(function(){}) / jQuery(function(){ }) (Die beiden Methoden sind synonym).

Oder möchten Sie vielleicht Yahoo Rat zu überdenken. Es gibt positive Dinge über inlining Ihr Javascript - es FOUC / FOUBC (Flash von unbehavioured Inhalt) reduzieren kann. Yahoo neigt Art pedantisch zu bekommen - (nur Blick auf die YUI API;). Wenn Sie Teile Ihrer Anwendung neu zu schreiben, müssen für das, was mäßig wahrnehmbare Leistungsverbesserung sein wird, könnte es nicht wert sein.

die Skript Aggregation zu tun (ursprünglich basierend off captureas auf django-Schnipsel): 

@register.tag(name='aggregate')
def do_aggregate(parser, token):
    try:
        tag_name, args = token.contents.split(None, 1)
    except ValueError:
        raise template.TemplateSyntaxError("'aggregate' node requires a variable name.")
    nodelist = parser.parse(('endaggregate',))
    parser.delete_first_token()
    return AggregateNode(nodelist, args)

class AggregateNode(Node):
    def __init__(self, nodelist, varname):
        self.nodelist = nodelist
        self.varname = varname

    def render(self, context):
        output = self.nodelist.render(context)
        if context.has_key(self.varname):
            context[self.varname] += output
        else:
            context[self.varname] = output
        return ''

Verbrauch: 

{% aggregate inline_scripts %}
var foo = 'bar';
{% endaggregate %}

... template code

{% aggregate inline_scripts %}
var baz = 'bar';
{% endaggregate %}

... somewhere near the bottom of your page

{{ inline_scripts }}

Es ist eine Anwendung django-sekizai nur für die

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top