Skip to content

Commit

Permalink
ES5 to ES2015 (#220)
Browse files Browse the repository at this point in the history
* 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
guar47 authored and addyosmani committed May 19, 2018
1 parent 88d5dfc commit 21346c1
Show file tree
Hide file tree
Showing 61 changed files with 11,428 additions and 7 deletions.
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
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() );
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());
Loading

0 comments on commit 21346c1

Please sign in to comment.