Django模板變量如何傳遞給外部js調(diào)用的方法小結(jié)
前言
因?yàn)楣ぷ鞯男枰?，最近一直在思考如何更好的組織Django中的靜態(tài)資源，比如JS、CSS一類，如何結(jié)合前端構(gòu)建工具寫(xiě)出更好的代碼以及結(jié)構(gòu)呢？下面這篇文章就給大家詳細(xì)介紹了實(shí)現(xiàn)的方法，話不多說(shuō)，來(lái)一起看看詳細(xì)的介紹：
方法如下：
首先需要解決的一個(gè)問(wèn)題就是某些時(shí)候需要把JS代碼寫(xiě)在模板里來(lái)獲取后臺(tái)傳遞過(guò)來(lái)的變量，比如：
<div>
<h1>Test</h1>
<div id="my-test" ></div>
</div>
<script>
$(function(){
$('#my-test').html("{{ some_var_from_view }}")
});
</script>
這么寫(xiě)代碼的話，別扭不說(shuō)，前端的那些構(gòu)建工具比如webpack，gulp的使用范圍也將大大降低。
首先說(shuō)結(jié)論，想完全剝離JS和模板而又需要使用模板渲染的數(shù)據(jù)，我是沒(méi)想到什么好辦法。如果讀者有好辦法希望賜教。
既然不能完全剝離，那么就進(jìn)最大的努力分離JS所需的數(shù)據(jù)和代碼吧。
既然需要模板渲染數(shù)據(jù)給JS使用，最先想到的辦法就是把數(shù)據(jù)渲染到HTML代碼中并隱藏。這種方法的優(yōu)點(diǎn)就在于簡(jiǎn)單，甚至模板中都可以完全不使用<script></script>標(biāo)簽。缺點(diǎn)則是會(huì)渲染出很多的隱藏字段，JS中要寫(xiě)大量的getElementsByxxxx一類的代碼來(lái)獲取數(shù)據(jù)。
既然如此，那么使用一種折中的辦法，在HTML中使用<script></script>標(biāo)簽將后臺(tái)傳遞的數(shù)據(jù)渲染成JS對(duì)象，然后JS代碼中則可以直接使用這個(gè)對(duì)象了。
比如模板中：
<script>
var MyViewVar = {
var_1: {{ var_1 }},
var_2: {{ var_2 }},
};
</script>
...
<script type="text/javascript" src="/js/test_script.js"></script>
使用這種方式需要注意一點(diǎn)就是盡量先寫(xiě)渲染JS變量的代碼，比如寫(xiě)在head中，然后再引入外部JS文件。這樣，在test_script.js中就可以直接使用MyViewVar這個(gè)對(duì)象了。
當(dāng)然了，既然現(xiàn)在流行SPA（Single Page Application）網(wǎng)站，那么django作為后端僅提供JSON數(shù)據(jù)也是一種辦法，不過(guò)這樣比較考驗(yàn)前端人員的能力了。
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
Django對(duì)接elasticsearch實(shí)現(xiàn)全文檢索的示例代碼
搜索是很常用的功能，如果是千萬(wàn)級(jí)的數(shù)據(jù)應(yīng)該怎么檢索，本文主要介紹了Django對(duì)接elasticsearch實(shí)現(xiàn)全文檢索的示例代碼，感興趣的可以了解一下2021-08-08
Python Pygame實(shí)戰(zhàn)之實(shí)現(xiàn)經(jīng)營(yíng)類游戲夢(mèng)想小鎮(zhèn)代碼版
作為一名模擬經(jīng)營(yíng)類游戲的發(fā)燒友，各種農(nóng)場(chǎng)類、醫(yī)院類、鐵路類的游戲玩兒了很多年。今天用代碼給大家打造一款夢(mèng)想小鎮(zhèn)游戲，希望大家喜歡啦2022-12-12
不同系統(tǒng)下python與pip的安裝及常見(jiàn)問(wèn)題詳解
學(xué)習(xí)python的第一步,是安裝python,這篇文章主要是介紹,如何在不同的系統(tǒng)上安裝python,以及遇到的一些問(wèn)題,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
Python 點(diǎn)擊指定位置驗(yàn)證碼破解的實(shí)現(xiàn)代碼
這篇文章主要介紹了Python 點(diǎn)擊指定位置驗(yàn)證碼破解的實(shí)現(xiàn)代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
python3.8.1+selenium實(shí)現(xiàn)登錄滑塊驗(yàn)證功能
這篇文章主要介紹了python3.8.1+selenium解決登錄滑塊驗(yàn)證的問(wèn)題,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-05-05
Python提供了強(qiáng)大而靈活的文件I/O（輸入/輸出）工具,能夠讀取、寫(xiě)入和處理各種文件類型,本文將詳細(xì)介紹Python文件I/O的使用技巧,需要的可以參考一下2023-12-12
Python語(yǔ)言異常處理測(cè)試過(guò)程解析
這篇文章主要介紹了Python語(yǔ)言異常處理測(cè)試過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01
這篇文章主要介紹了keras 如何保存最佳的訓(xùn)練模型，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-05-05
python調(diào)用接口的4種方式代碼實(shí)例
這篇文章主要介紹了python調(diào)用接口的4種方式代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
Python3讀取UTF-8文件及統(tǒng)計(jì)文件行數(shù)的方法
這篇文章主要介紹了Python3讀取UTF-8文件及統(tǒng)計(jì)文件行數(shù)的方法,涉及Python讀取指定編碼文件的相關(guān)技巧,需要的朋友可以參考下2015-05-05