模块化 JS：如何运行一个非全局函数

Question

这是我的代码（简单）：

<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;">

我是运行这个，点击事件没有看到任何结果。我尝试在我的初始化函数中使用 console.log("banana"); 只是为了确保这个脚本是运行。我的浏览器控制台中没有香蕉。我不明白什么？

p.s: 第一次自己尝试模块化js。

编辑：

感谢提图斯的帮助。这是我的最终代码：

    <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>

Answer 1

schedule.init(); 语句在对象字面量中。您需要将它移到对象文字之外，但将其保留在函数内：

(function() {
    var schedule = { // object literal start
         ......
    };// object literal end

    schedule.init();

}/* function end */)();

模块化 JS：如何运行一个非全局函数

Modular JS: How to run a non-global function

javascript

modular-design

模块化 JS：如何 运行 一个非全局函数

Modular JS: How to run a non-global function

javascript

modular-design

模块化 JS：如何运行一个非全局函数