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

Question

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

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

   function myFunc1() {
      ...
   }

   function myFunc2() {
      ...
   }

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

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

但是，对于每个单独的页面，我为变量 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();
   }
});