JS

HOW TO CREATE HOOKS IN JAVASCRIPT

(quick guide & examples)

Hooks are mechanics to alter or change a process.

Javascript does not suport hooks natively.

We can only simulate hooks using functions and events.

WHAT ARE HOOKS?

01

var doAJAX = url => {   BEFORE HOOK   if (typeof b == "function") { b(); }   AJAX FETCH & AFTER HOOK   fetch(url).then(res => res.text())   .then(txt => {     if (typeof a == "function") { a(txt); }   }); };

HOOK USING FUNCTIONS (A)

02

BEFORE HOOK var b = () => document.getElementById ("demo").style.color = "red";

HOOK USING FUNCTIONS (B)

03

AFTER HOOK var a = txt => document.getElementById ("demo").innerHTML = txt;

GO doAJAX("demo.html");

var doAJAX = url => {   BEFORE HOOK   window.dispatchEvent(new    CustomEvent("bb"));     AJAX FETCH & AFTER HOOK   fetch(url).then(res => res.text())   .then(txt => window.dispatchEvent(     new CustomEvent("aa", { detail : txt })   )); }

HOOK USING EVENTS (A)

04

BEFORE HOOK window.addEventListener("bb", () =>    document.getElementById("demo")   .style.color = "red" );

HOOK USING EVENTS (B)

05

AFTER HOOK window.addEventListener("aa", evt =>    document.getElementById("demo")   .innerHTML = evt.detail; );

GO! doAJAX("demo.html");