如何在 js 文件中执行长生不老药代码？

Question

我有一个 js“my_js_file.js”文件，我只包含在一个页面中。在那个 js 文件中，我需要通过调用 phoenix helper 来获取 url：

# my_js_file.js

function func1(userLogin) {
  var createUserUlr = "<%= user_home_path(@conn, :create, userLogin) %>";
  //...........

但它不起作用。 当我将它重命名为“my_js_file.js.eex”时，它仍然不起作用——“”之间的值没有得到评估。为什么不？有哪些选择？ 请注意，我将变量传递给 url。

Answer 1

我认为这是不可能的，因为static/ 目录中的资产不是由 Elixir 处理的，而是由您的资产管道处理的（默认为早午餐）。它们是预编译的，因此即使它有效，您也无法访问 @conn 变量，因为在编译静态资产时它不可用。

请记住，这是一件好事！服务器不需要在每个页面请求上重新呈现您的 Javascript。

您有多种选择来获得所需的结果：

硬编码

可能看起来很老套，但对于简单的情况来说已经足够了。我建议仅对路径进行硬编码，在开始时使用// 以保留当前协议（http/https）。如果您需要将此解析为完整的 URL，您可以使用this trick。

数据属性

对于一次性使用，您可以将data attribute 添加到标记的相关部分，例如登录表单：

<div id="create-user" data-url="<%= user_home_path(@conn, :create, userLogin) %>">
  <!-- ... -->
</div>

然后在您的 JavaScript 中，您可以访问 data 属性。请注意，根据您的用例，检索包含数据属性的 DOM 节点可能有比使用 document.querySelector 更好的方法，这只是一个示例：

let createUserUrl = document.querySelector("#create-user").getAttribute("data-url");

如果你只需要针对IE11+或者愿意使用polyfill，也可以使用dataset

let createUserUrl = document.querySelector("#create-user").dataset.url;

或者如果您使用的是 jQuery：

let createUserUrl = $("#create-user").data("url");

如果您要覆盖提交按钮的onclick 处理程序，也许您可​​以从不同的属性（例如form 的url）中提取URL。

在window 对象上添加属性

对于真正全局值，例如身份验证令牌等，您可以在window 对象上设置属性，例如在web/templates/layout/app.html.eex 中

<script>window.userToken = "<%= assigns[:user_token] %>";</script>

然后在你的 JavaScript 中，你可以简单地访问

window.userToken

其他解决方案

还有更高级的解决方案可以解决这个问题，包括：

• 添加一个单独的 JSON 端点，以 JSON 形式返回所需数据，然后可以从 JavaScript 请求这些数据

• 如果您使用 JavaScript 框架，例如 React.js、Vue.js 等，您可能能够利用框架或辅助 JavaScript 包中的路由逻辑。

我确信还有更多我现在没有想到的选择。