Question

简短版本：如何保持不同<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得到处理。

Answer 1

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

＆＃13;

<!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>

＆＃13;

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

保持脚本元素独立

1 个答案: