在Django中使用JavaScript的最佳實踐

Question

我想用一些JavaScript / jQuery來推動我的Django項目。 從一開始我就知道，組織.js文件的哪種方式是最佳的。

對於加載一個大文件包含比加載許多小文件更少的開銷，並且因為它在我認為制作一個全局.js文件的代碼中看起來更干凈，並且包含base.html（每個模板從中繼承）。 但是，結果是，JavaScript會嘗試分配所有事件的結構，即使事件應該綁定到的元素不在當前文檔中。 有了所有jQuery選擇器，那么它們就必須完成他們的工作，這些工作效率不會太高。 從早期的Web開發經驗我知道可以做一些像if(location.href == '/some/url/') { (JavaScript code) ... } 。 在這種情況下，這對我來說似乎不切實際，因為對於更改URL，我必須更改URLconf和.js文件（同時使用reverse（）和{％url％}來防止其他地方）。 我想這里不可能使用命名的URL嗎？

有沒有人知道如何組織JavaScript一方面沒有每個模板的文件，也沒有不必要的殺死性能？

Answer 1

我不知道這個問題是特定於Django的 - 類似的問題出現在各種系統中管理Javascript。

也就是說，我通常會嘗試對Javascript文件進行分層，以便真正的全局腳本和庫包含在一個文件中，特定於站點一部分的腳本包含在一組特定於部分的文件中，以及特定於單個腳本的腳本頁面包含在另一個頁面特定文件的站點中（或內聯代碼，具體取決於上下文）。

Django對這種方法有很好的支持，因為你也可以對模板進行分層。 在base.html模板中包含全局腳本，然后創建一個繼承自base.html的mysection-base.html模板，只添加特定於該部分的Javascript（和CSS）文件。 然后該部分中的子頁面可以繼承mysection-base.html而不是base.html ，並且他們都可以訪問特定於部分的腳本。

Answer 2

我發現django-compressor非常有用，因為它會自動壓縮和縮小你的JavaScript和CSS預部署。 如果他們漂浮你的船，它甚至會自動處理SASS，LESS和CoffeeScript。

Answer 3

來自http://djangopackages.com/grids/g/asset-managers/的應用可能有所幫助。

Answer 4

你使用模塊化的JavaScript。

選擇您所選擇的打包程序（我的是browserify ），您的所有模塊打包成您壓縮一個包和gzip。 您將此文件發送到客戶端並緩存它。

這意味着您可以緩存所有代碼，最大限度地減少HTTP請求並保持精簡和高效。

而且由於您有模塊化代碼，您只需按正常方式加載代碼即可。

我個人會使用一些表單特征檢測來加載模塊。 您可以選擇對幾乎任何功能（某些css選擇器，路由，網址段）進行檢測。

功能檢測如下所示：

var Features = {
  "class": "name",
  "class2": "name2",
  "dynamic-scroll": "dynamic-scroll",
  "tabstrip": "tabstrip",
  ...
}

for (var key in Features) {
  require(Features[key]);
}

使用davis的路由看起來像

Davis(function() {
  this.get("blog", function(req) {
    require("blog")(req);
  });

  this.get("blog/:post", function(req) {
    require("blog-post")(req);
  });

  this.get("shop", function(req) {
    require("shop")(req);
  });
  ...
});

或者，您可以嘗試事件驅動的架構。 這意味着每個模塊都綁定到事件

// some-module

mediator.on("blog-loaded", function() {
  // load in some libraries

  // construct some widgets

  mediator.emit("blog-ui-build", widgets);
});

你需要一些引導來啟動事件循環。 隨意看一下EDA演示