ES5 to ES2015 (#220)

* 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
addyosmani · May 19, 2018 · 21346c1 · 21346c1
1 parent 88d5dfc
commit 21346c1
Show file tree

Hide file tree

Showing 61 changed files with 11,428 additions and 7 deletions.
diff --git a/book/snippets/01-JavaScript-Design-Patterns/0-design-pattern-categorization.es2015.js b/book/snippets/01-JavaScript-Design-Patterns/0-design-pattern-categorization.es2015.js
@@ -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
diff --git a/book/snippets/01-JavaScript-Design-Patterns/0-design-pattern-categorization.es5.js b/book/snippets/01-JavaScript-Design-Patterns/0-design-pattern-categorization.es5.js
@@ -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() );
diff --git a/book/snippets/01-JavaScript-Design-Patterns/1-the-constructor-pattern.es2015.js b/book/snippets/01-JavaScript-Design-Patterns/1-the-constructor-pattern.es2015.js
@@ -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());