你如何在 Javascript 中从 MVC 实现模型答案

【问题标题】：How do you implement Model from MVC in Javascript你如何在 Javascript 中从 MVC 实现模型
【发布时间】：2016-01-01 17:23:00
【问题描述】：

这可能是一个简单而愚蠢的问题，但我在这里不知所措。我们的教授要求我们创建一个使用 MVC 的游戏（在我的例子中是 Sudoku）。视图和控制器可以作为一个 js 文件使用（因为我们已经弄湿了），模型必须在一个单独的 js 文件中。我能够使视图正常工作，但是当我尝试在模型中使用某些东西时……嗯，这就是我不知道如何调用模型文件（数组或包含要输入的值的 81 个元素）数独网格）。任何帮助、阅读或视频将不胜感激。谢谢。

【问题讨论】：

使用 angularJs 进行 MVC 的双向绑定

标签： javascript model-view-controller model

【解决方案1】：

在 Angular 应用程序中，视图是文档对象模型 (DOM)，控制器是 JavaScript 类，模型数据存储在在对象属性中。

AngularJs Learning

【讨论】：

【解决方案2】：

这是我在 Javascript 中的 MVC 下所理解的。这可能是错误的。

function Model() {
    this.state=0;
    this.observers=[]
    this.addObserver = function(observer) {
        
        // i, the model, have no idea what this observer is.
        this.observers.push(observer);
    }
    this.notifyObservers = function() {
        for (i = 0; i < this.observers.length; i++) {
            
            // i, the model, have no idea what this does in the observer.
            this.observers[i].modelChanged();
        }
    } 
    this.doSomethingWithInternalState = function(observer){
        this.state+=1
        
        // i, the model will notify observers when my state changes.
        // They can decide on their own what to do then.
        this.notifyObservers();
    }
}

// That would be views (or mini-models or read-only controllers, whatever).
function Observer() {
    this.init = function(model) {
        this.model=model;
    };
    this.modelChanged = function(){
        alert('bazinga');
    };
}

function SudokuBoard(){
    this.boardsize=0;
    this.modelChanged = function() {
        if (this.model.state < 10) {
            this.boardsize=this.model.state*20;
            alert(this.boardsize);
        }
    };
}
SudokuBoard.prototype=new Observer;

function MessageWindow(){
    this.modelChanged = function(){
        alert('Sudoku is cool');
    };
}
MessageWindow.prototype=new Observer;

function AnotherGuiElem(){
    this.bazinga=true;
}
AnotherGuiElem.prototype=new Observer;

// that would be a controller.
document.onclick=function(){
    m.doSomethingWithInternalState();
    a.bazinga=true;
};

// we have a model, views and one controller, now lets connect everything.
var m = new Model;
var b = new SudokuBoard();b.init(m);
var w = new MessageWindow();w.init(m);
var a = new AnotherGuiElem();a.init(m);
m.addObserver(b);
m.addObserver(w);
m.addObserver(a);

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <script src="test.js"></script>
    </body>
</html>

【讨论】：