vxhviet

[JavaScript] - Encapsulation

SOURCE

There are 2 ways to achieve Encapsulation in JS:

• Protected Properties and Methods: coding convention (not true private), use _ before a property to notify other developer this property is protected and should not be used directly.
• Private Class Fields and Methods: languague feature that is still under proposal, might not work for every browser and are subjected to syntax change.

// 1) Public fields
// 2) Private fields

vxhviet

[JavaScript] - Inheritance Between Classes

Constructor Function

const Person = function (firstName, birthYear) {
  this.firstName = firstName;
  this.birthYear = birthYear;
};

vxhviet

[JavaScript] - Object.create()

SOURCE

// Basically this is a way to link a prototype to any object that we want.

// the prototype
const PersonProto = {
  calcAge() {
 console.log(2037 - this.birthYear);

vxhviet

[JavaScript] - ES6 Classes

SOURCE

// syntactic sugar, behind the scene it's still prototypal inheritance/ delegation

// Class expression
// const PersonCl = class {} // behind the scene class is still a special type of function

// Class declaration

vxhviet

[JavaScript] - Prototypal Inheritance on Built-In Objects

const Person = function (firstName, birthYear) {
  this.firstName = firstName; // assign param to `this.firstName` property
  this.birthYear = birthYear;
};
const jonas = new Person('Jonas', 1991);

console.log(jonas.__proto__);

vxhviet

[JavaScript] - Efficient Script Loading - async vs defer

SOURCE, SOURCE

vxhviet

[JavaScript] - Lifecycle DOM Events

document.addEventListener('DOMContentLoaded', function (e) {
  console.log('HTML parsed and DOM tree built!', e);
});

window.addEventListener('load', function (e) {
  console.log('Page fully loaded', e);
});

vxhviet

[JavaScript] - Lazy Loading Images - Intersection Observer API

SOURCE

<div class="features">
        <img
          src="img/digital-lazy.jpg"
          data-src="img/digital.jpg"
          alt="Computer"
          class="features__img lazy-img"

vxhviet

[JavaScript] - Revealing Elements on Scroll - Intersection Observer API

SOURCE

<section class="section" id="section--1">
// ...
</section>

<section class="section" id="section--2">
// ...

vxhviet

[JavaScript] - Sticky Navigation - Intersection Observer API

SOURCE

<header class="header">
    <nav class="nav">
//   ....
    </nav>
</header>