Skip to main content

Command Pattern_JavaScript Design Patterns 7

Free2015-07-24#JS#Design_Pattern#JavaScript命令模式

Classic command pattern implementation requires requester, command, and executor, appearing quite large, mainly due to inconvenience caused by mandatory type checking (must rely on abstract types to ensure interface uniformity), while JS is weakly typed, making command pattern easy to implement. This article details the command pattern implemented in JavaScript

1. Command Pattern

Command pattern encapsulates method call details to decouple requester and executor

(Quoted from Ayue: Design Pattern - Command Pattern)

This is the core of the command pattern. Insert a command layer between the caller and executor. The previous caller becomes the requester, not directly calling the executor, but sending command requests to the system; at this point, the system becomes the caller, responsible for scheduling commands (sending directly to the executor, or adding control, sending only when certain conditions are met); the executor remains the executor, just decoupled from the previous caller

2. Classic Implementation

For Java implementation, please see Ayue: Design Pattern - Command Pattern

The example given in the article is very appropriate, no need to elaborate

3. JavaScript Implementation of Command Pattern

JavaScript implementation is actually a simplified version, with relatively weaker functionality, but quite simple to implement. Example code is as follows:

var module = {
    // Command (unified entry)
    exec: function(cmd) {
        /**
         * Array.prototype.slice.call(arguments, 1) is a small trick
         * Used to convert arguments object to array and cut off the first parameter (here is cmd's value)
         */
        return this[cmd] && this[cmd].apply(this, Array.prototype.slice.call(arguments, 1));
    },
    // Public interface 1
    sum: function(a, b) {
        return a + b;
    }
    // Public interface 2...
}
var sum = module.exec('sum', 1, 2);
console.log(sum);   // 3

This implementation is quite concise (our command pattern is only one line of code). There's no need to simulate the extra abstractions used in classic implementation to constrain types

4. Command Pattern and Facade Pattern

Thinking carefully, isn't this the same as the facade pattern? Both encapsulate existing interfaces. Indeed very similar, the only difference is that command pattern focuses on providing a unified entry point (adding control), while facade pattern is to make interfaces easier to use by re-encapsulating existing interfaces (doesn't necessarily have to unify into one entry point, can completely provide a set of new interfaces)

It can be understood this way: if the interface provided by facade has only one, at this point it becomes the command pattern. The number of new interfaces provided after encapsulating existing interfaces is the key to distinguishing the two. Command pattern can only have one (exec in the example), facade pattern has no restrictions, as long as the new interfaces are easier to use than the original ones

References

  • "JavaScript Design Patterns"

Comments

No comments yet. Be the first to share your thoughts.

Leave a comment