JavaScript design mode (4)

Bridging mode

When designing a Js API, you can use it to weaken the coupling between it and the classes and objects that use it.

1. callback function for event listener

function Getbeerbyid(ID,Callback{    asyncrequest(' GET ', ' beer.uri?id= ' +Id, function(RES){        Callback(resp.ResponseText)})}function Getbeerbyidbridge(e){   //Bridging element: callback function for event listener    //Avoid coupling this.id to function Getbeerbyid    Getbeerbyid( This.ID, function(beer){        Console.Log(' requested Beer: ' +Beer})}addevent(element, ' click ',Getbeerbyidbridge);

2. Bridging function: Privileged functions

var=function{    var=3;    this.privilegedGetter=function{        return secret    }}// usagevar=new Public;var=o.privilegedGetter()

3. Connecting multiple classes with bridging mode

varClass1= function(A,B,C{     This.a =A;     This.b =B;     This.C =C;}varClass2= function(d){     This.D =D;}varBridgeclass= function(A,B,C,D{     This. One = New Class1(A,B,C;     This. Both = New Class2(d)}

4. Build the XHR connection queue

//Get XHR object functionvarAsyncrequest=(function(){    function handlereadystate(O,Callback{      //actually can also use xhr.onreadystatechange to achieve without setinterval to monitor XHR readyState        varPoll= window.setinterval(function(){            if(O&& o.readyState == 4){                window.clearinterval(poll);                if(callback){                    Callback(o)}            }        },  -);    }    varGetxhr= function(){        varhttp;        Try {http= NewXMLHttpRequest;Getxhr= function(){           //Memoizing            return NewXMLHttpRequest;            }        }Catch(e){            varMsxml=[' Msxml2.xmlhttp ',            ' msxml2.xmlhttp.3.0 ',            ' Microsoft.XMLHTTP '];             for(varI=0,Len= MSXML.length;I<Len;I++){                Try {http= New ActiveXObject(Msxml[i]);Getxhr= function(){                        return New ActiveXObject(Msxml[i]);                    };                     Break                }Catch(e){                    Continue;                }            }        }        returnhttp;    };    return function(method,Url,Callback,PostData){        varhttp= GETXHR();        http.Open(method,Url, true);        handlereadystate(http,Callback;        http.Send(PostData|| NULL);        returnhttp;    }})()Function.prototype.Method = function(Name,fn{     This.prototype[Name]=Fn;    return  This}//Implementation QueueDED.Queue = function(){     This.Queue =[];     This.RetryCount = 3;     This.Currentretry = 0;     This.paused = false;     This.Timeout =  the;     This.Conn = {};     This.Timer = {};}DED.Queue.Method(' Flush ', function(){    if(! This.Queue.length > 0){   //When queue Length equals 0 o'clock enter if        return;    }    if( This.paused){         This.paused = false;        return    }    varThat=  This;     This.Currentretry++;    //If the request is repeated within the specified number of times, the current request is ended otherwise    varAbort= function(){         that.Conn.Abort();  //To terminate the request, the ReadyState property will be set to 0        if( that.Currentretry ==  that.RetryCount){            //That.onFailure.fire ();            Console.Log(' failure: ' +  that.Queue[0].URL) that.Currentretry = 0;        } Else {             that.Flush();        }    }    varCallback= function(o){        Document.getElementById(' Feed-readers ').InnerText = o.Response        Console.Log(o)//Stop Timeout handler        window.cleartimeout( that.Timer);         that.Currentretry = 0;        //Reject the request item that the current request is successful         that.Queue.Shift();        //That.onFlush.fire (o.responsetext);        if( that.Queue.length == 0){            //That.onComplete.fire ();            return;        }        //Continue a new request         that.Flush()}     This.Conn = asyncrequest( This.Queue[0][' method '],         This.Queue[0][' URL '],Callback,         This.Queue[0][' params ']    ) This.Timer = window.SetTimeout(Abort,  This.Timeout);}).Method(' Setretrycount ', function(count){     This.RetryCount =Count;}).Method(' SetTimeout ', function(time){     This.Timeout =Time;}).Method(' Add ', function(o){     This.Queue.Push(o);}).Method(' Pause ', function(){     This.paused = true;}).Method(' dequeue ', function(){     This.Queue.Pop()}).Method(' Clear ', function(){     This.Queue =[]})//UsagevarQ= New DED.Queue;Q.Setretrycount(3);Q.SetTimeout( +);Q.Add({    Method: ' GET ',    ' URL ': ' https://www.baidu.com ',});Q.Add({    Method: ' GET ',    ' URL ': ' https://www.baidu.com?xiaoming ',});Q.Flush()//In real use, the bridge function can be used when adding events;//You can also provide an action dispatch function that bridges the input information contained in the user operation and delegates it to the appropriate processing code. 

5. Advantages and disadvantages of bridging mode

• Philip
  • Isolating abstractions from their implementations helps to manage parts of the software independently
  • Bug more easy to find
  • Facilitates the modularity of the code and increases the flexibility of abstraction
  • Can be used to connect a set of classes and functions, and provides a means to access private data with privileged functions
• Disadvantages:
  • Increases the number of function calls and has some negative effects on performance
  • Increased complexity of the system
  • No abuse

Attention

Reprint, quote, but please indicate the author and original address

JavaScript design mode (4)