fbeline / design-patterns-js Goto Github PK

Good morning, everyone.

I have been make example about GoF design patterns with typescript for free(also no-license)
and I hope to migrate codes and explanation in this repository to my repository.

please allow migration of this repository.

https://github.com/ENvironmentSet/Design-Patterns-TS

here is the repository that I use.
I'm going to write codes in here as typescript, but If you don't want it. I will cancel my project :)

I wanted to learn these pattern, but not coming from anther language where those pattern are more common, it's really hard for me knowing when and how to use those with really basic examples.

Do you know of any more "real-world" examples of the patterns?

Is it plan that support translate?

In observer pattern you have this code

    unregister(observer) {
        this.actions.remove.filter(function(el) {
            return el !== observer;
        });
    }

this.actions refer to an array. Yet arrays dont have a function called remove?

https://github.com/fbeline/Design-Patterns-JS/blob/master/src/creational/factory/factory_es6.js

current:

class BmwFactory {

    create(type) {
        if (type === 'X5')
            return new Bmw(type, 108000, 300);
        if (type === 'X6')
            return new Bmw(type, 111000, 320);
    }
}

class Bmw {
    constructor(model, price, maxSpeed) {
        this.model = model;
        this.price = price;
        this.maxSpeed = maxSpeed;
    }
}

export default BmwFactory;

proposed:

class BmwFactory {

    static create(type) {
        if (type === 'X5')
            return new Bmw(type, 108000, 300);
        if (type === 'X6')
            return new Bmw(type, 111000, 320);
    }
}

class Bmw {
    constructor(model, price, maxSpeed) {
        this.model = model;
        this.price = price;
        this.maxSpeed = maxSpeed;
    }
}

export default BmwFactory;

the only difference is the static before the create method

With how the visitor pattern is currently represented here I honestly don't see the benefits of this pattern used properly. Basically it doesn't offer anything over this:

function visit(e, callback) {
  if (e instanceof Operation) {
    return callback(e)
  }
  throw new TypeError('not an Operation')
}

The current version would work in languages with static typing since you can have multiple overloads of the identically named visit methods, but in javascript this is not possible.

So what I'd recommend instead is this:

class Operation {
  accept(visitor) {
    throw new Error('You should really implement this')
  }
}

class Sum extends Operation {
  accept(visitor) {
    return visitor.visitSum(this)
  } 
}

class Min extends Operation {
  accept(visitor) {
    return visitor.visitMin(this)
  } 
}

// ...

This way in your visitor you can properly distinguish (and in a way are forced to) all the subclasses.

Now a more javascript-idiomatic way (in my opinion at least) would be to have something like this:

class Operation { /*...*/ }
class Sum extends Operation { /*...*/ }
class Min extends Operation { /*...*/ }
class Num extends Operation { /*...*/ }

const createVisitor = (config = {}) => (input, ...args) => {
  const method = input instanceof Operation
    ? config[input.constructor.name] || config.Any || (() => { })
    : config.Unknown || (() => { })
  return method.call(config, input, ...args)
}

const visitor = createVisitor({
  Sum(sum) {
    return "It's a Sum"
  },
  Min(min) {
    return "It's a Min"
  },
  Any(op) {
    return "I don't care what it is, but it's an Operation"
  },
  Unknown(alien) {
    throw new Error("I don't know what it is")
  }
})

expect(visitor(new Sum())).toBe("It's a Sum")
expect(visitor(new Min())).toBe("It's a Min")
expect(visitor(new Num())).toBe("I don't care what it is, but it's an Operation")
expect(visitor(new Operation())).toBe("I don't care what it is, but it's an Operation")
expect(() => visitor(null)).toThrowError("I don't know what it is")

This is very far from the traditional visitor pattern, but achieves the same thing.