1

我在 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});
    });
})();

谢谢。

4

1 回答 1

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
        });

    });
})();

在这里，您有另一个选项，没有默认值。告诉我是否适合您的需求:)

于 2012-08-02T19:01:32.850 回答