如何松散地耦合页面上的 javascript 和模态/jQuery UI 对话框中的 javascript？答案

【问题标题】：How do I loosely couple javascript on a page and javascript in a modal/jQuery UI Dialog?如何松散地耦合页面上的 javascript 和模态/jQuery UI 对话框中的 javascript？
【发布时间】：2011-01-27 12:52:53
【问题描述】：

我有用户点击“添加人员”按钮的页面。这会弹出一个通过 ajax 加载并使用 jQuery UI 对话框显示的模式。弹出窗口包含一个搜索表单，用户可以在其中选择要添加的人。当他们点击“确定”时，我希望页面上的 javascript 检索所选人员的 ID 并将其显示在显示模式的页面上。

这一切都很好，我可以让它工作，但它总是很丑陋，我最终在我的模态视图或我的页面视图中编写代码，这需要了解另一个中的 DOM。例如，模态可以知道在调用页面上有一个div#new-person，它可以把新人放在那里。但这需要模态框了解基本页面。

或者我可以将 javascript 函数从我的应用程序代码传递给模态，但这需要模态知道该函数并显式调用它。 jQuery UI 对话框提供了在基本页面上指定onclick 创建按钮的能力，但我的模式比这更复杂（我不希望在选择一个人之前显示这些按钮）所以我不能使用它们。

【问题讨论】：

标签： javascript jquery model-view-controller loose-coupling

【解决方案1】：

我有一个回调类，我在 Js 类之间传递事件

var Callbacks = {};
Callbacks.triggers = {};

Callbacks.addCallback = function( trigger, instance, method ){

    if( this.triggers[ trigger ] == undefined ){
        this.triggers[ trigger ] = Array( { obj:instance, action:method } );
    }else{
        this.triggers[ trigger ].push( { obj:instance, action:method } );
    };
};

Callbacks.fireCallback = function( trigger, param ){

    if( this.triggers[ trigger ] == undefined ){
        return;
    };

    for (var i=0; i < this.triggers[ trigger ].length; i++) {
        var listener = this.triggers[ trigger ][ i ];

        if( listener.action != undefined ){
            listener.obj[ listener.action ]( param );
        }
    };

};

用法

/// some class to listen to a callback

function ListenClass(){

  this.build = function(){
    Callbacks.addCallback( 'myCallback', this, 'triggerMethod' );
  }

    this.triggerMethod = function( params ){
      alert( params );
    }

    this.build();

}

/// some class firing a callback
 function TriggerClass(){

  this.fire = function(){
  alert( 'fired' );
  Callbacks.fireCallback( 'myCallback', { value:'hey there this is a callback'} );
  }


}

【讨论】：