Question

假设我有2个控制器来处理页面的2个部分 - 标题和页面内容。大多数操作都发生在pagecontent.js（页面内容的控制器）中。它具有一组用于加载各种视图的功能。但标题有后退按钮。我跟踪历史记录，当单击后退按钮时，我想调用pagecontent.js上的相应函数来加载特定视图。以下是我正在尝试做的例子：

pagecontent.js

$.Controller('Controller.Pagecontent', {
  ...
  ".home click": function(){
      this.loadHome();
  },
  loadHome: function(){
      $('#pagecontent').html('//views/home', {});
  }
  ...
})

header.js

$.Controller('Controller.Header', {
  ...
  ".back click": function(){
      if( HISTORY[0] == 'home' )
          // call loadHome() from pagecontent.js
  }
  ...
})

我不想将所有这些函数复制到header.js，因为它将是冗余的，而且某些函数具有复杂的逻辑。

有什么想法吗？

感谢。

Answer 1

javascript中的任何已定义对象都可以从浏览器页面中的任何javascript代码访问。

如果在同一页面中加载两个.js文件，但在不同的部分中，一个中的对象可以在另一个中访问，因此可以在window对象中定义。

file1.js

var a = 13;
var b = 14;

file2.js

alert("a="+a);

function show_b() {
    alert("b="+b);
}

如果在file1.js之后加载file2.js，将显示带有'a = 13'的警报。只要在加载两个文件之前调用show_b()，就会显示“b = 14”的那个。

为避免干扰，您可以使用windows.a和windows.b代替a和b。

同样的例子适用于函数定义。

Answer 2

有很多方法可以共享代码，但JavaScriptMVC中的惯用方法如下：

".back click": function(){
  if( HISTORY[0] == 'home' )
     $('#pageContent').controller().loadHome();
}

其中#pageContent是您首先用于创建控制器的选择器。

更好的方法是使用自定义事件。如果pageContent是header的父级，则可以使用jQuery.trigger：

// PageContent

"home.clicked": function() {
   this.loadHome();
}

// Header

".back click": function() {
  this.element.trigger('home.clicked');
}

或者您可以使用OpenAjax事件：

// PageContent

"home.clicked subscribe": function() {
   this.loadHome();
}

// Header

".back click": function() {
  OpenAjax.hub.publish('home.clicked');
}

Answer 3

如果每页的js代码不同，如果它更少，则使用内联js或在单独的文件中添加这些代码行并将其包含在布局中（假设你有不同的布局，以便相同的js文件不是到处都装满了）

Answer 4

您可以使用原型访问其他控制器功能/事件。例如。在这种情况下，它会是这样的：

$.Controller('Controller.Header', {
  ...
  ".back click": function(){
      if( HISTORY[0] == 'home' )
         Controller.Pagecontent.prototype.loadHome();
  }
  ...
})

如何访问不同控制器的功能？ - JavaScript MVC

4 个答案: