Question

我想创建一个javascript网络应用程序，我想基于类似MVC的原则构建。我的代码有效，但我正在努力解决如何做到这一点。我正在定义一个全局变量APP，我在其中放置控制器，视图，...... 两种方法都可以正常工作，但第二种方法需要更多的代码才能实现相同的＆＃34;结果。我读过关于IIFI（http://en.wikipedia.org/wiki/Immediately-invoked_function_expression）的内容，但是我并没有比第一个选项更有优势。

难道在第一个选项中，所有内容都放在APP中，因此它无法污染全局命名空间吗？或者不是选项1不够干净，我应该使用选项2吗？

这两种方法有哪些优点和缺点？

方法1：

<html>
<head>
<script type="text/javascript">
var APP = APP || {};
APP.homecontroller = {
    index: function(){
        APP.hometemplate.show();
    }
}
APP.hometemplate = {
    show: function(){
        var x=document.getElementById("content");
        x.innerHTML = "index content";
    }
}
function init(){
    APP.homecontroller.index();
}
</script>
</head>
<body>
<div id="content"></div>
<button onclick="init()">click to start</button>
</body>
</html>

方法2：

<html>
<head>
<script type="text/javascript">
var APP = APP || {};
(function (APP) {
    APP.homecontroller = (function () {    
        function index() {
            APP.hometemplate.show();
        }
        return {
            index: index
        };
    }());
    APP.hometemplate = (function () {    
        function show() {
            var x=document.getElementById("content");
            x.innerHTML = "index content";
        }
        return {
            show: show
        };
    }());   
}(APP));

function init(){
    APP.homecontroller.index();
}
</script>
</head>
<body>
<div id="content"></div>
<button onclick="init()">click to start</button>
</body>
</html>

Answer 1

在第一个示例中，您将创建APP对象并定义此对象的公共方法。它没有必要污染全局命名空间，因为所有成员都包含在APP内，但在我看来它污染了APP上下文本身（更多逻辑 - 每个更多的公共函数）。我不知道该项目有多大，但第二个例子给你更大的稳健性。它允许您在每个＆＃34;子对象内定义私有方法＆＃34;。

但是，MVC的所有层都应该分开并使用通知进行通信。

您可以为每个模块创建一个模块，因为MVC的特定部分由更多子机制组成是非常常见的，例如对于Model它可能是observers来检查data中的更改并调用刷新为view

var Model = (function(){
    var data = [];

    var Observer = function(){
        // some internal definition..
        this.queue = []; 
    };

    var getData = function(){
        // some logic here
        return data;
    };

    var addData = function(object){
        data.push(object); 
    }

    return {
        addData: addData,
        getData: getData,
        getObserver: new Observer();
    }
})();

与View类似，它处理表示层并公开refresh功能。

var Views = (function(){
    // whatever..
    var parts = [];

    var refresh = function(){
        for (var i = 0; i < parts.length; i++){
            // render view..
        }
    }

    return {
        refresh: refresh
    }
})();

..和Controller这只是一个桥梁＆＃34;在model和controller之间。

或者，随着项目的增长，您可以引入一个namespaces和一些AMD框架来处理更大量的JS文件。正如我所说，取决于你的项目真正有多大......它应该具备什么能力等等。这完全取决于。希望它对你有所帮助。

Javascript MVC之类的结构 - 如何创建类结构

1 个答案: