保持脚本元素独立答案

【问题标题】：Keeping script elements independent保持脚本元素独立
【发布时间】：2015-05-25 01:56:26
【问题描述】：

短版：如何保持不同<script>元素的内容相互独立？

加长版：我有一个 django 模板，看起来有点像这样：

<div class="app-container">
  <script src="app.js"></script>
  <script>
    $(function() {
        app_init($('.app-container')); // app_init is defined in app.ja
    });
  </script>
</div>

困难在于我希望能够在同一页面中多次包含此模板。当我这样做时，$('.app-container') 选择器会匹配页面上的所有 <div class="app-container"> 元素。

保持这些独立的最佳方式是什么？我能想到的一些选项，但不太清楚如何使它们起作用：

找到<div ...> 标记，它是<script> 标记的父标记。如果脚本是自动执行的，那么我可以使用document.scripts[-1] 看到它是如何工作的，但是当代码在$(function () { ... }) 中执行时我不知道如何执行此操作。
以编程方式分配<div> 标记的类，然后以编程方式在javascript 中找出相同的类。但我不知道该怎么做。
巧妙地使用匿名函数并捕捉到了这一点，我还是不太明白。

编辑我看到人们对此提出了各种不同的建议：

<div class="app-container">
  <script>
    var thisscript = document.currentScript;
    $(function() {
      app_init($(thisscript).closest('.app-container'));
    });
  </script>
</div>

如果模板在一个页面中被多次使用，这将不起作用，因为thisscript 变量在它们之间是通用的，因此它始终是页面中最后一个被处理的div.app-container。

【问题讨论】：

你的最终目标是什么？看起来你的代码正在做它应该做的，但不是你想要的。你想达到什么目的？如果您需要独特的元素，可以在每个元素上使用一个 id。
嗯，和罐头上写的差不多。我希望能够编写一个 django 模板，其中包含一些 html 标签和一些操作这些标签的脚本，而不必在每次包含模板时为标签分配唯一的 ID。我可以只要求用户在每次包含模板时添加一个 edtra unique_id 参数，但这很烦人，如果他们忘记这样做，就会默默地失败，而且看起来应该没有必要——我应该能够得到一个引用包含 this 脚本标记的div 标记。

标签： javascript jquery html django

【解决方案1】：

这是一种可行的技术。您必须弄清楚全局变量问题。

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<script>
  var thisScript = [];
</script>

<body>

  <div class="app-container">
    some text
    <p>one</p>
    <script src="app.js"></script>
    <script>
      thisScript.push(document.currentScript);
      console.log(1);
      $(function() {
        //app_init($('.app-container')); // app_init is defined in app.js
      });
    </script>
  </div>

  <div class="app-container">
    second instance
    <p>two</p>
    <script src="appy.js"></script>
    <script>
      thisScript.push(document.currentScript);
      console.log(2);
      $(function() {
        //alert( script );
        //app_init(script); // app_init is defined in app.js
      });
    </script>
  </div>

  <div class="app-container">
    here is poor html
    <p>last</p>
    <script src="appy.js"></script>
    <script>
      thisScript.push(document.currentScript);
      console.log(3);
      $(function() {
        /**/
      });
    </script>
  </div>

  <script>
    console.log(thisScript);
  </script>
</body>

</html>

另外，请参阅此帖子了解更多可能适用于您的情况的选项：How may I reference the script tag that loaded the currently-executing script?

【讨论】：

查看问题的更新；这仅在文档中有效，如果多次使用相同的模板则无效。 “全局变量问题”确实是问题所在。
我对 django 不熟悉。如何添加模板？
Django 的模板系统允许你包含另一个模板 - {% include 'other_template.html' %} 如果有帮助的话。无论如何，django 在这里让人分心。问题是如何存储对当前脚本的引用，以便可以在文档 onReady 函数中以可以在单个页面中重复的方式使用它。
我将它们全部推送到一个数组中。因此，您仍然拥有一个容纳各个实例的全局变量。请让我知道这是否有效。
我不确定这有什么帮助 - 那么你必须知道每次包含脚本时要使用的数组索引，这是完全相同的问题。