Question

嘿，我是javascript的新手，我正在尝试创建一个简单的mvc应用程序。

这是我的 model.js ：

     function Question(question,hint,answer){

        this.question = question;
        this.hint = hint;
        this.answer = answer;
    }

这是我的 view.js ：

    function view(modelList){
    this.modelList = modelList;

    }

view.prototype.show = function(){
   var length  = this.modelList.length;
   for(var i=0;i<length;i++){
         alert(this.modelList[i].question);
         console.log(this.modelList[i].question);
   }
};

这是我的 controller.js ：

    function controller(modelList){
      this.view = new view(modelList);
    }


controller.prototype.show = function(){
     this.view.show();
};

这是我的 index.html ：

<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="app.js"></script>
  <script src="controller.js"></script>
  <script src="model.js"></script>
  <script src="view.js"></script>
</head>

<body>
</body>


</html>

当我在浏览器上运行index.html时，我收到如下错误：

jQuery.Deferred异常：未定义模型ReferenceError：未定义模型在HTMLDocument。（文件：/// d：/Javascript/MVC/app.js：3：23）在j（https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:29948） at k（https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js:2:30262）undefined

和

> Uncaught ReferenceError: model is not defined
    at HTMLDocument.<anonymous> (app.js:3)
    at j (jquery.min.js:2)
    at k (jquery.min.js:2)

任何人都可以告诉我我哪里错了吗？

THANKYOU

修改：

这是我的 app.js ：

    $(function(){

     var model1 = new model("question","hint","answer");
     var model2 = new model("question2","hint2","answer2");

     var modelList = {model1,model2};

     var controller = new controller(modelList);
     controller.show();


});

Answer 1

以下是修正版：https://jsfiddle.net/weeuedub/1/

添加了jQuery作为依赖项（您不需要在自己的应用程序中执行此操作）。
将您的Controller课程重命名为var controller = new controller(...);。

问题在于这一行：

modelList

因为你使用的是变量名“controller”，所以它会覆盖上面声明的“controller”函数。

作为惯例，尝试以大写字母开头命名您的类。

更新：https://jsfiddle.net/weeuedub/2/

您将{ model1, model2 }指定为length，这不是您可以通过获取{ model1: model1, model2: model2 }来迭代的数组。它是一个与[ model1, model2 ]相同的对象。这是ES6语法尚未被浏览器广泛支持，我认为这只是你的错字。修复方法是将其更改为$query_builder = TRUE;以获取数组。

Answer 2

您的model.js定义了Question function

您应该将其更改为

function model(question,hint,answer){}

或将实例化更改为Question。

var model1 = new Question("question","hint","answer");
var model2 = new Question("question2","hint2","answer2");

尝试实现mvc时javascript引用错误

2 个答案: