javascript自定义模块系统

时间:2016-06-13 13:58:20

标签: javascript jquery

我正在尝试自己创建一个基于自定义模块的应用程序。

第一个想法:

我希望有几个模块,它们都代表一个文件)

1模块: 对象,带文件名。 Object.js 第二个模块: 实用程序,文件名为Utils.js

现在你可以在我的代码中看到我使用get脚本来加载所有这些文件并准备一个全局应用程序对象,我可以在我的应用程序中使用它。

但是我想在开发结束时将所有js组合起来并将其缩小,所以基本上我不知道如何检查(并注册)那些需要文件本身的模块。这是我的app.js和我的Object.js

app.js:

var shop = (function () {

    'use strict';

    var modules = [];

    var getModulesDir = function () {
        return document.location.origin + "/js/App/modules/"
    }

    var registerDefaultModules = function () {

        modules.push({
            name: "Object",
            alias: "Object"
        }, {
            name: "Utils",
            alias: "Utils"
        });
    };

    var loadModules = function () {

        jQuery.each(modules, function (key, module) {

            if (module.name == "") {
                console.error("loading script without name");
                return true;
            }

            if (module.alias == "") {
                module.alias = module.name;
            }

            if (typeof shop[module.alias] !== "undefined") {
                return true;
            }

            window.moduleAlias = module.alias;

            var path = "";

            if (typeof module.path != "undefined") {
                path = module.path;
            }

            if (path == "") {
                path = getModulesDir() + module.name.split('.').join('/') + ".js";
            }

            $.getScript(path)
                .done(function (script, textStatus) {

                })
                .fail(function (jqxhr, settings, exception) {
                    console.error('failed loading a script')
                });
        });
    }

    var init = function () {

        registerDefaultModules();
        loadModules();
    }

    return {
        init: init
    };

})();

jQuery(document).ready(function () {
    shop.init();
});

Object.js

(function($, app) {
    $(window).load(function(event) {

        'use strict';

        app.Object = {

            getSize: function(object) {

                var size = 0,
                    property;

                for (property in object) {
                    if (object.hasOwnProperty(property)) {
                        size++;
                    }
                }

                return size;
            }
        }

        return app;
    });
})(jQuery, shop);

我可能完全错了,如果有人告诉我正确的做法,那就好了。

0 个答案:

没有答案