理解模块化的javascript模式

2019-06-26 02:21:37 阅读：202 来源： 互联网

标签：jquery javascript design-patterns modular

我正在尝试写’更好’的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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

理解模块化的javascript模式