模块化JS问题：非全局函数运行及点击事件失效排查

我运行这段代码后，点击事件没有任何反应，甚至init函数中的console.log("banana")也没有输出到浏览器控制台。这是我第一次自行尝试模块化JS，请问我存在哪些理解误区？

先看你的原始代码（标注出关键错误）：

<script type="text/javascript"> 
// Set Schedule 
(function() { 
  var schedule = { 
    report: [], 
    template: $('#report_schedule').html(), 
    init: function() { 
      this.cacheDom(); 
      this.bindEvents(); 
      console.log("banana"); 
    }, 
    cacheDom: function() { 
      this.$setScheduleBtn = $('#setScheduleBtn'); 
      this.$reportSchedule = $('#reportSchedule'); 
    }, 
    bindEvents: function(){ 
      console.log("potato"); 
      this.$setScheduleBtn.on('click', showReportScheduler.bind(this)); 
    }, 
    showReportScheduler: function(){ 
      this.$reportSchedule.toggle(); 
    }, 
    schedule.init(); // ❌ 语法错误：对象字面量内部不能直接调用方法
  }; 
})(); 
</script> 
<span class="btn" id="setScheduleBtn">Set Schedule</span> 
<div id="reportSchedule" name="reportSchedule" style="display: none;"> 

你踩的几个模块化JS误区： #

• 对象字面量的语法错误：这是最致命的问题——你在schedule对象内部直接写了schedule.init();，对象字面量只能包含key: value的键值对，不能直接执行语句。这个错误会导致浏览器直接解析失败，整个JS代码都不会运行，所以你看不到任何控制台输出。
• DOM加载顺序问题：你的JS代码写在了DOM元素（按钮和容器）的前面。浏览器从上到下解析HTML，当执行这段JS时，后面的<span>和<div>还没被渲染到DOM树里，所以$('#setScheduleBtn')这类选择器会返回空对象，就算语法没问题，事件绑定也会无效。
• 方法引用的作用域错误：bindEvents里你用了showReportScheduler.bind(this)，但showReportScheduler是schedule对象的内部方法，不是全局函数，直接引用会找不到它，正确写法应该是this.showReportScheduler.bind(this)。

你的最终代码完美解决了所有问题： #

<span class="btn" id="setScheduleBtn">Set Schedule</span> 
<div id="reportSchedule" name="reportSchedule" style="display: none;"> ...... </div> 
<script type="text/javascript"> 
/******************/ 
/** Set Schedule **/ 
/******************/ 
(function() { 
  var schedule = { 
    report: [], 
    template: $('#report_schedule').html(), 
    // Init functions 
    init: function() { 
      this.cacheDom(); 
      this.bindEvents(); 
    }, 
    // Cache elements from DOM 
    cacheDom: function() { 
      this.$setScheduleBtn = $('#setScheduleBtn'); 
      this.$reportSchedule = $('#reportSchedule'); 
    }, 
    // Set events 
    bindEvents: function() { 
      this.$setScheduleBtn.on( 'click', this.showReportScheduler.bind(this) ); 
    }, 
    // Display on click 
    showReportScheduler: function() { 
      this.$reportSchedule.show("slow"); 
    } 
  }; 
  schedule.init(); // ✅ 移到对象外部调用，语法正确
})(); 
</script>

改进的核心点：

1. 把JS代码放到了DOM元素之后，确保执行时能正确获取到页面元素
2. 将schedule.init()从对象内部移到了IIFE的末尾，避免了语法错误
3. 事件绑定时正确引用了对象内部的this.showReportScheduler，保证了作用域正确
4. 代码结构更清晰，注释也让模块化的职责更明确

如果后续想让代码更健壮，还可以考虑用DOMContentLoaded事件包裹初始化逻辑，这样即使JS放在页面头部也能正常执行，但你现在把JS放在DOM元素后的写法已经很稳妥了！

内容的提问来源于stack exchange，提问作者Imnotapotato