javascript - 基于插件的 GUI 中的模型- View -演示者生命周期管理

Question

当 GUI 由多个子组件组成时，我将这些子组件视为具有自己的演示器和模型的单独 View ，是否有将它们粘合在一起的模式？一些子组件会持续显示在屏幕上，而其他子组件则会被换入换出。

1. 对于在运行时添加到 GUI 的子组件实例化各自的 MVP 三元组，什么是好的工厂模式？
2. 如何将子组件与 GUI 的持久“容器”部分以及彼此之间粘合在一起？会不会有一个将其他主播联系在一起的“主播”？

更新:我现在正在寻找类似于 Eclipse 扩展机制的东西。插件将其自身注册到全局注册表以获取它们提供的功能。当需要返回数据或渲染 View 等功能时，会查询注册表并调用返回的函数(这是纯 JavaScript，因此我不使用接口(interface))。我将采用纯插件方法，其中所有内容(甚至主视图)都是插件。我还可能使用事件总线来让各个 Presenter 进行不可知的通信。

现在我更具体的问题是，当插件要提供 View 时，我应该如何初始化 MVP 三元组并将 View 渲染到父容器(模块外部)中。我可能需要让 View 将自身渲染到从外部传递的容器中，并将 View 和模型(如果需要)注入(inject)演示器中。另一种方法是 View 返回一个可以放置在容器内的组件，但这违背了我将 GUI 框架特定的所有内容保留在 View 实现内的初步理想。我更喜欢工厂/粘合机制是否可以与框架无关。

好吧，我现在停止提示并等待一些反馈，然后也许会添加更多关于我到底陷入困境的澄清......

Answer 1

我认为您所关注的设计模式是中介。

我编写了一个由中介器组成的 JavaScript 框架。

它的工作原理如下:

• 您创建了一个全局实例 调解人，
• 在下面注册对象 某些名字，
• 在实现中使用中介器来调用方法 来自任何内的注册对象 对象。

如果某些内容不存在，则不会出现任何错误。 如果有多个实例 - 它们都会收到调用。

这是基本代码: (我的代码摘录。稍后我将制作一个包含该内容的 jquery 插件。如果您愿意使用它，请插入我做得更快；))

function Mediator(){

    function log(a){
    try {console.log(a);} catch(e){
        try {opera.postError(a);} catch(e){
            //alert(a);
            }
        }
    }

    var __reg={}; // { "what": [object, ...], ... }     //registers an object
    //what=key that will identify, obj=an object
    this._register = function(what,obj){
        if(__reg[what]===undefined){        
            __reg[what]=[];     
            }
        __reg[what].push(obj);      
        }   //unregisters multiple objects and deletes a key
    this._unregisterAll = function(what){
        if(__reg[what]===undefined){log('Overlord:_unregisterAll - no registers'); return false; }
        __reg[what]=null;
        return true;
        }
    //unregisters a single element key
    this._unregister = function(what){
        if(this._countRegisters()==1){
                __reg[what]=null;
                return true;
            } else { log('Overlord:_unregister - no registers'); return false; }
        }
    //unregisters last added element
    this._unregisterLast = function(what){
        var cnt=this._countRegisters(what);
        if(cnt==0) { log('Overlord:_unregisterLast - no registers'); return false; }
        if(cnt==1) {
                __reg[what]=null;
                return true;
            } else {
                __reg[what][cnt-1]=null;
                return true;
            }
        }

    //returns number of registered items
    this._countRegisters = function(what){
        try{
            return __reg[what].length;
            } catch(e){log(e);
            return 0;
            }
        }   //calls a method from all objects registered under 'what' with an array of parameters. returns true if there was at least one successful call
    this._call = function(what,method,params){
        var occured=false;
        for(var i in __reg[what]) {
            try {
                __reg[what][i][method](params);
                occured=true;
                } catch(e) {log(e);//auto reakcja           
                }
            }
        return occured;
        }
    //does the call, but also returns an array of values retuurned by function
    this._returnAll = function(what,method,params){
        var re=[];
        for(var i in __reg[what]){
            try {
                re.push(__reg[what][i][method](params));
                } catch(e) {log(e);//auto reakcja           
                }           
            }
        return re;
        }

    //runs a method from first object for a given key   
    this._returnFirst = function(what,method,params){
        try {
            return __reg[what][0][method](params);
            } catch(e) {log(e);//auto reakcja
            return null;
            }
        }

    }