Js设计模式在这个项目中，我们用 JavaScript 展示软件设计模式。图像是由 StarUML 从 staruml

地址

用JavaScript实现的软件设计模式

在这个项目中，我们用 JavaScript 展示软件设计模式。

图像是由 StarUML 从 staruml-design-patterns 项目中的 js.class文件生成的。.

欢迎大家对此进行改进，并用各种编程语言提供实现。

服务对象

技术开发人员。推荐有Javascript和设计模式基础.

外部资源和灵感:

内容

Creational Patterns(创建型模式)

Abstract Factory(抽象工厂)

var AbstractFactory = Class({
    create: function(factory) {
    },
    createProductA: function(){
    },
    createProductB: function(){
    }
});

var ConcreteFactory1 = AbstractFactory.extend({
    create: function(){
        facade.log("ConcreteFactory1 class created");
    },
    createProductA: function(){        
        facade.log("ProductA1 created by ConcreteFactory1");
        return new ProductA1()
    },
    createProductB: function(){
        facade.log("ProductB1 created by ConcreteFactory1");
        return new ProductB1()
    }
});

var ConcreteFactory2 = AbstractFactory.extend({
    create: function(){
        facade.log("ConcreteFactory2 class created");
    },
    createProductA: function(){
        facade.log("ProductA2 created by ConcreteFactory2");
        return new ProductA2()
    },
    createProductB: function(){
        facade.log("ProductB2 created by ConcreteFactory2");
        return new ProductB2()
    }
});

var AbstractProductA = Class({
    create: function() {
    }
});

var AbstractProductB = Class({
    create: function() {
    }
});


var ProductA1 = AbstractProductA.extend({
    create: function() {
        facade.log("ProductA1 class created");
    }
});

var ProductA2 = AbstractProductA.extend({
    create: function() {
        facade.log("ProductA2 class created");
    }
});

var ProductB1 = AbstractProductB.extend({
    create: function() {
        facade.log("ProductB1 class created");
    }
});

var ProductB2 = AbstractProductB.extend({
    create: function() {
        facade.log("ProductB2 class created");
    }
});

function init_AbstractFactory() {
    var factory1 = new ConcreteFactory1()
    var productB1 = factory1.createProductB()
    
    var factory2 = new ConcreteFactory2()
    var productA2 = factory2.createProductA()
}

Builder(建造者)

var Director = Class({
    create: function() {
        this.structure = ['Maze','Wall','Door'];
        facade.log("Director class created");
    },
    Construct: function(){
        for(var all in this.structure){
            builder = new ConcreteBuilder();
            builder.BuildPart(this.structure[all]);
            builder.GetResult()
        }
    }
});

var Builder = Class({
    create: function() {
    },
    BuildPart: function(){
    }
});

var ConcreteBuilder = Builder.extend({
    create: function() {
        facade.log("ConcreteBuilder1 class created");
    },
    BuildPart: function(rawmaterial){
        facade.log("ConcreteBuilder BuildPart()");
        material = rawmaterial
        this.product = new Product(material)
    },
    GetResult: function(){
        facade.log(JSON.stringify(this.product))
        return this.product
    }
});

var Product = new Class({
    create: function(material){
        this.data = material
        facade.log("Product class created");
    }
});

function init_Builder() {
    director = new Director()
    director.Construct()
}

Factory Method(工厂方法)

var Product = Class({
    create: function() {
    }
});

var ConcreteProduct = Product.extend({
    create: function() {
        facade.log('ConcreteProduct created')
    }
});

var Creator = Class({
    create: function() {
    },
    FactoryMethod: function(){

    },
    AnOperation: function(){
        facade.log("AnOperation()")
        this.product = this.FactoryMethod()
        facade.log(this.product instanceof ConcreteProduct)
    }
});

var ConcreteCreator = Creator.extend({
    create: function() {
        facade.log('ConcreteCreator created')
    },
    FactoryMethod: function(){
        return new ConcreteProduct();
    }
});

function init_FactoryMethod() {
    var factory = new ConcreteCreator()
    factory.AnOperation()
}

Prototype(原型)

var Prototype = Class({
    create: function(prototype) {
    },
    Clone: function(){
    }
});

var ConcretePrototype1 = Prototype.extend({
    create: function() {
        this.feature = "feature 1"
        facade.log("ConcretePrototype1 created");
    },

    setFeature(key, val) {
        this[key] = val
    },

    Clone: function(){
        facade.log('custom cloning function')
        clone = new ConcretePrototype1()
        keys = Object.keys(this)

        for(var k in keys) {
            clone.setFeature(keys[k], this[keys[k]])
        }

        facade.log("ConcretePrototype1 cloned");
        return clone;
    }
});

var ConcretePrototype2 = Prototype.extend({
    create: function() {
        facade.log("ConcretePrototype2 created");
    },
    Clone: function(){
        facade.log("ConcretePrototype2 cloned");
        return this;
    }
});

function init_Prototype () {
    var proto1 = new ConcretePrototype1()
    proto1.setFeature('feature', "feature 22")
    var clone1 = proto1.Clone()
    facade.log(clone1.feature)
}

Singleton(单例)

var Singleton = Class({
    singleton: true,
    create: function(data){
        this.data = data
        facade.log("Singleton class created");
    },
    SingletonOperation: function() {
        facade.log('SingletonOperation')
    },
    get:{
        GetSingletonData: function(){
            return this.data
        }
    }
});

function init_Singleton() {
    var singleton1 = Singleton.instance("data1")
    var singleton2 = Singleton.instance("data2")
    facade.log(singleton1.GetSingletonData)
    facade.log(singleton2.GetSingletonData)
    facade.log(singleton1 instanceof Singleton)
    facade.log(singleton2 instanceof Singleton)
    facade.log(singleton1 === singleton2)
}

Structural Patterns(结构型模式)

Adapter(适配器)

var Target = Class({
    create: function() {
    },
    Request: function(){
    }
});


var Adaptee = Class({
    create: function() {
        facade.log('Adaptee created')
    },
    SpecificRequest: function(){
        facade.log('Adaptee request')
    }
});

var Adapter = Class({
    create: function() {
        facade.log('Adapter created')
    }
}).mixin(Target, Adaptee);

Adapter.prototype.Request = function(){
        this.SpecificRequest();
    }

function init_Adapter() {
    var f = new Adapter()
    f.Request()
}

Bridge(桥接)

var Abstraction = Class({
    create: function() {
    },
    Operation: function(){
        this.imp.OperationImp();
    }
});

var RefinedAbstraction = Abstraction.extend({
    create: function() {
        facade.log('RefinedAbstraction created')
    },
    setImp (imp) {
        this.imp = imp
    }
});

var Implementor = Class({
    create: function() {
    },
    OperationImp: function(){
    }
});

var ConcreteImplementorA = Implementor.extend({
    create: function() {
        facade.log('ConcreteImplementorA created')
    },
    OperationImp: function(){
        facade.log('ConcreteImplementorA OperationImp')
    }
});

var ConcreteImplementorB = Implementor.extend({
    create: function() {
        facade.log('ConcreteImplementorB created')
    },
    OperationImp: function(){
        facade.log('ConcreteImplementorB OperationImp')
    }
});

function init_Bridge() {
    var abstraction = new RefinedAbstraction()
    var state = Math.floor(Math.random()*2)
    if(state)
        abstraction.setImp(new ConcreteImplementorA())
    else
        abstraction.setImp(new ConcreteImplementorB())

    abstraction.Operation()
}

Composite(组合)

var Component = Class({
    create: function() {
    },
    Operation: function(){
    },
    Add: function(Component){
    },
    Remove: function(Component){
    },
    GetChild: function(key){
    }
});

var Leaf = Component.extend({
    create: function(name) {
        this.name = name
        facade.log('Leaf created')
    },
    Operation: function(){
        facade.log(this.name)
    }
});

var Composite = Component.extend({
    create: function(name) {
        this.name = name
        this.children = []
        facade.log('Composite created')
    },
    Operation: function(){
        facade.log('Composite Operation for: ' + this.name)
        for(var i in this.children)
            this.children[i].Operation()
    },
    Add: function(Component){
        this.children.push(Component)
    },
    Remove: function(Component){
        for(var i in this.children)
            if(this.children[i] === Component)
                this.children.splice(i, 1)
    },
    GetChild: function(key){
        return this.children[key]
    }
});


