javascript - 将内联 JavaScript 迁移到外部文件

Question

我在几个不同的页面上有一些内联 JavaScript，如下所示：

$(function() {
   var myVar1 = ...;
   var myVar2 = ...;
   var myVar3 = ...;

   function myFunc1() {
      ...
   }

   function myFunc2() {
      ...
   }

   if (blah blah) {
      myFunc1();
   }
   else {
      myFunc2();
   }
});

我想将它们移动到外部脚本中，这是部署客户端 JavaScript 的推荐方式。

但是，对于每个单独的页面，我对 variable 有不同的值myVar1，所以看起来我必须创建多个非常相似的 JS 文件，因为这个微小的差异。有没有更好的办法？

Answer 1

您可以将变量存储在相关的现有 HTML 元素属性中，并在代码中检索它：

<div class="myclass" data-var1="Page 1"></div>


$(function() {
   var myVar1 = $(".myclass").data("var1");
   var myVar2 = ...;
   var myVar3 = ...;

   function myFunc1() {
      ...
   }

   function myFunc2() {
      ...
   }

   if (blah blah) {
      myFunc1();
   }
   else {
      myFunc2();
   }
});

---

另一种解决方案是myVar1从您的函数中取出并将其声明为每个页面中的全局变量。

例如：

<script type="text/javascript">
  var myVar1 = 'Page1';
</script>
<script type="text/javascript" src="myscript.js"></script>

为澄清起见，“myscript.js”将是：

$(function() {
   var myVar2 = ...;
   var myVar3 = ...;

   function myFunc1() {
      ...
   }

   function myFunc2() {
      ...
   }

   if (blah blah) {
      myFunc1();
   }
   else {
      myFunc2();
   }
});