将内联JavaScript迁移到外部文件

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

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

   function myFunc1() {
      ...
   }

   function myFunc2() {
      ...
   }

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

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

---

然而，对于每个单独的页面，变量

myVar1

的值都不同，因此，由于这个微小的差异，我似乎必须创建多个非常相似的JS文件。有更好的方法吗？

您可以将变量存储在相关的现有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();
   }
});

为了澄清，“myscript.js”应该是：

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

   function myFunc1() {
      ...
   }

   function myFunc2() {
      ...
   }

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

---

但是这会污染全局变量空间，这有点违背了闭包的目的？@MLister如果您不想使用全局变量，我已经编辑了我的答案，以提供另一种解决方案。@MLister闭包的目的是在加载DOM后运行，因为您使用的是速记jQuery

$（document）.ready（）

。但我明白全局变量并不总是最简单的解决方案。

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

   function myFunc1() {
      ...
   }

   function myFunc2() {
      ...
   }

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