function init_Composite() {
    var composite1 = new Composite('C1')
    composite1.Add(new Leaf('L1'))
    composite1.Add(new Leaf('L2'))
    var composite2 = new Composite('C2')
    composite2.Add(composite1)
    composite1.GetChild(1).Operation()
    composite2.Operation()
}

Decorator(装饰器)

var Component = Class({
    create: function() {
    },
    Operation: function(){
    }
});

var ConcreteComponent = Component.extend({
    create: function() {
        facade.log('ConcreteComponent created')
    },
    Operation: function(){
        facade.log('o o')
    }
});

var Decorator = Component.extend({
    create: function(component) {
        this.component = component
        facade.log('Decorator created')
    },
    Operation: function(){
        this.component.Operation()
    }
});

var ConcreteDecoratorA = Decorator.extend({
    create: function(component, sign){
        this.component = component
        //Decorator.prototype.create.apply(this, component)
        this.addedState = sign
        facade.log('ConcreteDecoratorA created')
    },
    Operation: function(){
        Decorator.prototype.Operation.apply(this)
        facade.log(this.addedState)
    }
});

var ConcreteDecoratorB = Decorator.extend({
    create: function(component, sign) {
        this.component = component
        //Decorator.prototype.create.apply(this, component)
        this.addedState = sign
        facade.log('ConcreteDecoratorA created')
    },
    Operation: function(){
        Decorator.prototype.Operation.apply(this)
        facade.log(this.addedState + this.addedState + this.addedState + this.addedState + this.addedState)
    },
    AddedBehavior: function (){
        this.Operation()
        facade.log('|........|')
    }
});

function init_Decorator() {
    var component = new ConcreteComponent()
    var decoratorA = new ConcreteDecoratorA(component, '!!!')
    var decoratorB = new ConcreteDecoratorB(component, '.')
    facade.log('component: ')
    component.Operation()
    facade.log('decoratorA: ')
    decoratorA.Operation()
    facade.log('decoratorB: ')
    decoratorB.AddedBehavior()
}

Facade(外观)

require(['Model/loretek/design_patterns/behavioral/visitor/Visitor.js']);
require(['Model/loretek/design_patterns/behavioral/memento/Memento.js'])
require(['Model/loretek/design_patterns/behavioral/state/State.js'])
require(['Model/loretek/design_patterns/behavioral/strategy/Strategy.js'])
require(['Model/loretek/design_patterns/behavioral/template_method/TemplateMethod.js'])
require(['Model/loretek/design_patterns/behavioral/chain_of_responsibility/ChainofResponsibility.js']);
require(['Model/loretek/design_patterns/creational/builder/Builder.js']);
require(['Model/loretek/design_patterns/creational/prototype/Prototype.js']);
require(['Model/loretek/design_patterns/creational/singleton/Singleton.js']);
require(['Model/loretek/design_patterns/structural/proxy/Proxy.js']);
require(['Model/loretek/design_patterns/structural/decorator/Decorator.js']);
require(['Model/loretek/design_patterns/structural/composite/Composite.js']);
require(['Model/loretek/design_patterns/structural/flyweight/Flyweight.js']);

