Question

我正在开发一个更大的网络应用程序，由多个组件组成，这些组件可以完全或单独存在于页面上。必须存在父AppView元素才能进行事件委派。

以下是如何设置事件委派：

//inside controlsView.js
appView.view.trigger('eventOccured');

...

//later on in controlsView.js
$(document).on('eventOccured', appView.view, function(){
    controlsView.doSomething();
});


//inside ChartView.js
$(document).on('eventOccured', appView.view, function(){
    chartView.doSomething();
});

appView，controlsView和chartView是单独的.js文件，但即使使用全局appView变量，其他.js文件也不会检测到被触发的事件。我的问题是我如何尝试触发/检测appView.view上的自定义事件（应用程序所在的父HTML元素的jQuery对象）？

这是真实世界的示例代码：

//*************** controlsView.js
$(document).ready(function() { 

    var controlsView = {
        initialize: function(){
            var self = this;
            console.log('hi');
        }
    }

    $(document).on('loadControls', appView.view, function(){
        console.log('hi');
        controlsView.initialize();
    });
});

//*************** appView.js
$(document).ready(function() { 
    appView = {
        initialize: function(){
            appView.view = $('#interactiveChartContainer');
            if ($('#graphControls').length){
                appView.view.trigger('loadControls');
            }
        }
    }

    //if the containing element is missing, don't bother loading the rest of the app
    if (!($('#interactiveChartContainer').length)){
        return;
    } else {

        //only run this app if the right element exists on the page.
        appView.initialize();

    }

});

Answer 1

在几个不同的脚本之间拆分代码时，如果一个脚本依赖另一个脚本，则需要确保它们的顺序正确。例如，如果一个绑定到一个事件，另一个触发一个事件，你将需要确保在事件立即发生时首先包含绑定到事件的事件，否则事件将在事件处理程序进入之前发生的地方。

跨多个jQuery脚本的变量/事件

1 个答案: