【问题标题】:Is this MVC in javascript?这是javascript中的MVC吗?
【发布时间】:2012-02-10 18:06:05
【问题描述】:

尽管我在 PHP 中多次使用 MVC,但我发现它在 Javascript 中完全不同。我正在网上阅读 Javascript 中的 MVC,但其中许多都有不同的实现。我想出了一个简单的 MVC,但我认为这是不正确的。这是可以接受的还是完全错误的?

var AppView = View.extend({

    init: function()
    {

        // listen to Model changes
        this.listen("counterChanged", $.proxy( this.updateCounter, this ));

        // assign click event; call controller method
        this.container.find("#increase").click( this.callback( this.Controller, "increase" ));
        this.container.find("#decrease").click( this.callback( this.Controller, "decrease" ));
    },


    updateCounter: function( evtData )
    {
        this.container.find("#counter").html( evtData.newValue );
    }

});

var AppController = Controller.extend({

    increase: function()
    {
        this.Model.update("counter", this.Model.get('counter') + 1 );

    },

    decrease: function()
    {
        this.Model.update("counter", this.Model.get('counter') - 1 );

    }

});


var AppModel = Model.extend({


    onUpdate_counter: function( newValue )
    {
        this.fireEvent("counterChanged",{
            newValue: newValue
        })
    }

});




var App = {}

$(document).ready(function(){

    App.Model = new AppModel({
        counter: 0
    });
    App.Controller = new AppController( App.Model );
    App.View = new AppView("#app", App.Controller );    

    App.Model.setView( App.View );

});

HTML:

<div id='app'>

    <div id='counter'>0</div>

    <a id='increase'>Increae</a>
    <a id='decrease'>Decrease</a>

</div>

View 监听模型中的变化并将事件分配给 html 锚点。 View 在单击锚点时调用控制器,然后控制器更新模型。

【问题讨论】:

    标签: javascript model-view-controller design-patterns


    【解决方案1】:

    这是经典的 1979 型 MVC:

    • 控制器更新模型
    • 模型通过侦听器更新视图

    PHP/Rails(一般的 Web 请求/响应)是一种稍微不同的 MVC(受 Web 的请求/响应性质限制):

    • 控制器更新模型
    • 控制器从模型中获取数据并将其发送到视图

    在这两种类型中,视图事件都会触发控制器操作。

    【讨论】:

    • clyfe // 在您看来,在 Javascript 环境中哪个更好?我在我的一个项目中使用了 PHP 风格的 MVC,但我的经理指出我的控制器与视图耦合。
    • 在客户端js中,经典模型有更多的好处。也有努力通过服务器推送(web sockets,comet)技术使用经典模型服务器端。一般来说,经典模型更好(耦合更少,样板更少)。 Model-2 只是请求/响应网络性质限制的结果。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-11-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多