10

我使用 Javascript 创建了一个小型数独应用程序。现在我正在尝试将该 javascript 代码转换为 extjs ( 4.1.1a ) 代码。我已经阅读了文档以了解MVC 架构，但对我来说似乎并不那么详细，因为我是初学者。

有人可以根据我的数独应用程序解释 Extjs 的 MVC 架构吗？

我的数独应用程序代码的设计如下：

在此处输入图像描述

上述设计说明如下：

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

  • “父面板”有九个，每个“父面板”有九个“子面板”。

  • “父面板”和“子面板”的 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']
});

查看 （'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 的工作原理有一个很好的了解，尤其是在最近的版本中添加了 MVC 支持的 Ext JS 中。

从一般意义上说（因为你是唯一真正知道你的代码的人），我会这样分开代码：

  • 模型：数据值的 9x9 矩阵（或 3x3 矩阵的 3x3 矩阵），一种确定谜题是否已解决或用户输入中是否有任何错误的验证方法（例如，一个框中的两个 6），并且可能撤消支持。

  • 查看：您的容器在上面。控制器应该不知道容器如何显示值。我可能会发送我自己的数独特定事件，例如cellchanged(container, x, y, newValue, oldValue)and undo(container)。

  • 控制器：监听视图中的数独特定事件并相应地更新模型。每次更新后，验证模型以查看谜题是否已解决或某些单元格是否不正确。不应充当所有视图事件的中继。与数独控制器类似render且不resize相关的事件。只听你真正需要的。

于 2013-02-08T15:10:30.097 回答