如何在整个网站上组织大型JS/JQuery代码库?

如何在整个网站上组织大型JS/JQuery代码库?关于如何组织代码片段,有很多很好的资源,但是对于如何将它们全部拉到一起并将每一个片段放在适当的位置却没有真正的帮助:横向代码组织、使用同一代码的多个页面、使用松耦合保持干燥等等。

下面是我如何处理它。我从来没有像这样舒适地组织我的代码,因为我认为它是草率的,可能会导致可维护性/可伸缩性问题,但我真的不太清楚。

我意识到我每个人都有自己的要求,而且没有交钥匙解决方案,但是我想听听关于我做错了什么,为什么我做错了,以及关于如何编写更易于维护的代码的建议。

我想我真正想了解的是:

1. 你如何处理你的逻辑 需要在多个地方使用,打开 多页?

2. 如何组织特定页面 代码?每一页的名称间距 全局对象是个好主意?1。

3. 你从一开始做什么 确保您不经常 重新编写组织 应用程序变大时的模式 更大?我可能在第四天 迭代写这个东西。

每个页面接收主application.js文件。每增加一页都有自己的 application.pagename.js文件。我使用服务器端逻辑来包含文件(首先检查 如果页面中甚至存在一个页面-有些页面不需要JS),然后按顺序初始化它们。

所以我的主页看起来像:

<script src="js/application.js"></script>
<script src="js/application.index.js"></script>
<script>
    MyApp.init();
    MyApp.index.init();
</script>

我的URL约定是/page/subpage/id/。我有大约10页和一大堆子页,每个子页都需要自己的逻辑。请参阅本文中的最后一个示例。

我的大部分代码已经模块化为jquery ui小部件或jquery插件,所以我想说这些文件中75%的代码都需要()创建一个小部件并初始化它。

我使用RequireJS根据需要拉入小部件。

// application.js
var MyApp = {
    init: function(){
        var self = this;

        // these widgets are available on every single page
        // notice the call to jquery.deparam.js - i'll use this later to init subpage logic.
        require(['js/widget1.js', 'js/widget2.js', 'js/widget3.js', 'js/jquery.deparam.js'], function(){

            // deparam the query string.  I'll use this later.
            self.querystring = $.deparam.querystring();

            // init widgets once the document is ready
            $(function(){
                $("#widget1").widget1();
                $("#widget2").widget2();

                // make these bindings available immediately as well.
                self.rebindable();
            });
        });
    },

    // I use jQuery UI Dialog extensively as a window manager, and each dialog is loaded
    // via an AJAX request.  I'll call this method after each AJAX request to
    // rebind some key widgets.
    rebindable: function(){
        $("#widget3").widget3();
    }
};

// application.index.js
// home page specific stuff.  this file is only included on the home page.
MyApp.index = {

    // my convention is that init is automatically called after the script
    // is included in a page, outside of a doc.ready statement.
    init: function(){
        var self = this;

        require(['js/widget4.js'], function(){
            $(function(){
                self.widget4( $("#foo") );
            });
        });
    },

    // passing elements to each method allows me to call this init code
    // outside of the index page.  I can require() this file, and only init
    // widget4, and even use a different element.
    widget4: function( element ){
        var config = {
            something: "custom to the home page"
        };

        element.widget4( config );
    }
};


// application.foo.js
// page "foo" stuff
MyApp.foo = {

    init: function(){
        var self = this;

        // this page happens to use the same widget3 and configuration present 
        // in MyApp.index.  this is where things can get sloppy and unmaintainable
        // really quickly.
        require(['js/application.index.js'], function(){
            $(function(){
                MyApp.index.widget3( $("#bar") );
            });
        });

        // page "foo" has three subpages (or actions) and require
        // their own logic.  url convention:  /foo/subpage1/
        // init whichever page we're on...
        switch( self.querystring.subpage ){
            case "subpage1":
                self.subpage1.init();
                break;
            case "subpage2":
                self.subpage2.init();
                break;
            case "subpage3":
                self.subpage3.init();
                break;
        }
    },

    subpage1: function(){
        init: function(){
            var self = this;

            // once the DOM is ready init dialog.
            $(function(){
                self.dialog( $("#openDialog") );
            });
        },

        dialog: function( element ){
            element.bind("click", function(){
                $('<div></div>').dialog({
                    open: function(){

                        // see what i'm doing here?
                        MyApp.rebindable();

                        // maybe more bindings specific to this
                        // dialog here
                    }
                });
            });
        }
    },

    subpage2: function(){
        init: function(){
        }
    },

    subpage3: function(){
        init: function(){
        }
    }
};