javascript - 理解模块化 javascript 模式

Question

我正在尝试编写“更好”的 javascript。

下面是我发现并尝试采用的一种模式。但是，我对它的使用有点困惑。

例如，我有一个名为“工作”的页面。该页面上的任何 JS 功能都将封装在类似以下内容中:

window.jobs = (function(jobs, $, undefined){
    return {
        addNew: function(){
            // job-adding code
        }
    }
})(window.jobs|| {}, jQuery);

$(function(){
    $('.add_job').on('click', function(event){
        event.preventDefault();
        window.jobs.addNew();
    });
});

正如您可能推断出的那样，我所做的只是用对我的全局作业对象中的函数的调用替换了匿名事件处理程序函数中的所有代码。我不确定为什么这是一件好事，除了它减少了可变冲突的可能性并使整个事情变得更整洁，但这对我来说已经足够了。

可能相当明显的问题是:我所有的事件绑定(bind)初始化类型的东西仍然位于我 Shiny 的新工作对象之外:它应该在哪里？在工作对象内部？在作业对象内的返回对象内？在 init() 函数中？

我只是想了解一个用于放置简单功能的稳定、基本的框架。我不是在构建 JS 应用程序，我只是想编写比实际更健壮和更易于维护的代码现在。热烈欢迎任何和所有建议:)

Answer 1

您也可以将您的应用程序分解为任意数量的模块/对象。

例如，您可以有另一个对象/模块来缓存和定义所有 DOM 节点，还有另一个对象/模块只处理任何事件。例如:

(function ( win, doc, $, undef ) {
    win.myApp = win.myApp || { };

    var eventHandler = {
        onJobClick: function( event ) {
            event.preventDefault();
            myApp.addNew();
        }
    };

    var nodes = (function() {
        var rootNode = $( '.myRootNode' ),
            addJob = rootNode.find( '.add_job' );

        return {
            rootNode: rootNode,
            addJob: addJob
        };
    }());

    $(function() {
        myApp.nodes.addJob.on( 'click', myApp.handler.onJobClick );
    });

    myApp.nodes = nodes;
    myApp.handler = eventHandler;
}( this, this.document, jQuery ));

在这个(模块)模式中如何创建单例并不重要，无论是作为文字、构造函数、Object.create() 还是诸如此类的东西。它需要满足您的要求。

但是您应该尽可能多地创建特定的模块/对象。当然，如果将这些单例/模块/对象分成多个 javascript 文件并按需加载它们更有意义，那么在你说刀之前，你就处于模块化编程模式的世界中，处理 requireJS 和 AMD 或 CommonJS 模块。