var Facade = Class({
    create: function() {
        this.log("Facade class created");
        this.htmlid = null;
    },
    log: function(text){
        if(typeof this.htmlid === null){
            console.log(text);
        }
        else{
            $('#'+this.htmlid).append(text+'</br>');
        }
    },
    erase: function(){
        $("#"+this.htmlid).html('');
    },
    test_dp: function(dp){
        switch(dp){
            case "Facade":
                this.htmlid = "test_Facade"
                this.erase()
                this.log("This is the Facade")
                break
            case "AbstractFactory": 
                this.htmlid = "test_AbstractFactory"
                this.erase()
                init_AbstractFactory()
                break
            case "Builder":
                this.htmlid = "test_Builder"
                this.erase()
                init_Builder()
                break;
            case "Factory":
                this.htmlid = "test_Factory"
                this.erase()
                init_FactoryMethod()
                break
            case "Prototype":
                this.htmlid = "test_Prototype"
                this.erase()
                init_Prototype()
                break
            case "Singleton":
                this.htmlid = "test_Singleton"
                this.erase()
                init_Singleton()
                break
            case "Adapter":
                this.htmlid = "test_Adapter"
                this.erase()
                init_Adapter()
                break
            case "Bridge":
                this.htmlid = "test_Bridge"
                this.erase()
                init_Bridge()
                break
            case "Composite":
                this.htmlid = "test_Composite"
                this.erase()
                init_Composite()
                break
            case "Decorator":
                this.htmlid = "test_Decorator"
                this.erase()
                init_Decorator()
                break
            case "Flyweight":
                this.htmlid = "test_Flyweight"
                this.erase()
                init_Flyweight()
                break
            case "Proxy":
                this.htmlid = "test_Proxy"
                this.erase()
                init_Proxy()
                break
            case "ChainofResponsibility":
                this.htmlid = "test_ChainofResponsibility"
                this.erase()
                init_ChainofResponsibility()
                break
            case "Command":
                this.htmlid = "test_Command"
                this.erase()
                init_Command()
                break
            case "Interpreter":
                this.htmlid = "test_Interpreter"
                this.erase()
                init_Interpreter()
                break
            case "Iterator":
                this.htmlid = "test_Iterator"
                this.erase()
                init_Iterator()
                break
            case "Mediator":
                this.htmlid = "test_Mediator"
                this.erase()
                init_Mediator()
                break
            case "Memento":
                this.htmlid = "test_Memento"
                this.erase()
                init_Memento()
                break
            case "Observer":
                this.htmlid = "test_Observer"
                this.erase()
                init_Observer()
                break
            case "State":
                this.htmlid = "test_State"
                this.erase()
                init_State()
                break
            case "Strategy":
                this.htmlid = "test_Strategy"
                this.erase()
                init_Strategy()
                break
            case "TemplateMethod":
                this.htmlid = "test_TemplateMethod"
                this.erase()
                init_TemplateMethod()
                break
            case "Visitor":
                this.htmlid = "test_Visitor";
                this.erase();
                init_Visitor()
                break;
            default:
                console.log("nothing to test");
        }
    }
});

Flyweight(享元)

var FlyweightFactory = Class({
    create: function(){
        this.flyweights = [];
        facade.log('FlyweightFactory created')
    },
    GetFlyweight: function(key){
        if(this.flyweights[key]){
            return this.flyweights[key];
        }
        else{
            this.flyweights[key] = new ConcreteFlyweight(key);
            return this.flyweights[key];
        }
    },
    CreateGibberish: function (keys) {
        return new UnsharedConcreteFlyweight(keys, this)
    }
});

var Flyweight = Class({
    create: function() {
    },
    Operation: function(extrinsicState){
    }
});


var ConcreteFlyweight = Flyweight.extend({
    create: function(key){
        this.intrinsicState = key
        facade.log('ConcreteFlyweight created')
    },
    Operation: function(extrinsicState){
        return extrinsicState + this.intrinsicState
    }
});

var UnsharedConcreteFlyweight = Flyweight.extend({
    create: function(keys, flyweights){
        this.flyweights = flyweights
        this.keys = keys
        facade.log('UnsharedConcreteFlyweight created')
    },
    Operation: function(extrinsicState){
        var key, word = ''

        for(var i = 0; i < extrinsicState; i++) {
            //random key
            key = this.keys[Math.floor(Math.random() * (this.keys.length))]
            word = this.flyweights.GetFlyweight(key).Operation(word)
        }
        facade.log('UnsharedConcreteFlyweight Operation: ')
        facade.log(word)
    }
});

function init_Flyweight() {
    var flyweights = new FlyweightFactory()
    var gibberish = flyweights.CreateGibberish(['-', '+', '*'])
    gibberish.Operation(5)
    gibberish.Operation(10)
}

Proxy(代理)

var Subject = Class({
    create: function() {
    },
    Request: function(){
    }
});

var RealSubject = Subject.extend({
    create: function() {
        facade.log('RealSubject created')
    },
    Request: function(){
        facade.log('RealSubject handles request')
    }
});

var Proxy = Subject.extend({
    create: function() {
        facade.log('Proxy created')
    },
    Request: function(){
        this.realSubject = new RealSubject();
        this.realSubject.Request();
    }
});

function init_Proxy() {
    var proxy = new Proxy()
    proxy.Request()
}

Behavioral Patterns(行为模式)

Chain of Responsibility(职责链)

