+
+
+
+
+
+
diff --git a/Flyweight/scripts/Forest.js b/Flyweight/scripts/Forest.js
new file mode 100644
index 0000000..448a2be
--- /dev/null
+++ b/Flyweight/scripts/Forest.js
@@ -0,0 +1,24 @@
+import TreeFactory from './TreeFactory';
+import Tree from './Tree';
+
+const privateTrees = new WeakMap();
+class Forest {
+ constructor() {
+ privateTrees.set(this, []);
+ }
+ get trees() {
+ return privateTrees.get(this);
+ }
+ plantTree(x, y, name, color, treeConfig) {
+ const type = TreeFactory.getTreeType(name, color, treeConfig);
+ const tree = new Tree(x, y, type);
+ this.trees.push(tree);
+ }
+ render(canvas) {
+ this.trees.forEach((tree) => {
+ tree.render(canvas);
+ });
+ }
+}
+
+export default Forest;
\ No newline at end of file
diff --git a/Flyweight/scripts/Tree.js b/Flyweight/scripts/Tree.js
new file mode 100644
index 0000000..8f0d1a4
--- /dev/null
+++ b/Flyweight/scripts/Tree.js
@@ -0,0 +1,26 @@
+const privateX = new WeakMap();
+const privateY = new WeakMap();
+const privateTreeType = new WeakMap();
+
+class Tree {
+ constructor(x = 0, y = 0, treeType) {
+ privateX.set(this, x);
+ privateY.set(this, y);
+ privateTreeType.set(this, treeType);
+ }
+ get x() {
+ return privateX.get(this);
+ }
+ get y() {
+ return privateY.get(this);
+ }
+ get treeType() {
+ return privateTreeType.get(this);
+ }
+ render(canvas) {
+ const context = canvas.getContext("2d");
+ this.treeType.render(context, this.x, this.y);
+ }
+}
+
+export default Tree;
\ No newline at end of file
diff --git a/Flyweight/scripts/TreeFactory.js b/Flyweight/scripts/TreeFactory.js
new file mode 100644
index 0000000..cee33d0
--- /dev/null
+++ b/Flyweight/scripts/TreeFactory.js
@@ -0,0 +1,15 @@
+import TreeType from './TreeType';
+
+const treeTypesMap = new Map();
+class TreeFactory {
+ static getTreeType(name, color, treeConfig) {
+ let result = treeTypesMap.get(name);
+ if(result == null) {
+ result = new TreeType(name, color, treeConfig);
+ treeTypesMap.set(name, result);
+ }
+ return result;
+ }
+}
+
+export default TreeFactory;
\ No newline at end of file
diff --git a/Flyweight/scripts/TreeType.js b/Flyweight/scripts/TreeType.js
new file mode 100644
index 0000000..c01a2d6
--- /dev/null
+++ b/Flyweight/scripts/TreeType.js
@@ -0,0 +1,26 @@
+const privateName = new WeakMap();
+const privateColor = new WeakMap();
+const privateTreeConfig = new WeakMap();
+
+class TreeType {
+ constructor(name, color, treeConfig) {
+ privateName.set(this, name);
+ privateColor.set(this, color);
+ privateTreeConfig.set(this, treeConfig);
+ }
+ get name() {
+ return privateName.set(this);
+ }
+ get color() {
+ return privateColor.set(this);
+ }
+ get treeConfig() {
+ return privateTreeConfig.set(this);
+ }
+ render(context, x, y) {
+ context.fillStyle = "black";
+ context.fillRect(x - 1, y, 3, 5);
+ }
+}
+
+export default TreeType;
\ No newline at end of file
diff --git a/Flyweight/scripts/main.js b/Flyweight/scripts/main.js
new file mode 100644
index 0000000..b5da4c2
--- /dev/null
+++ b/Flyweight/scripts/main.js
@@ -0,0 +1,29 @@
+import Forest from './Forest';
+
+const CANVAS_SIZE = 600;
+const TREES_TO_DRAW = 99900;
+const TREE_TYPES = 2;
+const forest = new Forest();
+
+const getAmountOfTreesToRender = (amount, types) => {
+ return Math.floor(amount / types);
+};
+
+const random = (min, max) => {
+ return min + (Math.random() * ((max - min) + 1));
+}
+const renderForest = (forest, canvas) => {
+ for(let i = 0; i < getAmountOfTreesToRender(TREES_TO_DRAW, TREE_TYPES); i++) {
+ forest.plantTree(random(0, CANVAS_SIZE), random(0, CANVAS_SIZE), 'Red Maple', 'red', 'Red Maple texture');
+ forest.plantTree(random(0, CANVAS_SIZE), random(0, CANVAS_SIZE), 'Gray Birch', 'gray', 'Gray Birch texture stub');
+ }
+
+ forest.render(canvas);
+
+ console.log(TREES_TO_DRAW + ' trees rendered');
+ console.log('Memory usage:');
+ console.log('Tree size (8 bytes) * ' + TREES_TO_DRAW + '+ TreeTypes size (~30 bytes) * ' + TREE_TYPES);
+ console.log('Total: ' + ((TREES_TO_DRAW * 8 + TREE_TYPES * 30) / 1024 / 1024) + 'MB (instead of ' + ((TREES_TO_DRAW * 38) / 1024 / 1024) + 'MB)');
+}
+
+renderForest(new Forest(), document.createElement('canvas'));
\ No newline at end of file
diff --git a/Prototype/index.html b/Prototype/index.html
new file mode 100644
index 0000000..8057d9e
--- /dev/null
+++ b/Prototype/index.html
@@ -0,0 +1,31 @@
+
+
+
+ Prototype Pattern
+
+
+
+
Source
+
+import HumanBeing from './HumanBeing';
+
+var me = new HumanBeing({ skinColor: 'pale', hairColor: 'brown', height:'173cm', weight: '100kg', gender: 'male'});
+
+var clone = me.clone();
+
+console.log(`Are original and clone the same instance? ${me === clone}`);
+
+for(let key in me) {
+ console.log(`Are both ${key} property values in original and clone the same value? ${me[key] === clone[key]}`);
+}
+
+
+
+
Console
+
+
Prototype
+
+
+
+
+
diff --git a/Prototype/scripts/HumanBeing.js b/Prototype/scripts/HumanBeing.js
new file mode 100644
index 0000000..ed22dd1
--- /dev/null
+++ b/Prototype/scripts/HumanBeing.js
@@ -0,0 +1,15 @@
+class HumanBeing {
+ constructor(config) {
+ this.skinColor = config.skinColor;
+ this.hairColor = config.hairColor;
+ this.height = config.height;
+ this.weight = config.weight;
+ this.gender = config.gender;
+ // And more data.
+ }
+ clone() {
+ return new HumanBeing(Object.assign({}, this));
+ }
+}
+
+export default HumanBeing;
\ No newline at end of file
diff --git a/Prototype/scripts/main.js b/Prototype/scripts/main.js
new file mode 100644
index 0000000..5eb6c10
--- /dev/null
+++ b/Prototype/scripts/main.js
@@ -0,0 +1,11 @@
+import HumanBeing from './HumanBeing';
+
+var me = new HumanBeing({ skinColor: 'pale', hairColor: 'brown', height:'173cm', weight: '100kg', gender: 'male'});
+
+var clone = me.clone();
+
+console.log(`Are original and clone the same instance? ${me === clone}`);
+
+for(let key in me) {
+ console.log(`Are both ${key} property values in original and clone the same value? ${me[key] === clone[key]}`);
+}
\ No newline at end of file
diff --git a/README.md b/README.md
index f774d9f..de06b37 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,9 @@
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.
@@ -11,6 +14,8 @@ This will be a repository of how to use the Design Patterns from *Gang of Four*
## Design Patterns that you can find in this repository:
* Adapter
+* Builder
+* Bridge
* Chaining
* Command
* Composite
@@ -28,6 +33,7 @@ This will be a repository of how to use the Design Patterns from *Gang of Four*
* Namespace
* Nullify
* Observer
+* Prototype
* Proxy
* Singleton
* State
diff --git a/Singleton/1/scripts/main.js b/Singleton/1/scripts/main.js
index 1b28339..e52b2ab 100644
--- a/Singleton/1/scripts/main.js
+++ b/Singleton/1/scripts/main.js
@@ -3,4 +3,4 @@ import Singleton from './Singleton';
var oSingle1 = Singleton;
var oSingle2 = Singleton;
console.log(Singleton.toString());
-console.log("oSingle1 is the same instance that oSingle2? " + (oSingle1 === oSingle2));
+console.log("Are oSingle1 and oSingle2 the same instance? " + (oSingle1 === oSingle2));
diff --git a/Singleton/2/index.html b/Singleton/2/index.html
index 4d862de..9b78346 100644
--- a/Singleton/2/index.html
+++ b/Singleton/2/index.html
@@ -12,7 +12,7 @@
Source
var oSingle1 = new Singleton();
var oSingle2 = new Singleton();
console.log(new Singleton().toString());
-console.log("oSingle1 is the same instance that oSingle2? " + (oSingle1 === oSingle2));
+console.log("Are oSingle1 and oSingle2 the same instance? " + (oSingle1 === oSingle2));
diff --git a/Singleton/2/scripts/main.js b/Singleton/2/scripts/main.js
index 71a60d0..3611998 100644
--- a/Singleton/2/scripts/main.js
+++ b/Singleton/2/scripts/main.js
@@ -3,4 +3,4 @@ import Singleton from './Singleton';
var oSingle1 = new Singleton();
var oSingle2 = new Singleton();
console.log(new Singleton().toString());
-console.log("oSingle1 is the same instance that oSingle2? " + (oSingle1 === oSingle2));
+console.log("Are oSingle1 and oSingle2 the same instance? " + (oSingle1 === oSingle2));
diff --git a/Singleton/3/index.html b/Singleton/3/index.html
index ea9e001..110aadb 100644
--- a/Singleton/3/index.html
+++ b/Singleton/3/index.html
@@ -12,7 +12,7 @@
Source
var oSingle1 = Singleton;
var oSingle2 = Singleton;
console.log(Singleton.toString());
-console.log("oSingle1 is the same instance that oSingle2? " + (oSingle1 === oSingle2));
+console.log("Are oSingle1 and oSingle2 the same instance? " + (oSingle1 === oSingle2));
var oSingle1 = Singleton.getInstance();
var oSingle2 = Singleton.getInstance();
console.log(Singleton.getInstance().toString());
-console.log("oSingle1 is the same instance that oSingle2? " + (oSingle1 === oSingle2));
+console.log("Are oSingle1 and oSingle2 the same instance? " + (oSingle1 === oSingle2));
diff --git a/Singleton/4/scripts/main.js b/Singleton/4/scripts/main.js
index 732239c..c0191e3 100644
--- a/Singleton/4/scripts/main.js
+++ b/Singleton/4/scripts/main.js
@@ -3,4 +3,4 @@ import Singleton from './Singleton';
var oSingle1 = Singleton.getInstance();
var oSingle2 = Singleton.getInstance();
console.log(Singleton.getInstance().toString());
-console.log("oSingle1 is the same instance that oSingle2? " + (oSingle1 === oSingle2));
+console.log("Are oSingle1 and oSingle2 the same instance? " + (oSingle1 === oSingle2));
diff --git a/Singleton/5/index.html b/Singleton/5/index.html
new file mode 100644
index 0000000..c7d4c47
--- /dev/null
+++ b/Singleton/5/index.html
@@ -0,0 +1,25 @@
+
+
+
+ Singleton Pattern
+
+
+
+
Source
+
+import DatabaseConnection from './DatabaseConnection';
+
+var oSingle1 = DatabaseConnection.instance;
+var oSingle2 = DatabaseConnection.instance;
+console.log("Are oSingle1 and oSingle2 the same instance? " + (oSingle1 === oSingle2));
+
+
+
+
Console
+
+
SINGLETON
+
+
+
+
+
diff --git a/Singleton/5/scripts/DatabaseConnection.js b/Singleton/5/scripts/DatabaseConnection.js
new file mode 100644
index 0000000..46aa53b
--- /dev/null
+++ b/Singleton/5/scripts/DatabaseConnection.js
@@ -0,0 +1,24 @@
+let DBCInstance = null;
+global.DatabaseConnection = class DatabaseConnection {
+ get url() {
+ return 'mongodb://localhost:27017/myproject';
+ }
+ get username() {
+ return 'admin';
+ }
+ get connection() {
+ let connection;
+ // Do something to get the connection to the DB.
+ return connection;
+ }
+ get password() {
+ return 'localhost';
+ }
+ static get instance() {
+ if(DBCInstance === null ||
+ DBCInstance.getConnection().isClosed()) {
+ DBCInstance = new DatabaseConnection();
+ }
+ return DBCInstance;
+ }
+}
\ No newline at end of file
diff --git a/Singleton/5/scripts/main.js b/Singleton/5/scripts/main.js
new file mode 100644
index 0000000..0fdfe40
--- /dev/null
+++ b/Singleton/5/scripts/main.js
@@ -0,0 +1,5 @@
+import DatabaseConnection from './DatabaseConnection';
+
+var oSingle1 = DatabaseConnection.instance;
+var oSingle2 = DatabaseConnection.instance;
+console.log("Are oSingle1 and oSingle2 the same instance? " + (oSingle1 === oSingle2));