The Design Pattern concept is so familiar to programmers, the article will learn about some design patterns and implement them in javascript.
1. Constructor pattern
This is the pattern used when instantiating objects in javascript along with the methods and properties. This is not a strange pattern because it is used quite a lot. Let’s look at an example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <span class="token comment">// Cách khởi tạo bằng function</span> <span class="token keyword">function</span> <span class="token function">Hero</span> <span class="token punctuation">(</span> name <span class="token punctuation">,</span> specialAbility <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token operator">=</span> name <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> specialAbility <span class="token operator">=</span> specialAbility <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function-variable function">getDetails</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> name <span class="token operator">+</span> <span class="token string">' can '</span> <span class="token operator">+</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> specialAbility <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// Implement bằng ES6</span> <span class="token keyword">class</span> <span class="token class-name">Hero</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> name <span class="token punctuation">,</span> specialAbility <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> _name <span class="token operator">=</span> name <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> _specialAbility <span class="token operator">=</span> specialAbility <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function-variable function">getDetails</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token template-string"><span class="token string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> _name <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string"> can </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> _specialAbility <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">`</span></span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// tạo một đối tượng</span> <span class="token keyword">const</span> IronMan <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Hero</span> <span class="token punctuation">(</span> <span class="token string">'Iron Man'</span> <span class="token punctuation">,</span> <span class="token string">'fly'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> IronMan <span class="token punctuation">.</span> <span class="token function">getDetails</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// Iron Man can fly</span> |
2. Factory pattern
Factory pattern is another pattern used to initialize. In the example below we will create a factory class BallFactory which will have a method that accepts params, depending on these params, the object upon initialization will correspond to the class.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <span class="token keyword">class</span> <span class="token class-name">BallFactory</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function-variable function">createBall</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> type <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">let</span> ball <span class="token punctuation">;</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> type <span class="token operator">===</span> <span class="token string">'football'</span> <span class="token operator">||</span> type <span class="token operator">===</span> <span class="token string">'soccer'</span> <span class="token punctuation">)</span> ball <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Football</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> type <span class="token operator">===</span> <span class="token string">'basketball'</span> <span class="token punctuation">)</span> ball <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Basketball</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> ball <span class="token punctuation">.</span> <span class="token function-variable function">roll</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token template-string"><span class="token string">`The </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> _type <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string"> is rolling.`</span></span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> ball <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">class</span> <span class="token class-name">Football</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> _type <span class="token operator">=</span> <span class="token string">'football'</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function-variable function">kick</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">'You kicked the football.'</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token keyword">class</span> <span class="token class-name">Basketball</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> _type <span class="token operator">=</span> <span class="token string">'basketball'</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function-variable function">bounce</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">'You bounced the basketball.'</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// khởi tạo object</span> <span class="token keyword">const</span> factory <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BallFactory</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> myFootball <span class="token operator">=</span> factory <span class="token punctuation">.</span> <span class="token function">createBall</span> <span class="token punctuation">(</span> <span class="token string">'football'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> myBasketball <span class="token operator">=</span> factory <span class="token punctuation">.</span> <span class="token function">createBall</span> <span class="token punctuation">(</span> <span class="token string">'basketball'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> myFootball <span class="token punctuation">.</span> <span class="token function">roll</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// The football is rolling.</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> myBasketball <span class="token punctuation">.</span> <span class="token function">roll</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// The basketball is rolling.</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> myFootball <span class="token punctuation">.</span> <span class="token function">kick</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// You kicked the football.</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> myBasketball <span class="token punctuation">.</span> <span class="token function">bounce</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// You bounced the basketball</span> |
3. Prototype pattern
In this pattern, we will use an existing object to create a new object. This pattern is very useful in javascript because it leverages prototype inheritance instead of class inheritance. Let’s look at an example below
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <span class="token comment">// sử dụng Object.create </span> <span class="token keyword">const</span> car <span class="token operator">=</span> <span class="token punctuation">{</span> noOfWheels <span class="token punctuation">:</span> <span class="token number">4</span> <span class="token punctuation">,</span> <span class="token function">start</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">'started'</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token function">stop</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token string">'stopped'</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">,</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token comment">// Object.create(proto[, propertiesObject])</span> <span class="token keyword">const</span> myCar <span class="token operator">=</span> Object <span class="token punctuation">.</span> <span class="token function">create</span> <span class="token punctuation">(</span> car <span class="token punctuation">,</span> <span class="token punctuation">{</span> owner <span class="token punctuation">:</span> <span class="token punctuation">{</span> value <span class="token punctuation">:</span> <span class="token string">'John'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> myCar <span class="token punctuation">.</span> __proto__ <span class="token operator">===</span> car <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// true</span> |
4. Singleton pattern
This pattern is also very commonly used to initialize objects. For example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <span class="token keyword">class</span> <span class="token class-name">Database</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> data <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span> Database <span class="token punctuation">.</span> exists <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> Database <span class="token punctuation">.</span> instance <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> _data <span class="token operator">=</span> data <span class="token punctuation">;</span> Database <span class="token punctuation">.</span> instance <span class="token operator">=</span> <span class="token keyword">this</span> <span class="token punctuation">;</span> Database <span class="token punctuation">.</span> exists <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token keyword">this</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">getData</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> _data <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">setData</span> <span class="token punctuation">(</span> data <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> _data <span class="token operator">=</span> data <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// Sử dụng khi khởi tạo</span> <span class="token keyword">const</span> mongo <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Database</span> <span class="token punctuation">(</span> <span class="token string">'mongo'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> mongo <span class="token punctuation">.</span> <span class="token function">getData</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// mongo</span> <span class="token keyword">const</span> mysql <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Database</span> <span class="token punctuation">(</span> <span class="token string">'mysql'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> mysql <span class="token punctuation">.</span> <span class="token function">getData</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// mongo</span> |
5. Adapter pattern
This pattern is often used when trying to create an “intermediate adapter” to connect the new refactor code and the old code, so that it can be used normally. For example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 | <span class="token comment">// Ví dụ class cũ về tính toán</span> <span class="token keyword">class</span> <span class="token class-name">OldCalculator</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function-variable function">operations</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> term1 <span class="token punctuation">,</span> term2 <span class="token punctuation">,</span> operation <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">switch</span> <span class="token punctuation">(</span> operation <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">case</span> <span class="token string">'add'</span> <span class="token punctuation">:</span> <span class="token keyword">return</span> term1 <span class="token operator">+</span> term2 <span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token string">'sub'</span> <span class="token punctuation">:</span> <span class="token keyword">return</span> term1 <span class="token operator">-</span> term2 <span class="token punctuation">;</span> <span class="token keyword">default</span> <span class="token punctuation">:</span> <span class="token keyword">return</span> <span class="token number">NaN</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// Implment một class mới</span> <span class="token keyword">class</span> <span class="token class-name">NewCalculator</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function-variable function">add</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> term1 <span class="token punctuation">,</span> term2 <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> term1 <span class="token operator">+</span> term2 <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function-variable function">sub</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> term1 <span class="token punctuation">,</span> term2 <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> term1 <span class="token operator">-</span> term2 <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// Adapter Class giúp sử dụng class mới từ class cũ</span> <span class="token keyword">class</span> <span class="token class-name">CalcAdapter</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">const</span> newCalc <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">NewCalculator</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> <span class="token function-variable function">operations</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> term1 <span class="token punctuation">,</span> term2 <span class="token punctuation">,</span> operation <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">switch</span> <span class="token punctuation">(</span> operation <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">case</span> <span class="token string">'add'</span> <span class="token punctuation">:</span> <span class="token comment">// using the new implementation under the hood</span> <span class="token keyword">return</span> newCalc <span class="token punctuation">.</span> <span class="token function">add</span> <span class="token punctuation">(</span> term1 <span class="token punctuation">,</span> term2 <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">case</span> <span class="token string">'sub'</span> <span class="token punctuation">:</span> <span class="token keyword">return</span> newCalc <span class="token punctuation">.</span> <span class="token function">sub</span> <span class="token punctuation">(</span> term1 <span class="token punctuation">,</span> term2 <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">default</span> <span class="token punctuation">:</span> <span class="token keyword">return</span> <span class="token number">NaN</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// Sử dụng class mới như class cũ</span> <span class="token keyword">const</span> oldCalc <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">OldCalculator</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> oldCalc <span class="token punctuation">.</span> <span class="token function">operations</span> <span class="token punctuation">(</span> <span class="token number">10</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">,</span> <span class="token string">'add'</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 15</span> <span class="token keyword">const</span> newCalc <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">NewCalculator</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> newCalc <span class="token punctuation">.</span> <span class="token function">add</span> <span class="token punctuation">(</span> <span class="token number">10</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 15</span> <span class="token keyword">const</span> adaptedCalc <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">CalcAdapter</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> adaptedCalc <span class="token punctuation">.</span> <span class="token function">operations</span> <span class="token punctuation">(</span> <span class="token number">10</span> <span class="token punctuation">,</span> <span class="token number">5</span> <span class="token punctuation">,</span> <span class="token string">'add'</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 15;</span> |
6. Decorator pattern
This pattern is used when adding behaviors or functions to a class. For example
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <span class="token keyword">class</span> <span class="token class-name">Book</span> <span class="token punctuation">{</span> <span class="token function">constructor</span> <span class="token punctuation">(</span> title <span class="token punctuation">,</span> author <span class="token punctuation">,</span> price <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> _title <span class="token operator">=</span> title <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> _author <span class="token operator">=</span> author <span class="token punctuation">;</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> price <span class="token operator">=</span> price <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token function">getDetails</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token template-string"><span class="token string">`</span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> _title <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string"> by </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> <span class="token keyword">this</span> <span class="token punctuation">.</span> _author <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">`</span></span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token comment">// decorator 1</span> <span class="token keyword">function</span> <span class="token function">giftWrap</span> <span class="token punctuation">(</span> book <span class="token punctuation">)</span> <span class="token punctuation">{</span> book <span class="token punctuation">.</span> isGiftWrapped <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token punctuation">;</span> book <span class="token punctuation">.</span> <span class="token function-variable function">unwrap</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> <span class="token template-string"><span class="token string">`Unwrapped </span> <span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span> book <span class="token punctuation">.</span> <span class="token function">getDetails</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token interpolation-punctuation punctuation">}</span></span> <span class="token string">`</span></span> <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> book <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// decorator 2</span> <span class="token keyword">function</span> <span class="token function">hardbindBook</span> <span class="token punctuation">(</span> book <span class="token punctuation">)</span> <span class="token punctuation">{</span> book <span class="token punctuation">.</span> isHardbound <span class="token operator">=</span> <span class="token boolean">true</span> <span class="token punctuation">;</span> book <span class="token punctuation">.</span> price <span class="token operator">+=</span> <span class="token number">5</span> <span class="token punctuation">;</span> <span class="token keyword">return</span> book <span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token comment">// Sử dụng</span> <span class="token keyword">const</span> alchemist <span class="token operator">=</span> <span class="token function">giftWrap</span> <span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">Book</span> <span class="token punctuation">(</span> <span class="token string">'Book1'</span> <span class="token punctuation">,</span> <span class="token string">'Author1'</span> <span class="token punctuation">,</span> <span class="token number">10</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> alchemist <span class="token punctuation">.</span> isGiftWrapped <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// true</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> alchemist <span class="token punctuation">.</span> <span class="token function">unwrap</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 'Unwrapped Book1 by Author1'</span> <span class="token keyword">const</span> inferno <span class="token operator">=</span> <span class="token function">hardbindBook</span> <span class="token punctuation">(</span> <span class="token keyword">new</span> <span class="token class-name">Book</span> <span class="token punctuation">(</span> <span class="token string">'Book2'</span> <span class="token punctuation">,</span> <span class="token string">'Author2'</span> <span class="token punctuation">,</span> <span class="token number">15</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> inferno <span class="token punctuation">.</span> isHardbound <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// true</span> console <span class="token punctuation">.</span> <span class="token function">log</span> <span class="token punctuation">(</span> inferno <span class="token punctuation">.</span> price <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token comment">// 20</span> |
Above are the common patterns used in javascript when initializing objects in javascript. Hope the article is helpful to everyone
Reference
https://www.toptal.com/javascript/comprehensive-guide-javascript-design-patterns https://addyosmani.com/resources/essentialjsdesignpatterns/book/ https://medium.com/better-programming/javascript-design -patterns-25f0faaaa15