在django模板中高效地加载jquery和javascript文件 [英] efficiently loading jquery and javascript files in django templates
问题描述
在我的一个django项目中,我使用了大量的自定义jquery脚本和大量的开源jQuery插件。现在,如果我加载基本模板中的所有jquery脚本,我将在模板中加载大量未使用的JavaScript代码,这些代码不需要任何/某些已加载的jQuery文件,这将影响该页面的加载时间特别的模板。
In one of my django projects i am using lots of custom jquery scripts and lots of open source jquery plugins. Now if i load all the jquery scripts in my base template, I will be loading a lot of unused javascript code in the templates which do not require any/some of the jquery files that have been loaded which will affect the page load time of that particular template.
所以,我目前采取的方法是
So, The current approach i am taking is
- 加载基本模板中的基本jQuery脚本(每个模板需要的)基本jQuery脚本
- 在基本模板中为js定义一个块,并为每个templates.eg选择性地加载所需的javascripts
{%block selective_js%} {%endblock selective_js%}
- Load the basic jquery scripts in the base template (ones that are required by each template)
- Define a block for js in the base template and selectively load needed javascripts for each templates.e.g
{% block selective_js %}{% endblock selective_js %}
上述方法运行良好,但是我看到的唯一的问题是模板中有很多代码重复。例如:
The above approach works well, but the only problem I see is a lot of code repetition in the templates. Say for example:
-
我有以下javascript文件
I have the following javascript files
<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>
现在在多个模板中,我需要所有上述的JavaScript文件,要初始化所提及的脚本中的一些方法。所以目前,我必须在所有模板中执行此操作:
Now in more than one templates, I need all the above mentioned javascript files included and also want to initialize some of the methods within the mentioned scripts. So currently, I have to do this in all the templates:
{% 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 %}
这意味着模板中有很多代码重复。
Which means there is a lot of code repetition within the templates.
如何防止重复的代码,而不必以有效的方式加载未使用的JavaScript代码?
How can I prevent repeating code without having to load unused javascript code in an efficient manner ?
推荐答案
在父模板中定义一个块其中包含您的默认JavaScript文件,然后根据需要扩展块:
Define a block in your parent template where you include your "default" JavaScript files and then extend the block as needed:
# 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 %}
这样可以防止你的模板重复出现: https://docs.djangoproject.com/en/1.5/topics/templates/#template-继承了解更多有关模板和继承的信息。
This will prevent repetition in your templates. Check out: https://docs.djangoproject.com/en/1.5/topics/templates/#template-inheritance for more information about templates and inheritance.
您可以使用 django-compressor 组合和缩小CSS和JS导入,并缓存它们以实现高效加载。
You can use django-compressor to combine and minify CSS and JS imports and cache them for efficient loading.
这篇关于在django模板中高效地加载jquery和javascript文件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!