Become an OOP Pro
Design patterns
OOP ?
Paradigms
Paradigms
- OOP
- Functional
- Event Driven
- Declarative
- ...
https://sipios.facebook.com/search/str/paradigm/keywords_search
Design Patterns
Intrinsic rules of OOP
Design patterns
Creational Patterns
Structural Patterns
Behavioral Patterns
Factory
Builder
Decorator
Proxy
Command
Iterator
Adapter
Facade
Visitor
Observer
Strategy
Design patterns are intrinsic pattern of OOP
- Michael
The Decorator
Component
DecoratorA
DecoratorB
InputStream is = new LineNumberInputStream(
new BufferedInputStream(
new FileInputStream(
"my_awesome_file.secret"
)
)
)
Let's build our own!
Scenario
- Crud API
- Retry
- Cache
@Inject()
class PokemonClient extends CrudClient {
constructor(private http: HttpClient) {
this.url = "https://pokeapi.co/api/v2/pokemon/";
}
//Defined in parent class
get(id: string): Promise<Data> {
return this.http.get(uri + id);
}
//Defined in parent class
save(data: Data): Promise<Data> {
return this.http.post(uri, pokemon);
}
//Defined in parent class
update(data: Data): Promise<Data> {
return this.http.put(uri, pokemon);
}
//Defined in parent class
delete(id: string): Promise<Data> {
return this.http.delete(uri + id);
}
}
class RetryClient extends CrudClient {
private client: CrudClient;
constructor(client: CrudClient) {
this.client = client;
}
get(id: string): Promise<Data> {
const deferred = Promise.defer();
super.get(id).catch(() => {
return super.get(id);
}).then((data) => {
deferred.resolve(data);
}).catch((err)) => {
deferred.reject(err):
}):
return deferred.promise;
}
}
class CachedClient extends CrudClient {
private client: CrudClient;
private cache: [key: string]: Data;
constructor(client: CrudClient) {
this.client = client;
}
get(id: string): Promise<Data> {
if(cache[id]) {
return Promise.resolve(cache[id]);
} else {
return super.get(id).then((data) => {
this.cache[id] = data;
return data;
})
}
}
}
class PokemonComponent {
private client: CrudClient;
constructor(pokemonClient: PokemonClient) {
this.client = new CachedClient(pokemonClient);
}
//....
}
class PokemonRealTimeComponent {
private client: CrudClient;
constructor(pokemonClient: PokemonClient) {
this.client = new RetryClient(pokemonClient);
}
//....
}
The End
PS: You should dig into the @
Design pattern
By Michael Mollard
Design pattern
Introduction to design pattern
- 711