Question

我在将jquery源代码拆分为多个文件时遇到了一些问题。我真正的源代码有点复杂，但下面的简单示例显示我的问题非常好。首先，我想向您展示一个只有一个javascript文件的工作示例。之后，我将描述我为了将javascript分成两个文件而尝试的内容。

我的html代码看起来像这样（“./ jquery”是我本地jquery下载的符号链接）：

<html>
  <head>
    <script src="./jquery"></script>
    <script src="./file1.js"></script>
  </head>

  <body>
    <div id="content"></div>
  </body>
</html>

file1.js中的jquery源代码如下所示：

$(document).ready(function() {

  var Test = (function() {
    var content = $('#content');

    var init = function() {
      content.html('<p>test</p>');
    };

    return {
      init: init
    }
  })();

  Test.init();
});

打开页面后，显示“test”，以便此示例按预期工作。

但现在我想把整个测试部分放到另一个文件file2.js中。我的html基本相同，但获得了额外的一行：

<script src="./file2.js"></script>

file1.js现在只包含init函数的调用：

$(document).ready(function() {
  Test.init();
});

和file2.js包含Test的定义：

var Test = (function() {
  var content = $('#content');

  var init = function() {
    content.html('<p>test</p>');
  };

  return {
    init: init
  }
})();

当我打开页面时，“test”不再显示。为了确保完全调用init函数，我添加了一个console.log（“test”）;到正常工作的init函数。因此，我认为在DOM准备好之前可能会调用该函数，但实际上我很无能为力。也许有人可以给我一个提示如何进行运行。

提前致以最诚挚的问候和谢意！

Answer 1

AngularJS提供依赖注入，模块，服务，工厂和各种其他优点。需要一点时间来习惯，但非常值得IMO：从DOM中更清晰地抽象javascript，从演示文稿中获取数据等。

我感谢你的问题是特定于JQuery，但特别是如果你要开始一个新网站，我建议你试试Angular。

Answer 2

你可以根据自己的喜好做几件事...... 1.将脚本移动到HTML文件整数的末尾而不是标题...

<html>
  <head>
  </head>

  <body>
    <div id="content"></div>
  </body>
  <script src="./jquery"></script>
  <script src="./file2.js"></script>
  <script src="./file1.js"></script>
</html>

在secuencially中考虑这个问题...如果你不想在引用DOM中的元素的每个模块中声明var，则需要首先存在该元素，然后你可以向模块声明“global”var < b>含量的。这样你原来的file2.js就可以了。

另一种方法是向您的模块声明内容“global”，但在init函数中初始化...

var Test = (function() {
  var content;

  var init = function() {
    content = $('#content');
    content.html('<p>test</p>');
  };

  return {
    init: init
  }
})();

现在，您可以在所有模块的功能中使用内容变量。

希望这有帮助，请告诉我。

Answer 3

file1取决于file2。确保file1通常位于html中的file2之后。

Answer 4

修改你的file2.js，如下所示：

var Test = {
  content : $('#content'),
  init : function() {        
    Test.content.html('<p>test</p>');
  }
  //, include other functions here
};

修改您的file1.js，如下所示：

$(document).ready(function(){
   Test.init();
})

现在在声明file2.js之前宣布file1.js，因为file1.js正在引用file2.js中的某个功能。

如何在使用模块模式时将jquery源代码拆分为多个文件？

4 个答案: