Question

这是一个非常基本的尝试，使用模块和MVC模式创建一个类似“hello world”的JS应用程序。

var appModules = {};

appModules.exampleModul = (function () {

    var _data = ['foo', 'bar']; // private variable

    return {
        view: {
            display: function() {
                $('body').append(appModules.exampleModul.model.getAsString());
            },
        },
        model: {
            getAsString: function() {
                return _data.join(', ');
            },
        }

    };

})();

appModules.exampleModul.view.display();

这很好用，但是我不满意如何使用完整的对象路径appModules.exampleModul.model.getAsString()从视图中引用模型函数。如何将公共模型方法公开给视图，因此我可以简单地使用model.getAsString()之类的东西？或者我需要以不同方式组织代码吗？

Answer 1

一个选项是您可以将这些对象转换为私有实现。

appModules.exampleModul = (function() {

            var _data = ['foo', 'bar'];
            // private variable

            var _view = {
                    display : function() {
                        $('body').append(_model.getAsString());
                    },
            };

            var _model = {
                    getAsString : function() {
                        return _data.join(', ');
                    },
            };

            return {
                view : _view,
                model : _model
            };
})();

Answer 2

你可以这样做：

var appModules = {};

appModules.exampleModul = (function () {

    var _data = ['foo', 'bar']; // private variable

    return {
        view: {
            display: function() {
                $('body').append(this.model.getAsString());
            },
        },
        model: {
            getAsString: function() {
                return _data.join(', ');
            },
        }

    };

})();
var display = appModules.exampleModul.view.display.bind(appModules.exampleModul);
display();

这不是最漂亮的解决方案，但确实在display函数中提供了更通用的解决方案！

Javascript简单的MVC +模块模式实现

2 个答案: