Question

我有两种不同的.js文档的2个函数。

File1.js

$(document).ready(function Function1(){
    var $input = $("#input-country");
    $input.typeahead({source:['United States', 'China', 'Germany']});
});

File2.js

$(document).ready(function Function2(){
    var $input = $("#input-country");
    $input.typeahead({source:['Menu 1', 'Menu 2', 'Menu 3']});
});

我创建了一个全局js，它调用了2个函数global.js

Global.js

$(function TestName() {
    Function1();
    Function2();
});

导入文件时，只有订单中的内容有效。

<script src="js/File1.js"></script>
<script src="js/File2.js"></script>

在这种情况下，只有File1.js有效，第二个没有。

或

<script src="js/File2.js"></script>
<script src="js/File1.js"></script>

在这种情况下，只有File2.js有效，第一个没有。

Answer 1

首先，您应尽量避免在可能的情况下污染全局名称空间，但是，可以通过按如下方式分配给窗口对象来实现Web浏览器中的共享功能：

// File 1 - using an immediately invoked function expression (IFFE)
(function(global) {
  // make available globally:
  global.funcOne = myFunc;

  var privateVariable = 1;

  function myFunc() {
    return privateVariable;
  }
}(window));

// File 2 - using an immediately invoked function expression (IFFE)
(function(global) {
  // make available globally: 
  global.funcTwo = myFunc;

  var privateVariable = 2;

  function myFunc() {
    return privateVariable;
  }   
}(window));

// your "global" js file (using the jquery document ready wrapper):
$(function() {
   console.log(funcOne() + funcTwo()); // returns 3
});

这是一个展示这个概念的JsFiddle。

注意：IFFE模式不太常见，因为ECMAScript的最新版本和module bundler允许我们更优雅地执行此操作。

为了证明这适用于您的具体示例，我将采取以下措施：

// File 1
(function(global, $) {
    // make available globally:
  global.setCountries = setCountries;
  // private variable:
  var data = {source:['United States', 'China', 'Germany']};
  function setCountries() {
    $("#input-country").typeahead(data);
    console.log('setCountries() Called!'); // not required.
  }
// dependencies:  
}(window, jquery));

// File 2
(function(global, $) {
    // expose global function:
  global.setMenu = setMenu;
    // private variable:
    var data = {source:['Menu 1', 'Menu 2', 'Menu 3']};
    // private function:
  function setMenu() {
    $("#input-country").typeahead(data);
    console.log('SetMenu() Called!'); // not required.
  }
// dependencies:
}(window, jquery));

// Global Js
$(function() {
   function TestName() { 
       setMenu();
       setCountries();
   }
   TestName();
});

调用来自不同.js文档的函数

1 个答案: