33

ある会社のインタビューで、私はこの質問をされました。

どのデザインパターンを知っていますか...それから、MVCデザインパターンに基づいた最も単純な「HelloWorld」アプリケーションを作成するように言われました。

JavaScriptプログラムを思いついた

var arr = ["a","b","c","d"];   // this is an array, same as store or model
alert(arr[0]);                // this is controller
//and browser alert is a view.

後で私はアラートがビューであると言われました。私が知っているMVCの基本的な概念は、モデルの変更がViewに報告されることです。そして、メソッドを呼び出すためのコントローラーが間にあります。

私のアプローチを修正するか、helloworldMVCアプリケーションの代替ソリューションを考え出すことができますか。また、MVCの微妙な側面についても説明します。

ありがとう。

4

6 に答える 6

110 
var M = {}, V = {}, C = {};

M.data = "hello world";

V.render = function (M) { alert(M.data); }

C.handleOnload = function () { V.render(M); }

window.onload = C.handleOnLoad;

コントローラー ( C) は、ある種の対話/イベント ストリームをリッスンします。この場合、それはページの読み込みイベントです。

モデル ( M) は、データ ソースの抽象化です。

ビュー ( V) は、モデルからデータをレンダリングする方法を知っています。

Controller は View に、Model から何かを操作するように指示します。

この例では

  • ビューは、いくつかのインターフェースを実装することを除けば、モデルについて何も知りません
  • モデルはビューとコントローラーについて何も知りません
  • コントローラーはモデルとビューの両方を認識しており、モデルからのデータを使用して何かを行うようにビューに指示します。

上記の例は、デモンストレーションを目的として大幅に単純化されていることに注意してください。JS MVC ワールドの実際の「hello world」の例については、 todoMVCを参照してください。

于 2011-12-13T23:48:13.173 に答える
20

より良い例

var M = {}, V = {}, C = {};

/* Model View Controller Pattern with Form Example */


/* Controller Handles the Events */

M = {
    data: {
        userName : "Dummy Guy",
        userNumber : "000000000"
    }, 
    setData : function(d){
        this.data.userName = d.userName;
        this.data.userNumber = d.userNumber;
    },
    getData : function(){
        return data;
    }
}

V = {
    userName : document.querySelector("#inputUserName"),
    userNumber : document.querySelector("#inputUserNumber"),
    update: function(M){
        this.userName.value = M.data.userName;
        this.userNumber.value = M.data.userNumber;
    }
}

C = {
    model: M,
    view: V,
    handler: function(){
        this.view.update(this.model);
    }
}

document.querySelector(".submitBtn").addEventListener("click", function(){
    C.handler.call(C);
}); 

/* Model Handles the Data */

/* View Handles the Display */
于 2014-03-09T16:42:45.413 に答える
1

MVC は、アプリケーションを構築するために使用する必要がある設計パターンです。MVC は、モデル、ビュー、コントロールの略です。基本的に、ビジネス ロジック (モデル) をユーザー インターフェイス (ビュー) および制御ロジックから分離する必要があると述べています。

例えば：

データベースからユーザーをロードするユーザークラスがあり、それらを保存できます。これはあなたのモデルです。

User クラスを使用してユーザーをログインさせる Controller があります。

コントローラーが完了すると、「Welcome $username」というテキストを含むテンプレートが表示されます。

また、モデルはビューとコントローラーについて認識してはならず、ビューはコントローラーについて認識してはなりませんが、コントローラーはモデルとビューについて認識している必要があります。

MVC のウィキペディア: http://de.wikipedia.org/wiki/Model_View_Controller

于 2011-12-13T23:57:57.020 に答える
0

ここで要点を見逃していると思います。

MVC は、アプリケーションの設計に使用するパターンです。最低限、モデルを変更して、変更がビューに反映されることを期待していると思います。

通常、モデルを表すオブジェクト、「ビュー」を表す別のオブジェクト (ビューとして使用しているモデルと HTML オブジェクトの間を仲介する可能性があります)、および入力を受け取るコントローラーがあります。 HTML オブジェクトから削除し、モデルを更新します。

したがって、編集フィールドを変更すると、編集フィールドがコントローラーに通知し、コントローラーがモデルを更新し、モデルがイベントを発生させ、コントローラーがこのデータに依存する他のビュー コンポーネントを更新するために使用します。

「hello world」バージョンを実装するにはさらに数行必要ですが、これは、このようなインタビューの質問から探しているものだと思います。

于 2011-12-13T23:51:16.583 に答える