构建/组织站点范围的JavaScript

时间:2013-11-07 19:08:06

标签: javascript

我正在建立一个全新的网站,并以一种似乎对我有意义的方式构建我的javascript。我创建了一个站点命名空间,以及一个小部件/功能“命名空间”,它封装了这些小部件/功能的方法。我已经确定了每个'命名空间',使得站点上的任何给定页面都可以调用某些(公共)方法来实例化窗口小部件/功能。

以下是我的javascript结构示例:

var THESITE = THESITE || (function(){
    navigation = function(){
        var init = function(){
            // do navigation stuff
        }

        return {
            init : init
        }
    },

    widgets = {
         widget1 : (function(){
            var newWidget = function(){
                // do widget1 stuff
            }

            return {
                newWidget : newWidget
            }
         })(),
         widget2 : (function(){
            var newWidget = function(){
                // do widget2 stuff
            }

            return {
                newWidget : newWidget
            }
         })(),
         widget3 : (function(){
            var newWidget = function(){
                // do widget3 stuff
            }

            return {
                newWidget : newWidget
            }
         })();
    },

    init = function(){
        navigation.init();
    }

    return {
        init: init,
        navigation: navigation,
        widgets: widgets,
    }
})();

THESITE.init();

以及如何调用其中一种方法的示例:

THESITE.widgets.widget3.newWidget();

这种结构化我的javascript实用/普通吗?

1 个答案:

答案 0 :(得分:1)

是的,我会说你的结构很常见。但是,对于较大的项目,将模块/窗口小部件保存在单独的文件中并使用命名空间以确保不会发生全局范围内的冲突是切实可行的。 有关构建代码的好方法的更多信息,请参阅@ chris-allen建议的thread