Skip to content

Commit e9352b3

Browse files
zoltantothcomzoltantothcom
authored
Merge pull request zoltantothcom#35 from zoltantothcom/dev
Expand patterns details
2 parents 23945e9 + 88b39e1 commit e9352b3

26 files changed

+126
-35
lines changed

‎__tests__/components/__snapshots__/Pattern.test.js.snap

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,9 +59,19 @@ exports[`REFERENCE - Pattern component renders the individual pattern (Singleton
5959
<span
6060
className="c2"
6161
>
62-
Description:
62+
Definition:
6363
</span>
64-
This pattern restricts object creation for a class to only one instance.
64+
Ensure a class has only one instance and provide a global point of access to it.
65+
</p>
66+
<p>
67+
<span
68+
className="c2"
69+
>
70+
Use when…
71+
</span>
72+
…
73+
there must by only one instance of a class
74+
.
6575
</p>
6676
<h3>
6777
ES5

‎__tests__/pages/__snapshots__/Patterns.test.js.snap

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -295,9 +295,19 @@ exports[`Patterns page renders the individual Pattern (Singleton) info 1`] = `
295295
<span
296296
className="c2"
297297
>
298-
Description:
298+
Definition:
299299
</span>
300-
This pattern restricts object creation for a class to only one instance.
300+
Ensure a class has only one instance and provide a global point of access to it.
301+
</p>
302+
<p>
303+
<span
304+
className="c2"
305+
>
306+
Use when…
307+
</span>
308+
…
309+
there must by only one instance of a class
310+
.
301311
</p>
302312
<h3>
303313
ES5

‎src/components/Pattern.jsx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -73,9 +73,15 @@ class Pattern extends React.Component {
7373
<Type>{pattern.type} pattern</Type>
7474
</p>
7575
<p>
76-
<SubHeader>Description:</SubHeader>
77-
{`This pattern ${pattern.hint}.`}
76+
<SubHeader>Definition:</SubHeader>
77+
{pattern.definition}
7878
</p>
79+
{pattern.when && (
80+
<p>
81+
<SubHeader>Use when&hellip;</SubHeader>
82+
&hellip;{pattern.when}.
83+
</p>
84+
)}
7985

8086
<h3>ES5</h3>
8187
<SyntaxHighlighter language="javascript" style={style}>

‎src/static/patterns/behavioral_chainOfResponsibility.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@ const CHAIN_OF_RESPONSIBILITY = {
22
id: 'chain_of_responsibility',
33
name: 'Chain of Responsibility',
44
type: 'behavioral',
5-
hint: 'delegates commands to a chain of processing objects',
5+
hint: 'A way of passing a request between a chain of objects',
6+
definition: `Avoid coupling the sender of a request to its receiver by giving more than one object a chance to
7+
handle the request. Chain the receiving objects and pass the request along the chain until an object handles it.`,
8+
when: 'more than one object can handle a request and that information is known in runtime',
69
codeES5: `function ShoppingCart() {
710
this.products = [];
811

‎src/static/patterns/behavioral_command.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@ const COMMAND = {
22
id: 'command',
33
name: 'Command',
44
type: 'behavioral',
5-
hint: 'creates objects which encapsulate actions and parameters',
5+
hint: 'Encapsulate a command request as an object',
6+
definition: `Encapsulate a request as an object, thereby letting you parameterize clients with different requests,
7+
queue or log requests, and support undoable operations.`,
8+
when:
9+
'you have a queue of requests to handle or you want to log them. Also when you want to have an «undo» action',
610
codeES5: `function Cockpit(instruction) {
711
this.instruction = instruction;
812
}

‎src/static/patterns/behavioral_interpreter.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@ const INTERPRETER = {
22
id: 'interpteter',
33
name: 'Interpreter',
44
type: 'behavioral',
5-
hint: 'implements a specialized language',
5+
hint: 'A way to include language elements in a program',
6+
definition: `Given a language, define a representation for its grammar along with an interpreter that
7+
uses the representation to interpret sentences in the language.`,
8+
when:
9+
'you want to interpret given language and you can represent statements as an abstract syntax trees',
610
codeES5: `function Sum(left, right) {
711
this.left = left;
812
this.right = right;

‎src/static/patterns/behavioral_iterator.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@ const ITERATOR = {
22
id: 'iterator',
33
name: 'Iterator',
44
type: 'behavioral',
5-
hint:
6-
'accesses the elements of an object sequentially without exposing its underlying representation',
5+
hint: 'Sequentially access the elements of a collection',
6+
definition: `Provide a way to access the elements of an aggregate object sequentially
7+
without exposing its underlying representation.`,
8+
when: "you want to access object's content without knowing how it is internally represented",
79
codeES5: `function Pattern(el) {
810
this.index = 0;
911
this.elements = el;

‎src/static/patterns/behavioral_mediator.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,11 @@ const MEDIATOR = {
22
id: 'mediator',
33
name: 'Mediator',
44
type: 'behavioral',
5-
hint:
6-
'allows loose coupling between classes by being the only class that has detailed knowledge of their methods',
5+
hint: 'Defines simplified communication between classes',
6+
definition: `Define an object that encapsulates how a set of objects interact.
7+
Mediator promotes loose coupling by keeping objects from referring to each other explicitly,
8+
and it lets you vary their interaction independently.`,
9+
when: 'a set of objects communicate in structured but complex ways',
710
codeES5: `function TrafficTower() {
811
this.airplanes = [];
912
}

‎src/static/patterns/behavioral_memento.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@ const MEMENTO = {
22
id: 'memento',
33
name: 'Memento',
44
type: 'behavioral',
5-
hint: 'provides the ability to restore an object to its previous state',
5+
hint: "Capture and restore an object's internal state",
6+
definition: `Without violating encapsulation, capture and externalize an object's internal state
7+
so that the object can be restored to this state later.`,
8+
when: 'you need to take a snapshot of an object',
69
codeES5: `function Pattern(value) {
710
this.value = value;
811
}

‎src/static/patterns/behavioral_observer.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@ const OBSERVER = {
22
id: 'observer',
33
name: 'Observer',
44
type: 'behavioral',
5-
hint: 'is a publish/subscribe pattern which allows a number of observer objects to see an event',
5+
hint: 'A way of notifying change to a number of classes',
6+
definition: `Define a one-to-many dependency between objects so that when one object changes state,
7+
all its dependents are notified and updated automatically.`,
8+
when: 'a change to one object requires changing others',
69
codeES5: `function Product() {
710
this.price = 0;
811
this.actions = [];

‎src/static/patterns/behavioral_state.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@ const STATE = {
22
id: 'state',
33
name: 'State',
44
type: 'behavioral',
5-
hint: 'allows an object to alter its behavior when its internal state changes',
5+
hint: "Alter an object's behavior when its state changes",
6+
definition: `Allow an object to alter its behavior when its internal state changes.
7+
The object will appear to change its class.`,
8+
when: `the object's behaviour depends on its state and its behaviour changes in run-time depends on that state`,
69
codeES5: `function Order() {
710
this.pattern = new WaitingForPayment();
811

‎src/static/patterns/behavioral_strategy.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@ const STRATEGY = {
22
id: 'strategy',
33
name: 'Strategy',
44
type: 'behavioral',
5-
hint: 'allows one of a family of algorithms to be selected on-the-fly at runtime',
5+
hint: 'Encapsulates an algorithm inside a class',
6+
definition: `Define a family of algorithms, encapsulate each one, and make them interchangeable.
7+
Strategy lets the algorithm vary independently from clients that use it.`,
8+
when: `you have many classes that differ in their behaviour.
9+
Strategies allow to configure a class with one of many behaviours`,
610
codeES5: `function ShoppingCart(discount) {
711
this.discount = discount;
812
this.amount = 0;

‎src/static/patterns/behavioral_template.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@ const TEMPLATE = {
22
id: 'template',
33
name: 'Template',
44
type: 'behavioral',
5-
hint:
6-
'defines the skeleton of an algorithm as an abstract class, allowing its subclasses to provide concrete behavior',
5+
hint: 'Defer the exact steps of an algorithm to a subclass',
6+
definition: `Define the skeleton of an algorithm in an operation, deferring some steps to subclasses.
7+
Template Method lets subclasses redefine certain steps of an algorithm without changing the algorithm's structure.`,
8+
when: `you have to define steps of the algorithm once and let subclasses to implement its behaviour`,
79
codeES5: `function Tax() {}
810
911
Tax.prototype.calc = function(value) {

‎src/static/patterns/behavioral_visitor.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,11 @@ const VISITOR = {
22
id: 'visitor',
33
name: 'Visitor',
44
type: 'behavioral',
5-
hint:
6-
'separates an algorithm from an object structure by moving the hierarchy of methods into one object',
5+
hint: 'Defines a new operation to a class without change',
6+
definition: `Represent an operation to be performed on the elements of an object structure.
7+
Visitor lets you define a new operation without changing the classes of the elements on which it operates.`,
8+
when: `an object structure includes many classes and you want to perform an operations
9+
on the elements of that structure that depend on their classes`,
710
codeES5: `function bonusPattern(employee) {
811
if (employee instanceof Manager) employee.bonus = employee.salary * 2;
912
if (employee instanceof Developer) employee.bonus = employee.salary;

‎src/static/patterns/creational_abstractFactory.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@ const ABSTRACT_FACTORY = {
22
id: 'abstract_factory',
33
name: 'Abstract Factory',
44
type: 'creational',
5-
hint: 'groups object factories that have a common theme',
5+
hint: 'Creates an instance of several families of classes',
6+
definition: `Provide an interface for creating families of related or dependent objects
7+
without specifying their concrete classes.`,
8+
when: 'system should be independent of how what it is producing is structured or represented',
69
codeES5: `function droidProducer(kind) {
710
if (kind === 'battle') return battleDroidPattern;
811
return pilotDroidPattern;

‎src/static/patterns/creational_builder.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@ const BUILDER = {
22
id: 'builder',
33
name: 'Builder',
44
type: 'creational',
5-
hint: 'constructs complex objects by separating construction and representation',
5+
hint: 'Separates object construction from its representation',
6+
definition: `Separate the construction of a complex object from its representation
7+
so that the same construction process can create different representations.`,
8+
when: 'algorithm of creation is independent of the parts of the object',
69
codeES5: `function Request() {
710
this.url = '';
811
this.method = '';

‎src/static/patterns/creational_factory.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@ const FACTORY = {
22
id: 'factory',
33
name: 'Factory',
44
type: 'creational',
5-
hint: 'creates objects without specifying the exact class to create',
5+
hint: 'Creates an instance of several derived classes',
6+
definition: `Define an interface for creating an object, but let subclasses decide
7+
which class to instantiate. Factory Method lets a class defer instantiation to subclasses.`,
8+
when: `a class wants its subclasses to decide which object to create`,
69
codeES5: `function teslaPattern(type) {
710
if (type === 'ModelX') return new Tesla(type, 108000, 300);
811
if (type === 'ModelS') return new Tesla(type, 111000, 320);

‎src/static/patterns/creational_prototype.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@ const PROTOTYPE = {
22
id: 'prototype',
33
name: 'Prototype',
44
type: 'creational',
5-
hint: 'creates objects by cloning an existing object',
5+
hint: 'A fully initialized instance to be copied or cloned',
6+
definition: `Specify the kind of objects to create using a prototypical instance,
7+
and create new objects by copying this prototype.`,
8+
when: 'classes to instantiate are available only in runtime',
69
codeES5: `function Sheep(name, weight) {
710
this.name = name;
811
this.weight = weight;

‎src/static/patterns/creational_singleton.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@ const SINGLETON = {
22
id: 'singleton',
33
name: 'Singleton',
44
type: 'creational',
5-
hint: 'restricts object creation for a class to only one instance',
5+
hint: 'A class of which only a single instance can exist',
6+
definition: 'Ensure a class has only one instance and provide a global point of access to it.',
7+
when: 'there must by only one instance of a class',
68
codeES5: `function Person() {
79
if (typeof Person.instance === 'object') return Person.instance;
810

‎src/static/patterns/structural_adapter.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@ const ADAPTER = {
22
id: 'adapter',
33
name: 'Adapter',
44
type: 'structural',
5-
hint: `allows classes with incompatible interfaces to work together by wrapping
6-
its own interface around that of an already existing class`,
5+
hint: `Match interfaces of different classes`,
6+
definition: `Convert the interface of a class into another interface clients expect.
7+
Adapter lets classes work together that couldn't otherwise because of incompatible interfaces.`,
8+
when: `you want to use existing class but its interface does not match the one you need`,
79
codeES5: `function Soldier(lvl) {
810
this.lvl = lvl;
911
}

‎src/static/patterns/structural_bridge.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@ const BRIDGE = {
22
id: 'bridge',
33
name: 'Bridge',
44
type: 'structural',
5-
hint: 'decouples an abstraction from its implementation so that the two can vary independently',
5+
hint: 'Separates an object’s interface from its implementation',
6+
definition: `Decouple an abstraction from its implementation so that the two can vary independently.`,
7+
when: `you want to avoid binding between abstraction and its implementation if, for example,
8+
each of them must be selected in runtime`,
69
codeES5: `function EpsonPrinter(ink) {
710
this.ink = ink();
811
}

‎src/static/patterns/structural_composite.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@ const COMPOSITE = {
22
id: 'composite',
33
name: 'Composite',
44
type: 'structural',
5-
hint: 'composes zero-or-more similar objects so that they can be manipulated as one object',
5+
hint: 'A tree structure of simple and composite objects',
6+
definition: `Compose objects into tree structures to represent part-whole hierarchies.
7+
Composite lets clients treat individual objects and compositions of objects uniformly.`,
8+
when: `you want to represent hierarchies of objects`,
69
codeES5: `function EquipmentPattern(name) {
710
this.equipments = [];
811
this.name = name;

‎src/static/patterns/structural_decorator.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@ const DECORATOR = {
22
id: 'decorator',
33
name: 'Decorator',
44
type: 'structural',
5-
hint: 'dynamically adds/overrides behaviour in an existing method of an object',
5+
hint: 'Add responsibilities to objects dynamically',
6+
definition: `Attach additional responsibilities to an object dynamically.
7+
Decorators provide a flexible alternative to subclassing for extending functionality.`,
8+
when: `you want to add extensions to an object in runtime without affecting other objects`,
69
codeES5: `function Pasta() {
710
this.price = 0;
811
}

‎src/static/patterns/structural_facade.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,10 @@ const FACADE = {
22
id: 'facade',
33
name: 'Facade',
44
type: 'structural',
5-
hint: 'provides a simplified interface to a large body of code',
5+
hint: 'A single class that represents an entire subsystem',
6+
definition: `Provide a unified interface to a set of interfaces in a subsystem.
7+
Facade defines a higher-level interface that makes the subsystem easier to use.`,
8+
when: `you want to provide a simple interface to a complex subsystem`,
69
codeES5: `var shopPattern = {
710
calc: function(price) {
811
price = discount(price);

‎src/static/patterns/structural_flyweight.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@ const FLYWEIGHT = {
22
id: 'flyweight',
33
name: 'Flyweight',
44
type: 'structural',
5-
hint: 'reduces the cost of creating and manipulating a large number of similar objects',
5+
hint: 'A fine-grained instance used for efficient sharing',
6+
definition: `Use sharing to support large numbers of fine-grained objects efficiently.`,
7+
when: `an application uses a lot of small objects and their storing is expensive or their identity is not important`,
68
codeES5: `function Color(name) {
79
this.name = name;
810
}

‎src/static/patterns/structural_proxy.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@ const PROXY = {
22
id: 'proxy',
33
name: 'Proxy',
44
type: 'structural',
5-
hint:
6-
'provides a placeholder for another object to control access, reduce cost, and reduce complexity',
5+
hint: 'An object representing another object',
6+
definition: `Provide a surrogate or placeholder for another object to control access to it.`,
7+
when: ``,
78
codeES5: `function Car() {
89
this.drive = function() {
910
return 'driving';

0 commit comments

Comments
 (0)