var Handler = Class({
    create: function() {
    },
    HandleRequest: function(){
    }
});

var ConcreteHandler1 = Handler.extend({
    create: function() {
        facade.log('ConcreteHandler1 created')
    },
    setSuccessor: function (successor) {
        this.successor = successor
    },
    HandleRequest: function(request){
        if (request === 'run')
            facade.log('ConcreteHandler1 has handled the request')
        else {
            facade.log('ConcreteHandler1 calls his successor')
            this.successor.HandleRequest(request)
        }
    }
});

var ConcreteHandler2 = Handler.extend({
    create: function() {
        facade.log('ConcreteHandler2 created')
    },
    HandleRequest: function(){
        facade.log('ConcreteHandler2 has handled the request')
    }
});

function init_ChainofResponsibility() {
    handle1 = new ConcreteHandler1()
    handle2 = new ConcreteHandler2()
    handle1.setSuccessor(handle2)
    handle1.HandleRequest('run')
    handle1.HandleRequest('stay')

}

Command(命令)

var Invoker = Class({
    create: function() {
        facade.log('Invoker created')
    },
    StoreCommand: function(command) {
        this.command = command
    }
});

var Command = Class({
    create: function() {
    },
    Execute: function(){
    }
});

var ConcreteCommand = Command.extend({
    create: function(receiver) {
        this.receiver = receiver
        facade.log('ConcreteCommand created')
    },
    Execute: function(){
        facade.log('ConcreteCommand Execute')
        this.receiver.Action();
    }
});

var Receiver = Class({
    create: function() {
        facade.log('Receiver created')
    },
    Action: function(){
        facade.log('Receiver Action')
    }
});

function init_Command() {
    var invoker = new Invoker()
    var receiver = new Receiver()
    var command = new ConcreteCommand(receiver)
    invoker.StoreCommand(command)
    invoker.command.Execute()
}

Interpreter(解释器)

var Context = Class({
    create: function() {
        this.created = true;
    }
});

var AbstractExpression = Class({
    create: function() {
        this.created = true;
    },
    Interpret: function(Context){
    }
});

var TerminalExpression = AbstractExpression.extend({
	Interpret: function(Context){
    }
});

var NonterminalExpression = AbstractExpression.extend({
	Interpret: function(Context){
    }
});

function init_Interpreter() {
    facade.log('Not implemented')
}

Iterator(迭代器)

var Iterator = Class({
    create: function() {
    },
    First: function(){
    },
    Next: function(){
    },
    IsDone: function(){
    },
    CurrentItem: function(){
    }
});

var ConcreteIterator = Iterator.extend({
    create: function(aggregate) {
        facade.log('ConcreteIterator created')
        this.index = 0
        this.aggregate = aggregate
    },
    First: function(){
        return this.aggregate.list[0]
    },
    Next: function(){
        this.index += 2
        return this.aggregate.list[this.index]
    },
    CurrentItem: function(){
        return this.aggregate.list[this.index]
    }
});

var Aggregate = Class({
    create: function() {
    },
    CreateIterator: function(){
    }
});

var ConcreteAggregate = Aggregate.extend({
    create: function(list) {
        this.list = list
        facade.log('ConcreteAggregate created')
    },
	CreateIterator: function(){
		this.iterator = new ConcreteIterator(this);
    }
});

function init_Iterator() {
    var aggregate = new ConcreteAggregate([0,1,2,3,4,5,6,7])
    aggregate.CreateIterator()
    facade.log(aggregate.iterator.First())
    facade.log(aggregate.iterator.Next())
    facade.log(aggregate.iterator.CurrentItem())
}

Mediator(中介者)

var Mediator = Class({
    create: function() {
    },
    ColleagueChanged: function(colleague) {
    }
});

var ConcreteMediator = Mediator.extend({
    create: function() {
        facade.log('ConcreteMediator created')
        this.colleague1 = new ConcreteColleague1(this)
        this.colleague2 = new ConcreteColleague2(this)
    },
    ColleagueChanged: function(colleague) {
        switch(colleague) {
            case this.colleague1:
                facade.log('ConcreteColleague1 has Changed -> change ConcreteColleague2.feature: ')
                this.colleague2.setFeature('new feature 2')
                break
            case this.colleague2:
                facade.log('ConcreteColleague2 has Changed, but do nothing')
                break
            default:
                facade.log('Do nothing')
        }
    }
});

var Colleague = Class({
    create: function() {
    },
    Changed: function() {
        this.mediator.ColleagueChanged(this)
    }
});

var ConcreteColleague1 = Colleague.extend({
    create: function(mediator) {
        facade.log('ConcreteColleague1 created')
        this.mediator = mediator
        this.feature = "feature 1"
    },
    setFeature: function(feature) {
        facade.log('ConcreteColleague1 Feature has changed from ' + this.feature + ' to ' + feature)
        this.feature = feature
        this.Changed()
    }
});
var ConcreteColleague2 = Colleague.extend({
    create: function(mediator) {
        facade.log('ConcreteColleague2 created')
        this.mediator = mediator
        this.feature = "feature 2"
    },
    setFeature: function(feature) {
        facade.log('ConcreteColleague2 Feature has changed from ' + this.feature + ' to ' + feature)
        this.feature = feature
        this.Changed()
    }
});

function init_Mediator() {
    var mediator = new ConcreteMediator()
    mediator.colleague1.setFeature("new feature 1")
}

Memento(备忘录)

var Originator = Class({
    create: function() {
        facade.log('Originator created')
        this.state = 'a';
        facade.log('State= ' + this.state)
    },
    SetMemento: function(Memento){
        this.state = Memento.GetState()
        facade.log('State= ' + this.state)
    },
    CreateMemento: function(state){
        return new Memento(state);
    }
});

var Memento = Class({
    create: function(state) {
        this.state = state
        facade.log('Memento created. State= ' + this.state)
    },
    GetState: function(){
        return this.state;
    },
    SetState: function(state){
        this.state = state;
    }
});

var Caretaker = Class({
    create: function() {
        facade.log('Caretaker created')
        this.mementos = []
    },
    AddMemento: function(memento) {
        facade.log('Caretaker AddMemento')
        this.mementos.push(memento)
    },
    GetMemento: function() {
        return this.mementos[this.mementos.length-1]
    }
});

function init_Memento() {
    caretaker = new Caretaker()
    originator = new Originator()
    caretaker.AddMemento(originator.CreateMemento('b'))
    originator.SetMemento(caretaker.GetMemento())
}

Observer(观察者)

var Subject = Class({
    create: function() {
    },
    Attach: function(Observer){
        this.observers.push(Observer);
        facade.log('Observer attached')
    },
    Dettach: function(Observer){
        for(var i in this.observers)
            if(this.observers[i] === Observer)
                this.observers.splice(i, 1)
    },
    Notify: function(){
        facade.log('Subject Notify')
        for(var i in this.observers){
            this.observers[i].Update(this);
        }
    }
});

var ConcreteSubject = Subject.extend({
    create: function(){
        this.subjectState = null
        this.observers = []
        facade.log('ConcreteSubject created')
    },
    GetState: function(){
        return this.subjectState;
    },
    SetState: function(state){
        this.subjectState = state;
        this.Notify()
    }
});

var Observer = Class({
    create: function(){
    },
    Update: function(){
    }
});

var ConcreteObserver = Observer.extend({
    create: function(){
        this.observerState = '';
        facade.log('ConcreteObserver created')
    },
    Update: function(Subject){
        this.observerState = Subject.GetState();
        facade.log('Observer new state: ' + this.observerState)
    }
});

function init_Observer() {
    var observer1 = new ConcreteObserver()
    var observer2 = new ConcreteObserver()
    var subject = new ConcreteSubject()
    subject.Attach(observer1)
    subject.Attach(observer2)
    subject.SetState('state 1')
}

State(状态)

var Contextt = Class({
    create: function(state){
        switch(state) {
            case "A":
                this.state = new ConcreteStateA()
                break
            case "B":
                this.state = new ConcreteStateB()
                break
            default:
                this.state = new ConcreteStateA()
        }
    },
    Request: function(){
        this.state.Handle(this);
    }
});

var State = Class({
    create: function(){
    },
    Handle: function(){
    }
});

var ConcreteStateA = State.extend({
    create: function(){
        facade.log('ConcreteStateA created')
    },
    Handle: function(){
        facade.log('ConcreteStateA handle')
    }
});

var ConcreteStateB = State.extend({
    create: function(){
        facade.log('ConcreteStateB created')
    },
    Handle: function(){
        facade.log('ConcreteStateB handle')
    }
});

function init_State() {
    context = new Contextt("A")
    context.Request()
}

Strategy(策略)

var Contexttt = Class({
    create: function(type){
        switch(type) {
            case "A":
                this.strategy = new ConcreteStrategyA()
                break
            case "B":
                this.strategy = new ConcreteStrategyB()
                break
            default:
                this.strategy = new ConcreteStrategyA()
        }
    },
    ContextInterface: function(){
        this.strategy.AlgorithmInterface()
    }
});

var Strategy = Class({
    create: function(){
    },
    AlgorithmInterface: function(){
    }
});

var ConcreteStrategyA = Class({
    create: function(){
        facade.log('ConcreteStrategyA created')
    },
    AlgorithmInterface: function(){
        facade.log('ConcreteStrategyA algorithm')
    }
});

var ConcreteStrategyB = Class({
    create: function(){
        facade.log('ConcreteStrategyB created')
    },
    AlgorithmInterface: function(){
        facade.log('ConcreteStrategyB algorithm')
    }
});

function init_Strategy() {
    contextA = new Contexttt("A")
    contextA.ContextInterface()
    contextB = new Contexttt("B")
    contextB.ContextInterface()
}

Template Method(模板)

var AbstractClass = Class({
    create: function(){
    },
    TemplateMethod: function(){
        this.PrimitiveOperation1();
        this.PrimitiveOperation2();
    },
    PrimitiveOperation1: function(){
    },
    PrimitiveOperation2: function(){
    }  
});

var ConcreteClass = AbstractClass.extend({
    create: function(){
        facade.log("ConcreteClass created")
    },
    PrimitiveOperation1: function(){
        facade.log('ConcreteClass PrimitiveOperation1')
    },
    PrimitiveOperation2: function(){
        facade.log('ConcreteClass PrimitiveOperation2')
    }  
});

function init_TemplateMethod() {
    class1 = new ConcreteClass()
    class1.TemplateMethod()
}

Visitor(访问者)

var Visitor = Class({
    create: function(){
    },
    VisitConcreteElementA: function(ConcreteElementA){
    },
    VisitConcreteElementB: function(ConcreteElementB){
    }  
});

var ConcreteVisitor1 = Visitor.extend({
    create: function(){
        facade.log("ConcreteVisitor1 created");
    },
    VisitConcreteElementA: function(ConcreteElementA){
        facade.log("ConcreteVisitor1 visited ConcreteElementA");
    },
    VisitConcreteElementB: function(ConcreteElementB){
        facade.log("ConcreteVisitor1 visited ConcreteElementB");
    }  
});

var ConcreteVisitor2 = Visitor.extend({
    create: function(){
        facade.log("ConcreteVisitor2 created");
    },
    VisitConcreteElementA: function(ConcreteElementA){
        facade.log("ConcreteVisitor2 visited ConcreteElementA");
    },
    VisitConcreteElementB: function(ConcreteElementB){
        facade.log("ConcreteVisitor2 visited ConcreteElementB");
    }  
});

var ObjectStructure = Class({
    create: function(){
        facade.log("ObjectStructure created");
    }
});

var Element = Class({
    create: function(){
    },
    Accept: function(visitor){
    }
});

var ConcreteElementA = Element.extend({
    create: function() {
        facade.log("ConcreteElementA created");
    },
    Accept: function(visitor){
        visitor.VisitConcreteElementA(this);
    },
    OperationA: function(){
        facade.log("ConcreteElementA OperationA");  
    }
});

var ConcreteElementB = Element.extend({
    create: function() {
        facade.log("ConcreteElementB created");
    },
    Accept: function(visitor){
        visitor.VisitConcreteElementB(this);
    },
    OperationB: function(){
        facade.log("ConcreteElementB OperationB");  
    }
});

function init_Visitor() {
    visitor1 = new ConcreteVisitor1();
    visitor2 = new ConcreteVisitor2();
    elementA = new ConcreteElementA();
    elementB = new ConcreteElementB();
    elementA.Accept(visitor1);
    elementB.Accept(visitor2);
}

View on GitHub

This work is licensed under MIT.

Js-design-patterns is maintained by ShaofeiZi