問題描述 :

　　專案中若存在對一段js程式碼複用多次的時候, 通常將此段程式碼移動到一個單獨的靜態檔案中在被使用的地方利用 script 標籤的 src 屬性進行外部呼叫

　　但是如果此檔案中存在使用 HTML模板語言中的 {{ }}方式傳遞相關屬性值, 會導致無法正確獲取.

問題現象:　　

　　HTML頁面拿到的值為字串形式 : 

 

問題解決:

　　靜態js 檔案:

 1 $("#div_digg .action").click(function () {
 2     // 點贊或踩滅
 3     var is_up = $(this
 
).hasClass("diggit");

 4     // 靜態檔案中的時候,模板語言的地方是無法傳遞過來值得,根本就沒有 render
 5     // var article_id = "{{ article.pk }}";
 6     var article_id = $(".info").attr("article_id");

 7 
 8     $.ajax({
 9         url: "/blog/up_down/",
10         type: "post",
11         data: {
12             is_up: is_up,
13             article_id: article_id,
 
14             csrfmiddlewaretoken: $("[name='csrfmiddlewaretoken']").val(),
15         },
16         success: function (data) {
17             console.log(data);
18 
19 
20             if (data.state) {// 贊或者滅成功
21 
22                 if (is_up) {
23                     var val = $("#digg_count").text();
 
24                     val = parseInt(val) + 1;
25                     $("#digg_count").text(val);
26                 } else {
27                     var val = $("#bury_count").text();
28                     val = parseInt(val) + 1;
29                     $("#bury_count").text(val);
30                 }
31             }
32             else {    // 重複提交
33 
34                 if (data.fisrt_action) {
35                     $("#digg_tips").html("您已經推薦過");
36                 } else {
37                     $("#digg_tips").html("您已經反對過");
38                 }
39 
40                 setTimeout(function () {
41                     $("#digg_tips").html("")
42                 }, 1000)
43 
44             }
45 
46         }
47     })
48 
49 
50 })

 　　HTML檔案:

 1 {% extends 'base.html' %}
 2 
 3 {% block page-main %}
 4 
 5     <div class="article-detail">
 6         <h1>{{ article.title }}</h1>
 7         <p>{{ article.articledetail.content|safe }}</p>
 8     </div>
 9 
10     <div id="div_digg">
11         <div class="diggit action">
12             <span class="diggnum" id="digg_count">{{ article.up_count }}</span>
13         </div>
14         <div class="buryit action">
15             <span class="burynum" id="bury_count">{{ article.down_count }}</span>
16         </div>
17         <div class="clear"></div>
18         <div class="diggword" id="digg_tips" style="color: red;"></div>
19     </div>

20     <!--通過標籤的自定義屬性來傳遞,讓瀏覽器通過解析html程式碼拿到想要的值-->
21     <div class="info" article_id="{{ article.pk }}"></div>


22     {% csrf_token %}

23     <!--這樣外部引入會導致內部的 模板語言的用法的地方無法拿到值,可以通過標籤來傳遞-->
24     <script src="/static/js/article_detail.js"></script>


25 
26 {% endblock %}

 

問題解決原理:

　　在js程式碼中可以使用 {{ }} 的模板語言進行當前頁面的相關值操作
　　　　但是必須要在外面加雙引號 "{{ }}" 因為這個值的出來之後是 : 羊駝  而不是 "羊駝"
　　　　不帶雙引號會被認為是沒定義的變數名無法操作
　　在HTML程式碼中本來就可以使用 {{ }} 的模板語言進行當前頁面的相關值操作
　　　　但是HTML 本身的頁面渲染的的值就是不帶雙引號的,難道你看網頁的時候所有的顯示都帶雙引號嗎?

　　因此在js 程式碼中使用 {{}} 是完全沒有問題的,問題在於當js程式碼被被存在靜態檔案的時候.我們需要熟知 web請求 的原理

• • 基於 B/S 的 Django_web 請求在一次請求得到的迴應中得益於 render 的渲染, 封裝後再回應發出的已經是完整的 html 網頁程式碼,
    • 　　完整的 頁面程式碼 中的所有的 {{ }} {% %} 相關的程式碼已經被 render 替換成 相應的值 ,之後剩下的工作就是瀏覽器的工作了
  • 　　瀏覽器需要對 html 程式碼進行解析渲染成相應的標籤及其樣式, 對於外部引入的靜態檔案比如 js , css , 圖片 , 等. 瀏覽器需要進一步的發出請求.
    • 　　在對靜態檔案的的請求中, 並不會再有 render 插手的餘地了. 即是說 沒有render 的引數可以拿來用了, 因此只能以字串的形式體現在網頁中

ps:　　

　　render 渲染的到底是什麼?

• render渲染的是一個html檔案
• html檔案中有什麼東西 render 自己是不會在意的而且他也不認識你什麼html還是js程式碼
• 只 (注意是"只"!) 會將html檔案中的所有的{{ }}{% %}的部分進行相應的渲染替換成所傳的值