Question

我在JavaScript中使用模块模式。我有一个文件说controller.js处理事件。问题是我想使用子模块。但是由于事件是在controller.js中处理的，如果有任何问题，我将如何处理子模块中的事件？我从另一个文件中调用一个名为PAGE_DISPLAYED的自定义事件，例如view.js.这个事件由controller.js监听，并且根据显示的页面，它执行其他操作，例如绑定特定于该特定页面的附加事件处理程序。如何使用子模块执行此操作。

示例代码：

window.KDJ || (window.KDJ = {});    //namespace
KDJ.controller = (function () {
    $(document).off('PAGE_DISPLAYED');
    $(document).on('PAGE_DISPLAYED', function (e, data) {
    switch(data.pageId) {
    case "page1":
        // do something..
        break;
    case "page2":
        // do something..
        break;
    }
    });

    return {
        // exported methods and props..
    };
})();

如何扩展上述代码和事件委托？或者代码架构是否存在任何限制。

我正在使用jQuery Mobile并通过收听PAGE_DISPLAYED事件来调度pagechange事件：

window.KDJ || (window.KDJ = {});    //namespace
KDJ.view = (function () {  
    // ...
    $(document).off('pagechange');
    $(document).on('pagechange', function (e, ui) {
        //...
        $(document).trigger(PAGE_DISPLAYED, {'pageId': loadedPageId, 'key': key});
    });
})();

感谢。

Answer 1

好吧，我想了几个可能性，但就可读性而言，我最喜欢的是：

window.KDJ || (window.KDJ = {});    //namespace
KDJ.controller = (function () {
    $(document).off('PAGE_DISPLAYED');
    $(document).on('PAGE_DISPLAYED', function (e, data) {

        //Use the Id if it exsits, if not, try to execute the function
        switch(data.pageId) {
            case "page1":
                // do something..
                break;
            case "page2":
                // do something..
                break;
            default: 
                if(data.customFunction)
                    data.customFunction();
                break;
        }

    });

    return {
        // exported methods and props..
    };
})();


KDJ.view = (function () {  
    // ...
    $(document).off('pagechange');


    $(document).on('pagechange', function (e, ui) {

        //the function will be executed
        $(document).trigger(PAGE_DISPLAYED, {
            customFunction = function(ui) {
                console.log("I'm doing something awesome with the ui!");
            }
        });

    });

    $(document).on('pagechange', function (e, ui) {

        //here I'll use the switch
        $(document).trigger(PAGE_DISPLAYED,  {
            'pageId': loadedPageId, 
            'key': key
        });

    });
})();

Here你有另一种选择，没有默认选项。告诉我，如果符合您的需求：）

如何使用模块模式在javascript中扩展事件委托？

1 个答案: