Javascript: 对象内的函数不工作

Question

我正在尝试在 Javascript 中创建一个控制器，它将响应按钮点击并相应地更改视图。

我有一个函数看起来像这样：

document.getElementById("reset").onclick = function () { 
    //do something

   };

但是，当我尝试将函数放入控制器对象时，出现 "unexpected token" 错误：

var controller = {
  this.reset = document.getElementById("reset").onclick = function () { 
    //do something

   };
}

我不确定两件事：

如何解决这个错误？（我知道这是由于范围，但不知道如何以仍然遵循 MVC 模式的方式修复它）
一般来说，这是创建控制器对象的好方法吗？（我是 MVC 模型的新手，不知道我是否遵循了最佳实践。）

谢谢。

Answer 1

这不是一个有效的 Javascript 对象结构，但如果它适合您，您可以按照下面的方式进行

var controller = {
  reset : function () { 
    document.getElementById("reset").onclick = function(){
       //do your work here
     }
   }
}

逻辑完全取决于 you/developer he/she 想要如何处理事情。

或者你可以在外面做绑定，比如，

var controller = {
      reset : function () { 
         //what to do to rsest
       }
    }

然后，绑定到别处

//when to run reset method
document.getElementById("reset").onclick = controller.reset;

Answer 2

错误是因为不能这样声明对象，有不同的方法可以做到：

var obj1 = { 
    a : function() { 
        console.log('obj1'); 
    } 
};

var obj2 = function() { 
    var b = function() { 
        console.log('obj2');
    };

    return { 
        a: b
    }
};

var obj3 = function() {
    this.a = function() { 
        console.log('obj3'); 
     } 
};

然后使用它。

obj1.a; //prints obj1
obj2().a; //prints obj2
new obj3().a; //prints obj3.

关于如何构造你的对象是基于意见的，但我喜欢这样做。

var Controller = function() {
    this.attachEvents = function() {
        document.getElementById("reset").onclick = reset;
    }

    var reset = function() {
        console.log('reset');
    };
}
new Controller().attachEvents();

另一种选择是..

var Controller = function() {
    this.reset = function() {
        console.log('reset');
    };
}
var controller = new Controller();
document.getElementById("reset").onclick = controller.reset;

Javascript: 对象内的函数不工作

Javascript: Function inside object not working

javascript

model-view-controller

controller

function

object