前言
因為工作的需要，最近一直在思考如何更好的組織Django中的靜態資源，比如JS、CSS一類，如何結合前端構建工具寫出更好的代碼以及結構呢？下面這篇文章就給大家詳細介紹了實現的方法，話不多說，來一起看看詳細的介紹：
方法如下：
首先需要解決的一個問題就是某些時候需要把JS代碼寫在模板里來獲取后臺傳遞過來的變量，比如：
|
1
2
3
4
5
6
7
8
9
|
<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代碼中則可以直接使用這個對象了。
比如模板中：
|
1
2
3
4
5
6
7
8
|
<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（Single Page Application）網站，那么django作為后端僅提供JSON數據也是一種辦法，不過這樣比較考驗前端人員的能力了。
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流，謝謝大家對服務器之家的支持。
原文鏈接：http://www.hi-roy.com/2016/12/20/將Django模板變量傳遞給外部JS調用的幾種方式/
