Question

我在从外部js文件运行某些功能时遇到了一些问题。

html包括：

var explodePage = function(button) {
   //code here
   aboutPage();
}

var aboutPage = function() {
    //code here
}

js文件包括：

    <select class="selectcombusca" name="zone_id" onChange="carregacidades($('option:selected',this).val());">
         <option value="#">Select State</option>
         <option value="1">State 1</option>
         <option value="2">State 2</option>
    </select>

    <select class="selectcombusca" name="cidade_id">
         <option value="#">Select City</option>
         <option value="1">City 1</option>
         <option value="2">City 2</option>
    </select>

explodePage函数运行正常，但是一旦它到达嵌套的aboutPage函数的调用，就会开始向我抛出这些未捕获的类型错误。如果我不使用外部js文件并将所有内容放入html中，它的工作正常。对此非常新，所以可能会遗漏一些明显的范围或东西。任何解决方案？

Answer 1

声明函数的定义如下：

function explodePage(button) {
   //code here
   aboutPage();
}

function aboutPage() {
    //code here
}

<强>解释

当您使用var关键字来声明函数时，JS的执行发生在初始化变量时，您无法在声明之前引用或使用变量。与name函数defintion相反，JS解释器在执行之前首先选择包含的函数，并在代码执行之前初始化它。这称为AST - 抽象语法树，后面是JS解释器。

还要记住：

还要在Jquery document ready函数中绑定您的Jquery代码，以确保Jquery和DOM元素可用于绑定。

Answer 2

用变量污染全局窗口对象并不是一个好主意，因为可能存在冲突。 immediately-invoked function expression是一个很好的解决方案。

(function(){
   //You can declare your functions in here, and invoke them below
   $( document ).ready(function() {
      //Check that the DOM is ready, in order to manipulate it an add events
      $("#center-button").click(function() {
         explodePage("center"); 
      }); 
   });
})($); //Notice that we are injecting a dependency, in this case jQuery

从外部js文件调用函数/嵌套函数

2 个答案: