tcorral / design-patterns-in-javascript Goto Github PK

View Code? Open in Web Editor NEW

2.6K 136.0 528.0 1.3 MB

Design Patterns applied to Javascript code.

Home Page: http://tcorral.github.com/Design-Patterns-in-Javascript/

JavaScript 69.10% HTML 30.22% CSS 0.68%

design-patterns-in-javascript's Introduction

Design Patterns in Javascript ES6

This will be a repository of how to use the Design Patterns from Gang of Four in your applications with Javascript.

Update:

Added Flyweight implementation.
Added Bridge implementation.
Added Prototype and Builder implementations.
All the Design Patterns have been refactored to ES6.
Added the Multi-Inheritance Design Patterns exclusive for ES6.
Added new Design Patterns exclusive from Javascript.
Added changes to index.html. Now you can check the code to be executed and the execution without open the console. Thanks -adamnbowen-

Design Patterns that you can find in this repository:

Adapter
Builder
Bridge
Chaining
Command
Composite
Composite Iterator
Compound (Use some design patterns together to solve a problem)
Decorator
Facade
Factory
Iterator
Lazy
Module
Module Revealed
Multi-Inheritance ES6
MVC
Namespace
Nullify
Observer
Prototype
Proxy
Singleton
State
Strategy
Template
Try-Finally

This repository contains a folder by each design pattern.

Inside these folders you can found, in some of them, other folders with numbers . This folders are the different steps to follow to arrive to the final resolution of the problem. You will understand it better if you have one copy of the book I recomend you before.

To transpile the code to ES5 you should execute `gulp`

Do you want to collaborate?

All constructive comments are welcome. I promise I will answer everyone.

Agreements

Head First Design Patterns

Pro Javascript Design Patterns __

design-patterns-in-javascript's People

Contributors

Stargazers

Watchers

Forkers

acostajohn bjoern-sellnau edinunzio arnabc hrcorrado umaar realpeterz carlosvillu rwaldron leobalter vixlima arthuralmeidap criso aslam adamnbowen v42 jeffpatzer hpathan vromano tomasdev gijs aronayne aoj lebr1 funkotron netconstructor gformich pjvds juanmaguitar haiyun-document blorenz iamsingularity txemanu tremolina lifeinafolder jiguixin serginator skdream lucasmezencio zj831007 madhums designtestcode zumot nicksp gabrieli codexlabs cayasso khanhle paris1985 arjunrao2709 rafaelfpviana supersha villavicencio rmccaffrey particle4dev bily davidcunha pr0da mrunalruikar cnluoxh hihihippp iarnaud vijayb24 luiscoimbra 007slm rawc0der nla-asia jonscottdev acrive82 noamkfir karthilxg jfcentenaro essejose wangdongwu linda-ilonze agonbina dwoodard hectorito20 jeffery9 bugknightyyp pranderson xtornasol512 ganksolo fiimolim001 sirithink unbug nangal xiaole-s arizawan rilonggithub nmardones gabrielmoral asalem sdtm1016 mehrdadbahrainy wu-wu hedint myushchenko avatarxy brucexiejunling

design-patterns-in-javascript's Issues

Hungarian notation

The examples encourage the use of hungarian notation, like this.sDescription, this.oLight or this.aActors. I don't like it.

Just sayin'.

Displaying code in index.html files

If you had a minimal amount of css in your .html files, you could display the code present when people open it (so they can see the code while they play with the console:

script {
    display: block;
    white-space: pre;
}

Misspelling in Download.getDownloadedFailedState method (State Pattern)

There is a method in Download.js (State/1/Download.js) that is defined "getDownloadedFailedState" but called "getDownloadFailedState" in rest of the States.

Note the difference in the "ed"!
getDownloadedFailedState
getDownloadFailedState

strategy\4\duck.js

A minor observation. In strategy\4\Duck.js. The setFlyBehavior() and set QuackBehavior() aren't called anywhere and also don't do what their names suggest. They can probably just be removed as you set the behaviours directly but I can see how such methods could be useful when the classes become more complex

Fabulous work by the way this is helping me take my js learning to the next level thanks.

State pattern State ''abstract'' function is not used?

Hi,
First I want to thank you for sharing this. I'm new to javascript and it's being hard to figure out how to implement all those patterns I learn to use in classsical languages to javascript. Your repo iy's being really useful :D
Just aquestion about the State pattern. Its implementation is pretty much standard, but I can't see what makes the different concrete state functions inherit form the State "abstract" one. Can you explain how it's done or how to do it?

Thanks again!!
Cheers!

Some compile errors while use `gulp`

such as:

[15:37:23] Requiring external module babel-register
ReferenceError: primordials is not defined
    at fs.js:36:5
    at req_ (/Users/abm/Documents/personal/personal-note-v2/Design-Patterns-in-Javascript/node_modules/natives/index.js:143:24)
    at Object.req [as require] (/Users/abm/Documents/personal/personal-note-v2/Design-Patterns-in-Javascript/node_modules/natives/index.js:55:10)
    at Object.<anonymous> (/Users/abm/Documents/personal/personal-note-v2/Design-Patterns-in-Javascript/node_modules/vinyl-fs/node_modules/graceful-fs/fs.js:1:37)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Object.require.extensions.<computed> [as .js] (/Users/abm/Documents/personal/personal-note-v2/Design-Patterns-in-Javascript/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)

Running Gulp throws Requiring external module babel-registererror

Did '''npm install'''
Tried running '''gulp '''

Got the following error

[21:03:57] Requiring external module babel-register
assert.js:341
    throw err;
    ^

AssertionError [ERR_ASSERTION]: Task function must be specified
    at Gulp.set [as _setTask] (E:\opensource\Design-Patterns-in-Javascript\node_modules\undertaker\lib\set-task.js:10:3)
    at Gulp.task (E:\opensource\Design-Patterns-in-Javascript\node_modules\undertaker\lib\task.js:13:8)
    at Object.<anonymous> (E:/opensource/Design-Patterns-in-Javascript/gulpfile.babel.js:47:6)
    at Module._compile (internal/modules/cjs/loader.js:816:30)
    at loader (E:\opensource\Design-Patterns-in-Javascript\node_modules\babel-register\lib\node.js:144:5)
    at Object.require.extensions.(anonymous function) [as .js] (E:\opensource\Design-Patterns-in-Javascript\node_modules\babel-register\lib\node.js:154:7)
    at Module.load (internal/modules/cjs/loader.js:685:32)
    at Function.Module._load (internal/modules/cjs/loader.js:620:12)
    at Module.require (internal/modules/cjs/loader.js:723:19)
    at require (internal/modules/cjs/helpers.js:14:16)

E:\opensource\Design-Patterns-in-Javascript>gulp
[21:06:21] Requiring external module babel-register
node:assert:399
    throw err;
    ^

AssertionError [ERR_ASSERTION] [ERR_ASSERTION]: Task function must be specified
    at Gulp.set [as _setTask] (E:\opensource\Design-Patterns-in-Javascript\node_modules\undertaker\lib\set-task.js:10:3)
    at Gulp.task (E:\opensource\Design-Patterns-in-Javascript\node_modules\undertaker\lib\task.js:13:8)
    at Object.<anonymous> (E:/opensource/Design-Patterns-in-Javascript/gulpfile.babel.js:47:6)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at loader (E:\opensource\Design-Patterns-in-Javascript\node_modules\babel-register\lib\node.js:144:5)
    at Object.require.extensions.<computed> [as .js] (E:\opensource\Design-Patterns-in-Javascript\node_modules\babel-register\lib\node.js:154:7)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18) {
  generatedMessage: false,
  code: 'ERR_ASSERTION',
  actual: false,
  expected: true,
  operator: '=='
}```