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();
   }
});

将内联JavaScript迁移到外部文件

1 个答案: