08. Facade mode of JavaScript design mode -- Facade

08. Facade mode of JavaScript design mode ---- Facade

The facade mode describes the object structure mode. External communication with a sub-system must be performed through a facade object of a system. This is the facade mode. The facade mode is also called the appearance mode and the front mode. This mode is often used in the system and is also a relatively simple mode.

Role Division

The facade mode has the following two roles:

1. Facade role

The client can call this role method to understand the functions and responsibilities of the relevant (one or more) sub-systems. This role delegates all requests sent from the client to the corresponding subsystem.

2. subsystem roles

You can have one or more subsystems at the same time. Every subsystem is not a separate class, but a collection of classes. Each subsystem can be called directly by the client or by the facade role. The subsystem does not know the existence of the facade. For the subsystem, the facade is just another client.

The following is an example of the so-called facade model.

Facade mode ---- Example 1

The facade model is actually a very simple design model. In plain words, you are the boss of a company, and I am your customer, now I want your company to develop a software for me.
The software work is done by your employees. I cannot directly ask your employees to complete the work. I must first tell you that you should send the code to the commander and arrange the employees to complete the work, finally, let me know. In this process, I am
An external role, your employees are subsystems, and you are a facade.

Now we will design this proposition:

// Define an employee interface. Assume that each employee has to go through four stages in a software development process: design, code, test, and submit var istaff = new interface ("istaff ", ["design", "coding", "test", "Submit"]); // a boss interface is defined here, assuming that each boss needs to do four things: schedule Tasks, supervise tasks, accept products, and sell var iboss = new interface ("iboss", ["Assign", "manage", "checkproduct", "sellproduct"]); // create employee class var Staff = function () {}; implements (staff, istaff); // implement several Abstract METHODS: staff. prototype. design = function () {alert ("design completed") ;}; staff. prototype. coding = function () {alert ("encoding completed") ;}; staff. prototype. test = function () {alert ("test completed") ;}; staff. prototype. submit = function () {alert ("submitted") ;}; // create the boss class var boss = function () {}; implements (Boss, iboss ); // implement several Abstract METHODS: Boss. prototype. assign = function () {alert ("task schedule completed") ;}; boss. prototype. manage = function () {for (VAR I = 0; I <10; I ++) {// assume that this product requires 10 people to complete var Staff = new staff (); staff. design (); staff. coding (); staff. test (); staff. submit () ;}alert ("Product Development completed") ;}; boss. prototype. checkproduct = function () {alert ("Product accepted") ;}; boss. prototype. sellproduct = function () {alert ("product sold ");};

At this point, our facade design is actually over. The last step is to reflect the usage of the out-of-door mode:

VaR boss = new boss (); // I need the product and inform the boss of your boss. assign (); // schedule the job boss. manage (); // supervisor boss. checkproduct (); // product acceptance boss. sellproduct (); // product sold

In this simple design, the example of the facade mode is completed, which is very simple.

Facade mode ---- Example 2

Another example of a very classic facade mode is the event classes installed in many JavaScript libraries. The basic structure is as follows:

JsLib.event.Event = {    getEvent: function(e) { },    getTarget: function(e) { },    stopPropagation: function(e) { },    preventDefault: function(e) { },    stopEvent: function(e) { }};

The useful methods for analyzing the above Code are stoppropagation and preventdefault. However, the parameters they need must be compatible with various browsers.
The problem is that the names of the two methods are too long to remember. Therefore, with the stopevent method, we decided to solve the browser compatibility problem within the method and encapsulate the two methods that are hard to remember.
Method:

Jslib. event. event = {getevent: function (e) {return window. event | E;}, gettarget: function (e) {Return e. srcelement | e.tar get;}, stoppropagation: function (e) {If (E. stoppropagation) {// not ie E. stoppropagation ();} else {// ie E. cancelbubble = true ;}}, preventdefault: function (e) {If (E. preventdefault) {// not ie E. preventdefault ();} else {// ie E. returnvalue = false ;}}, stopevent: function (e) {var EVT = This. getevent (E); // format the event object to process browser compatibility Step 1. This. stoppropagation (E); // prevents bubbling this. preventdefault (E); // block default behavior }};

Okay, the design is here. For JavaScript programmers, it is very easy to process bubbles and default behaviors. For example, if you do not want to submit a form, we can add a listener like this:

Addevent (formelement, "Submit", function (e) {// you only need to call a method to implement jslib. event. event. stopevent (E); alert ("Even so, have you clicked the submit button? But the form is not submitted! ");});

Now, we will introduce the facade mode here.

There must be some improper descriptions. Please forgive me. Thanks