-
Notifications
You must be signed in to change notification settings - Fork 793
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* add es2015 files, finish modernize 0 and 1 chapters * Finish 2 chapter * add 3 chapter * add 4 chapter * add chapter 5 part 1 observer * add chapter 5 part 2 publish/subscribe * add chapter 6 * add 7 chapter * add 8 chapter * add 9 chapter * add chapter 10 * add 11 chapter * add 12 chapter and small fixes * add 13 chapter * add 14 chapter * add 15, 16, 17 chapters without changes * add 18 and 21 chapters without changes, fix old code * add 19 chapter * add 20 chapter * change snippets structure * add 22, 23, 24, 28 chapters without changes * add 25 chapter * add 26 chapter * add 27 chapter * add 29 chapter * add 30 chapter * add 31 chapter * add 32 chapter * refactoring 1 section - main patterns * refactoring remaining sections * fix singleton * add new AMD syntax, fix spelling mistakes * add new module pattern implementation * add new Mixins
- Loading branch information
1 parent
88d5dfc
commit 21346c1
Showing
61 changed files
with
11,428 additions
and
7 deletions.
There are no files selected for viewing
40 changes: 40 additions & 0 deletions
40
book/snippets/01-JavaScript-Design-Patterns/0-design-pattern-categorization.es2015.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
//*******************************************************// | ||
// A brief note on classes | ||
//*******************************************************// | ||
|
||
// Section contains description of ES2015, but not use it. | ||
// I suggest remove the description and put the new examples. | ||
|
||
//********************** Snippet 1 **********************// | ||
|
||
// A car "class" | ||
|
||
// [ES2015+] Below we used new class declaration, using keyword class | ||
// [ES2015+] We used new constructor method and method declaration | ||
// [ES2015+] Classes are syntactic sugar over JavaScript's prototype-based inheritance | ||
// [ES2015+] We used new template literals for string interpolation | ||
class Car { | ||
constructor(model) { | ||
this.model = model; | ||
this.color = 'silver'; | ||
this.year = '2012'; | ||
} | ||
|
||
getInfo() { | ||
return `${this.model} ${this.year}`; | ||
} | ||
} | ||
|
||
//********************** Snippet 2 **********************// | ||
|
||
// Usage: | ||
|
||
// [ES2015+] We used new keyword const for immutable constant declaration | ||
const myCar = new Car('ford'); | ||
|
||
myCar.year = '2010'; | ||
|
||
console.log(myCar.getInfo()); | ||
|
||
// Here the link on Stoyan Stefanov's post, it's a good post. | ||
// But more modern data can be obtained here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes |
26 changes: 26 additions & 0 deletions
26
book/snippets/01-JavaScript-Design-Patterns/0-design-pattern-categorization.es5.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,26 @@ | ||
//*******************************************************// | ||
// A brief note on classes | ||
//*******************************************************// | ||
|
||
//********************** Snippet 1 **********************// | ||
|
||
// A car "class" | ||
function Car( model ) { | ||
|
||
this.model = model; | ||
this.color = "silver"; | ||
this.year = "2012"; | ||
|
||
this.getInfo = function () { | ||
return this.model + " " + this.year; | ||
}; | ||
|
||
} | ||
|
||
//********************** Snippet 2 **********************// | ||
|
||
var myCar = new Car("ford"); | ||
|
||
myCar.year = "2010"; | ||
|
||
console.log( myCar.getInfo() ); |
179 changes: 179 additions & 0 deletions
179
book/snippets/01-JavaScript-Design-Patterns/1-the-constructor-pattern.es2015.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,179 @@ | ||
//*******************************************************// | ||
// Object Creation | ||
//*******************************************************// | ||
|
||
//********************** Snippet 1 **********************// | ||
|
||
// [ES2015+] We used new keyword const for immutable constant declaration | ||
// Each of the following options will create a new empty object: | ||
|
||
const newObject = {}; | ||
|
||
// or | ||
const newObject = Object.create(Object.prototype); | ||
|
||
// or | ||
const newObject = new Object(); | ||
|
||
//********************** Snippet 2 **********************// | ||
|
||
// ECMAScript 3 compatible approaches | ||
|
||
// 1. Dot syntax | ||
|
||
// Set properties | ||
newObject.someKey = 'Hello World'; | ||
|
||
// Get properties | ||
// [ES2015+] We used new keyword const for immutable constant declaration | ||
const value = newObject.someKey; | ||
|
||
// 2. Square bracket syntax | ||
|
||
// Set properties | ||
newObject['Some Key'] = 'Hello World'; | ||
|
||
// Get properties | ||
// [ES2015+] We used new keyword const for immutable constant declaration | ||
const value = newObject['Some Key']; | ||
|
||
// ECMAScript 5 only compatible approaches | ||
// For more information see: http://kangax.github.com/es5-compat-table/ | ||
|
||
// 3. Object.defineProperty | ||
|
||
// Set properties | ||
Object.defineProperty(newObject, 'someKey', { | ||
value: "for more control of the property's behavior", | ||
writable: true, | ||
enumerable: true, | ||
configurable: true, | ||
}); | ||
|
||
// If the above feels a little difficult to read, a short-hand could | ||
// be written as follows: | ||
// [ES2015+] We used new keyword const for immutable constant declaration | ||
// [ES2015+] We used new arrow function expression syntax | ||
const defineProp = (obj, key, value) => { | ||
const config = { | ||
value: value, | ||
writable: true, | ||
enumerable: true, | ||
configurable: true, | ||
}; | ||
Object.defineProperty(obj, key, config); | ||
}; | ||
|
||
// To use, we then create a new empty "person" object | ||
// [ES2015+] We used new keyword const for immutable constant declaration | ||
const person = Object.create(Object.prototype); | ||
|
||
// Populate the object with properties | ||
defineProp(person, 'car', 'Delorean'); | ||
defineProp(person, 'dateOfBirth', '1981'); | ||
defineProp(person, 'hasBeard', false); | ||
|
||
console.log(person); | ||
// Outputs: Object {car: "Delorean", dateOfBirth: "1981", hasBeard: false} | ||
|
||
// 4. Object.defineProperties | ||
|
||
// Set properties | ||
Object.defineProperties(newObject, { | ||
someKey: { | ||
value: 'Hello World', | ||
writable: true, | ||
}, | ||
|
||
anotherKey: { | ||
value: 'Foo bar', | ||
writable: false, | ||
}, | ||
}); | ||
|
||
// Getting properties for 3. and 4. can be done using any of the | ||
// options in 1. and 2. | ||
|
||
//********************** Snippet 3 **********************// | ||
|
||
// Usage: | ||
|
||
// Create a race car driver that inherits from the person object | ||
// [ES2015+] We used new keyword const for immutable constant declaration | ||
const driver = Object.create(person); | ||
|
||
// Set some properties for the driver | ||
defineProp(driver, 'topSpeed', '100mph'); | ||
|
||
// Get an inherited property (1981) | ||
console.log(driver.dateOfBirth); | ||
|
||
// Get the property we set (100mph) | ||
console.log(driver.topSpeed); | ||
|
||
//*******************************************************// | ||
// Basic Constructors | ||
//*******************************************************// | ||
|
||
//********************** Snippet 1 **********************// | ||
|
||
// [ES2015+] Below we used new class declaration, using keyword class | ||
// [ES2015+] We used new constructor method and method declaration | ||
// [ES2015+] Classes are syntactic sugar over JavaScript's prototype-based inheritance | ||
// [ES2015+] We used new template literals for string interpolation | ||
class Car { | ||
constructor(model, year, miles) { | ||
this.model = model; | ||
this.year = year; | ||
this.miles = miles; | ||
} | ||
|
||
toString() { | ||
return `${this.model} has done ${this.miles} miles`; | ||
} | ||
} | ||
|
||
// Usage: | ||
|
||
// We can create new instances of the car | ||
// [ES2015+] We used new keyword const for immutable constant declaration | ||
const civic = new Car('Honda Civic', 2009, 20000); | ||
const mondeo = new Car('Ford Mondeo', 2010, 5000); | ||
|
||
// and then open our browser console to view the | ||
// output of the toString() method being called on | ||
// these objects | ||
console.log(civic.toString()); | ||
console.log(mondeo.toString()); | ||
|
||
//*******************************************************// | ||
// Constructors With Prototypes | ||
//*******************************************************// | ||
|
||
//********************** Snippet 1 **********************// | ||
// [ES2015+] Classes are syntactic sugar over JavaScript's prototype-based inheritance | ||
// [ES2015+] We used new constructor method and method declaration | ||
// [ES2015+] All of it new syntax sugar above old function structures | ||
class Car { | ||
constructor(model, year, miles) { | ||
this.model = model; | ||
this.year = year; | ||
this.miles = miles; | ||
} | ||
} | ||
|
||
// Note here that we are using Object.prototype.newMethod rather than | ||
// Object.prototype so as to avoid redefining the prototype object | ||
// [ES2015+] We still could use Object.prototype for adding new methods, because internally we use the same structure | ||
// [ES2015+] We used new template literals for string interpolation | ||
Car.prototype.toString = function() { | ||
return `${this.model} has done ${this.miles} miles`; | ||
}; | ||
|
||
// Usage: | ||
// [ES2015+] We used new keyword const for immutable constant declaration | ||
const civic = new Car('Honda Civic', 2009, 20000); | ||
const mondeo = new Car('Ford Mondeo', 2010, 5000); | ||
|
||
console.log(civic.toString()); | ||
console.log(mondeo.toString()); |
Oops, something went wrong.