10

Javascript を使用して小さな数独アプリを作成しました。今、その JavaScript コードを extjs ( 4.1.1a ) コードに変換しようとしています。ドキュメントを読んでMVC Architectureを理解しましたが、初心者なのであまり詳しくはないようでした。

私の数独アプリに基づいた Extjs の MVC アーキテクチャについて説明してもらえますか?

私の数独アプリ コードの設計は次のとおりです。

ここに画像の説明を入力

上記のデザインの説明は次のとおりです。

  • container (blue) --> parent panel (grey) --> child panel (red)

  • 「親パネル」は 9 個で、各「親パネル」には 9 個の「子パネル」があります。

  • 「親パネル」と「子パネル」の HTML 要素は、for ループを使用して動的に生成されています。

  • 「子パネルKeyDown」にイベントやイベントなどのイベントを書いてきました。click

  • 私はまた、いくつかの関数を書いています

    checkGroup()        --> 各「親パネル」で重複する番号があるかどうかを チェックしますcheckVertical()      --> 「コンテナー」の各垂直線で重複する番号を チェックしますcheckHorizo​​ntal() --> 「重複番号のコンテナ」

編集: (未完成で構造化されていないコード)

app.js (メインの js ファイル)

Ext.application({
     name: 'Game',
     appFolder: 'app',  
     controllers: ['Sudoku']     
});

コントローラー('app' フォルダー --> 'controller' フォルダー --> Sudoku.js)

//By using 'controller', trying to call 'view' here
Ext.define('Game.controller.Sudoku', {
    extend: 'Ext.app.Controller',

    init: function () {
        console.log("controller init");
    },
    onLaunch: function () {
        console.log("controller onLaunch");
    },
    views: ['Sudoku']
});

view ('app' フォルダー --> 'view' フォルダー --> Sudoku.js)

Ext.define('Game.view.Sudoku', {
    extend: 'Ext.window.Window',  //what should I extend here for view?       
    initComponent: function () {
        //my complete sudoku js file here
        console.log("hello");
    }
});
4

2 に答える 2

8

私があなたのアプリについて知っているすべてのことから、私はほとんど何も言うことができません。いくつかのリスナーとアクションを含む非常に具体的なビューがあり、コントローラーを気にする必要はありません。

コントローラはcontainerasビューを作成し、他のネストされたパネルについてあまり気にすることなく、いくつかの設定オプションをコントローラに渡すことができます。containerコントローラは、ゲームを終了したりゲームを保存したりするボタンのように、このイベントをリッスンすることもできます。

MVCは、すべてのイベントとロジックをコントローラーに中継することを意味するものではありません。

これがあなたの意見ではかなり複雑であるとしても、それはまだ単なる見解です。

于 2013-02-08T12:45:14.780 に答える
6

まず、MVC を実装する前に、特に最近のバージョンで MVC サポートが追加された Ext JS で、MVC がどのように機能するかをよく理解しておく必要があります。

一般的な意味で言えば (あなたのコードを本当に知っているのはあなただけなので)、コードを次のように分けます。

  • モデル: データ値の 9x9 マトリックス (または 3x3 マトリックスの 3x3 マトリックス)、パズルが解けたかどうか、またはユーザー入力にエラーがあるかどうか (ボックスに 2 つの 6 があるなど) を判断する検証方法。サポートを取り消します。

  • View : 上記のコンテナ。コントローラーは、コンテナーが値をどのように表示するかを認識できません。cellchanged(container, x, y, newValue, oldValue)やのような自分の数独固有のイベントを送ると思いますundo(container)。

  • Controller : ビュー内の数独固有のイベントをリッスンし、それに応じてモデルを更新します。更新ごとにモデルを検証して、パズルが解けたかどうか、または特定のセルが正しくないかどうかを確認します。すべてのビュー イベントのリレーとして機能するべきではありません。数独コントローラーに関連するイベントrenderと関連しないイベント。resize本当に必要なものだけを聞いてください。

于 2013-02-08T15:10:30.097 に答える