Question

Using jQuery as suggested by Wordpress，我已将代码包装在一个匿名函数中，以便jQuery不会与其他JavaScript库冲突：

(function($) {

    // Inside of this function, $() will work as an alias for jQuery()
    // and other libraries also using $ will not be accessible under this shortcut

})(jQuery);

问题是我想将我的代码分成两个文件：1）main.js和2）utility.js。

当封装两个文件时，主程序（main.js）如何调用另一个文件（utility.js）中的函数？

utility.js

(function($) { 

function doSomething() {
    /* code here */
}

})(jQuery);

main.js

(function($) { 

$(document).ready(function(){
    doSomething();
}

})(jQuery);

由于

Answer 1

您可以用来从 utility.js 中返回一个对象：

(function($, win) {
  win.util = function(){
    this.doSomething = function() {
      $('pre').append('util.js');
    }
  };
})(jQuery, window);

(function($, $U) { // <----referred it with $U

  $(document).ready(function() {
    $U.doSomething();
  });

})(jQuery, new util()); //<----pass the util object here.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<pre></pre>

其实我喜欢以OOJS方式使用它的方式。尝试创建构造函数并传递新对象。

Answer 2

最简单的解决方案是将utility.js中的所有函数分配给某个全局对象。假设您的代码在浏览器中工作，您可以执行以下操作：

<强> utility.js

(function($, context) { 

context.Utility = {
    doSomething: function() {
        /* code here */
    }
};

})(jQuery, window);

<强> main.js

(function($, Utility) { 

$(document).ready(function(){
    Utility.doSomething();
}

})(jQuery, Utility);

更通用的解决方案是使用异步模块加载（http://requirejs.org/）或类似JSPM的工具来管理应用程序中的模块。

Javascript：访问匿名函数中的函数

2 个答案: