Knihovny pomocí uzávěrů v JavaScriptu

Často se v JavaScriptu vytvářejí knihovny, které představují soubory funkcí pro použití ostatními programátory.

Takové knihovny jsou obvykle zabaleny do modulů pomocí uzávěrů. To se dělá proto, aby při připojení knihovny se ve vnějším světě objevilo co nejméně funkcí.

Každá knihovna se zpravidla snaží vytvářet ve vnějším světě pouze jednu proměnnou - objekt s funkcemi knihovny. Zároveň uvnitř v kódu knihovny jsou některé funkce hlavní a některé - pomocné. Je zřejmé, že do vnějšího světa chceme exportovat pouze potřebné funkce, nezanášet exportovaný objekt pomocnými funkcemi.

Podívejme se na příklad. Předpokládejme, že máme následující soubor funkcí, které bychom chtěli přeměnit na knihovnu:

math.jsfunction square(num) {
  return num ** 2;
}
function cube(num) {
  return num ** 3;
}
function avg(arr) {
  return sum(arr, 1) / arr.length;
}
function digitsSum(num) {
  return sum(String(num).split(''));
}

// pomocná funkce
function sum(arr) {
  let res = 0;
  
  for (let elem of arr) {
    res += +elem;
  }
  
  return res;
}

Zabalme naše funkce do modulu:

math.js;(function() {
  function square(num) {
    return num ** 2;
  }
  function cube(num) {
    return num ** 3;
  }
  function avg(arr) {
    return sum(arr, 1) / arr.length;
  }
  function digitsSum(num) {
    return sum(String(num).split(''));
  }
  
  // pomocná funkce
  function sum(arr) {
    let res = 0;
    
    for (let elem of arr) {
      res += +elem;
    }
    
    return res;
  }
})();

A nyní exportujme všechny funkce kromě pomocné:

math.js;(function() {
  function square(num) {
    return num ** 2;
  }
  function cube(num) {
    return num ** 3;
  }
  function avg(arr) {
    return sum(arr, 1) / arr.length;
  }
  function digitsSum(num) {
    return sum(String(num).split(''));
  }
  
  // pomocná funkce
  function sum(arr) {
    let res = 0;
    
    for (let elem of arr) {
      res += +elem;
    }
    
    return res;
  }
  
  window.math = {square, cube, avg, digitsSum};
})();

Předpokládejme, že máme HTML stránku index.html:

index.html<html>
  <head>
    <script>
      
    </script>
  </head>
</html>

Připojme k ní naši knihovnu:

index.html<html>
  <head>
    <script src="math.js"></script>
    <script>
      
    </script>
  </head>
</html>

Použijme funkce z naší knihovny:

index.html<html>
  <head>
    <script src="math.js"></script>
    <script>
      alert(math.avg([1, 2, 3]) + math.square());
    </script>
  </head>
</html>

javascriptfunction avg1(arr) {
  return sum(arr, 1) / arr.length;
}

function avg2(arr) {
  return sum(arr, 2) / arr.length;
}

function avg3(arr) {
  return sum(arr, 3) / arr.length;
}

// pomocná funkce
function sum(arr, pow) {
  let res = 0;
  
  for (let elem of arr) {
    res += elem ** pow;
  }
  
  return res;
}