Django模板变量传递给外部JS文件的最佳实践

前言

出于工作需求，近期持续探索Django静态资源（如JS、CSS）的高效组织方式，以及如何结合前端构建工具优化代码结构与质量。下文将详细介绍具体实现方案。

具体方法如下：

首要解决的问题是：部分场景需将JS代码嵌入模板以获取后台传递的变量，例如：

<div>
<h1>Test</h1>
<div id="my-test" ></div>
</div>
<script>
$(function(){
 $('#my-test').html("{{ some_var_from_view }}")
});
</script>

此类写法不仅代码结构显得杂乱，还会大幅降低Webpack、Gulp等前端构建工具的使用价值。

结论先行：若试图完全剥离JS与模板，同时又要使用模板渲染的数据，目前尚未发现理想方案。若读者有更佳思路，敬请分享。 既然无法彻底分离，应尽力实现JS所需数据与代码的隔离。

既然需将模板渲染数据供JS使用，直观方案是将数据渲染至HTML中并隐藏。该方式优势在于实现简单，甚至模板无需使用<script></script>标签；劣势在于会产生大量隐藏字段，导致JS中需编写大量getElementsByxxxx类代码来获取数据。

因此，采用一种折中方案：在HTML中使用<script></script>标签将后台传递的数据渲染为JS对象，随后JS代码可直接调用该对象。

例如在模板中：

<script>
var MyViewVar = {
 var_1: {{ var_1 }},
 var_2: {{ var_2 }},
};
</script>
...
<script type="text/javascript" src="/js/test_script.js"></script>

使用此方式需注意：尽量先编写渲染JS变量的代码（例如置于head部分），再引入外部JS文件。如此，在test_script.js中即可直接使用MyViewVar对象。

此外，鉴于SPA（单页应用）网站的流行，Django作为后端仅提供JSON数据也是一种可行方案，但这对前端开发者的能力提出了更高要求。

总结

以上内容为本文全部要点，期望对各位的学习或工作有所助益。如有疑惑，欢迎留言交流，感谢支持。