将数据从Django视图获取到JS以在页面上执行的最佳实践? - javascript

有人告诉我,从Django视图返回数据并使用页面上加载的Javascript中返回的那些项是“错误的做法”。

例如:如果我正在编写一个需要一些额外数据才能加载/显示基于javascript的图形的应用程序,那么我被告知将数据从Django视图传递的模板变量直接传递到页面上的javascript中是错误的。

我的第一个想法:

只需在django视图中获取图形所需的数据,然后将其返回到要在模板中使用的上下文变量即可。然后,直接在模板的javascript中引用该上下文变量即可。

它应该可以很好地加载数据-但有人告诉我这是错误的方法。

那么如何最好地实现呢?

我的第二个想法:

启动Django Rest Framework,并创建一个端点,您可以在该端点上将所有必需的数据传递到该端点,并在页面加载时发出AJAX请求-然后加载数据并执行所需的JS任务。

除一件事外,这如何工作,如何将AJAX请求所需的变量放入AJAX请求本身?

我必须从上下文(这是“错误的方式”)中获取它们,或者从URL中获取参数。有没有简单的方法可以从JS中的URL解析数据?似乎只是为了避免不利用视图获取所需数据并直接在JS中访问这些变量而感到痛苦。

那么,从Django视图传递数据并直接在Javascript中使用它真的是“错误的做法”吗?

两种方法都可接受吗?

Django在给定页面/模板上将类似数据获取到Javascript中的合适方法是什么?

参考方案

直接传递数据并不总是错误的方法。那里有JS,因此您可以在其他一切就绪后执行代码。因此,当他们告诉您直接传递数据的方法是错误的时,是因为没有必要使页面和数据变得比JS插入之前要重。

但是可以传递基本数据,因此您的JS代码知道它必须做什么。为了更加清楚,让我们看一下您的情况:

您要渲染图形。而且图形有时渲染起来很沉重,这会使第一次渲染变慢。而且在大多数情况下,没有页面所提供的额外上下文,图就没有那么有用。因此,为了使您的网页加载速度更快,您可以在呈现网页后让JS加载图形。而且,如果您要等待,那么传递所需的额外数据毫无意义,因为它会使页面变重并且放慢初始渲染的速度,并且需要花费时间来解析并将这些数据转换为JSON对象。

通过删除数据并让JS在后台加载它们,可以使页面更小,更快地呈现。因此,当用户阅读图形所需的上下文时,JS将获取所需的数据并呈现图形。这将使您的网页具有更快的初始呈现。

因此,通常:

何时直接传递数据:

当JS需要初始数据来执行其必需的操作时(配置,默认值等)。
当时间差很重要时,您迫不及待地等待额外的请求来完成渲染。
当数据非常小时。

什么时候不直接传递数据:

无论如何,渲染额外的数据都需要时间,那么为什么不再获取数据呢?
数据大时。
当您需要尽快渲染某些内容时。
当这些数据需要一些繁重的过程时。
当JS可以减小数据大小时(使用仅JS可以访问的选项来确定应正确传递哪种数据。)

什么是最好的免费JavaScript模糊处理程序,可以作为javascript库或python库使用 - javascript

我关注这篇文章:Free JavaScript obfuscators?找到一个JavaScript混淆器,可以帮助我在客户端混淆一些JavaScript数据。但我发现这些选择都不是python或javascript lib,they use java,我使用django,所以我想知道,最好的免费JavaScript混淆器是javascript库或pytho…

视图中的Django通用身份验证 - javascript

我如何避免在每个视图函数中都需要这段代码:if request.user.is_authenticated(): return HttpResponse("OK") else: return HttpResponse("Load_Login_Form") 但是,每次/在“调用” URL /视图之前执行它? 参考方案 如…

Django调试工具栏错误的路径 - javascript

我创建了一个Django应用,并将其部署到服务器上。我使用了一些额外的django功能,例如django-debug-toolbar,该功能是使用pip从我的requirements.txt文件中安装的。当我在localhost上本地运行应用程序时,一切正常,并且额外功能已成功加载。这是加载的源的正确结构:但是当我出于某种原因从服务器运行我的应用程序时,路径…

Django在初始化中将波兰语字符传递给Angular会导致lexer错误 - javascript

这是问题所在-我想使用init从Django传递到Angular数据。我将通过以下方式进行操作:<div ng-init="supervisor={{supervision.supervisor}}"> 哪个看起来还好吧?但是,一旦变量{{supervision.supervisor}}包含Lexer Error: Unexp…

javascript popupwindow之后的行如何工作? - javascript

好的,我有一个来自后面代码的方法,可以创建一个popupwindow。然后有一行代码要在那之后执行,我想知道那行代码何时执行,是在使用popupwindow之后执行还是在创建popupwindow之后执行?例如:void exPopupWindowMethod() { string scr = "window.open('exampleP…