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模板中添加全局脚本，然后创建一个继承自mysection-base.html的{{1}}模板，只添加特定于该部分的Javascript（和CSS）文件。然后，该部分中的子页面可以继承base.html而不是mysection-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);
});

你需要一些引导来启动事件循环。 Feel free to look at an EDA demo

在Django中使用JavaScript的最佳实践

4 个答案: