理解模块化的javascript模式

我正在尝试写’更好’的javascript.

以下是我发现的一种模式,我正在尝试采用.但是,我对它的使用有点困惑.

比方说,我有一个名为“Jobs”的页面.该页面上的任何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();
    });
});

正如你可以推断的那样,我所做的就是替换所有代码,这些代码将放在匿名事件处理函数中,并调用我的全局作业对象中的函数.我不确定为什么这是一件好事,除了它减少了可变碰撞的可能性并使整个事情变得更整洁,但这对我来说已经足够了.

– 可能相当明显 – 的问题是：我所有的事件绑定init类型的东西仍然位于我闪亮的新工作对象之外：它应该在哪里？在工作对象里面？在jobs对象里面的返回对象里面？在init()函数内？

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

解决方法:

您可以在任何数量的模块/对象中分解您的应用程序.

例如,您可以拥有另一个对象/模块来缓存和定义所有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()还是诸如此类.它需要符合您的要求.

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

标签：jquery,javascript,design-patterns,modular
来源： https://codeday.me/bug/20190626/1289389.html