Question

我正在开发一个项目，该项目使用mvc 4 api和vanilla mvc 4进行路由和视图。因为我们正在使用web api \ json，所有数据调用都是客户端驱动的，所以我们创建了很多javascript代码。

为了帮助解决这个问题，我们决定创建一个全局原型javascript对象来处理共享的东西，并在每个视图中包含一个javascript文件来处理该特定视图的所有客户端代码。（我知道这不是最佳的）

我的问题是每个视图的javascript文件。我们应该为每个视图创建一个原型对象，还是使用闭包？

如果没有每个视图的对象，我们会看到一个趋势，我们通常最终得到一个$（文档）.ready，事件连线如$（document）.on（'click'，...，view models，and a一堆旧的学校功能。看起来应该有一种方法可以将这些区域组织成更好的东西。我已经看到了关于如何这样做的一些建议，但他们没有展示如何结合jQuery负载，事件线ups，和查看模型。有没有人有任何建议，或者可能是一个简单的例子？

以下是我们通常最终的区域

$(document).ready(function () {....

$(document).on('click', '.button', function(e) {.....

function FooBar(){.....

Answer 1

我认为没有任何关于如何最好地实现这一目标的硬性规则 - 很多方法可以为这只猫提供皮肤。

但这就是我所做的：我倾向于为页面创建一个（或者更多，如果需要）闭包对象。它将有一个initialize方法，它包含$（）。ready（）处理程序，然后执行所有事件处理程序连接，以及需要发生的任何其他页面全局初始化。

这样的事情：

(function() {
    function Page() {
        var me = this;            

        // plain properties
        this.prop = "value";

        // compiled templates
        this.template = HandleBars.compile($("#template1").html());

        this.intialize =  function () {
            $().ready(function () {                    
                $("#button1").click( me.button1Click );
                $("#field1").change( me.field1Change );
            });
        };
        this.button1Click = function () {
            alert("click");
            me.doSomething();
        };
        this.field1Change = function () {
            alert("change");
        },
        this.doSomething = function (parm) {
            alert("doSomething");
        }
    }        
    var page = new Page();
    page.intialize();
})();

Answer 2

您应该为每个视图使用一个视图模型，并使用KnockoutJs或任何其他类似的javascript库将其绑定到您的视图（html），这样可以提供类似的内容（从第一个示例中获取）：

view（html）：

<html>
    <body>
        <p>First name: <input data-bind="value: firstName" /></p>
        <p>Last name: <input data-bind="value: lastName" /></p>
        <h2>Hello, <span data-bind="text: fullName"> </span>!</h2>       
    </body>
</html>

查看模型（javascript）：

var ViewModel = function(first, last) {
    this.firstName = ko.observable(first);
    this.lastName = ko.observable(last);

    this.fullName = ko.computed(function() {
        return this.firstName() + " " + this.lastName();
    }, this);
};

从服务器获取数据，并填充视图模型（和视图，因此）

$.get('/info/path/', function(data) {
    ko.applyBindings(new ViewModel(data.Planet, data.Earth));    
});

当然，如果你的最后一部分不在页面末尾，你可以将它放在document.ready或任何类似的方法中。

如何组织每个视图的JavaScript代码？

2 个答案: