vef1-2024

Vefforritun 1 kennd haustið 2024

View the Project on GitHub vefforritun/vef1-2024

Fyrirlestur – JavaScript einingar

Vefforritun 1 — TÖL107G

Ólafur Sverrir Kjartansson, osk@hi.is

Einingar

Þegar við vinnum með forrit er þeim yfirleitt skipt upp í einingar
Safnar saman virkni á einum stað, inniheldur föll og breytur
Skilgreinum API (Application Programming Interface) fyrir einingu

Einingar – kostir

Einfaldar að hugsa um forritið, ákveðin eining gerir ákveðin hlut
Getur hjálpað við að stýra flækjustigi
- Þurfum ekki að „halda öllu forritinu í hausnum“ í einu

Skilgreinum namespace, minnkar líkur á að við skemmum fyrir öðrum eða aðrir skemmi fyrir okkur
- Sérstaklega í JavaScript með global og local scope
Ýtir undir endurnýtingu á kóða

Einingar – ókostir

Getur verið flókið að ákveða hvernig og hvenær skipta eigi forriti upp
Að skrifa gott API er erfitt
Lærum hægt og rólega með því að skrifa sjálf og nota önnur forritasöfn

// forrit sem reiknar lengd milli a og b
// hvaða skil eru „best“?

program.doStuff(a, b);

program.calculate(a, b);

program.calulateDistance(a, b);

program.distance(a, b);

Einingar í JavaScript

Þurfum að geta búið til sérstakt scope fyrir hverja einingu
Einingar eru ekki studdar í ECMAScript 5 en getum notað nafnlaus föll
Einingar eru studdar í ECMAScript 6 með import og export

Immediately-invoked function expression

Eða IIFE, „iffy“
Sjálfkeyrandi nafnlaus föll
Býr til fall sem heldur hlutum utan global scope
Notað til að búa til einingar í JavaScript

Föll keyrð strax

((i) => {
  console.log(i * 2);
})(10);

// 20

Module pattern með iife

Nýtir lokun til að einangra forritið okkar
Aðeins nafnið á einingu í global scope, ekki öll föll eða allar breytur
Skilum hlut sem skilgreinir API forrits

const Module = (() => {
  const privateVar = 1;
  function privateMethod() {
    return privateVar;
  }

  return { // má ekki vera í sér línu!
    publicVar: 2,
    publicMethod: () => privateMethod(),
  };
})(); // IIFE, fáum strax hlut

JavaScript modules

ECMAScript 2015 skilgreinir JavaScript modules
Notar import og export syntax
Stuðningur hefur hægt og rólega aukist í vöfrum, getum notað í dag með ~94% stuðning

Flókið því import export hleður einingum asynchronously
Munum sjá hvernig rollup tólið leyfir okkur að nota á annan veg

Til að geta notað verðum við að:

Nota <script type="module" src=".."></script>
Vísa í import með endingu: module.js ekki module
- Sum tól leyfa okkur að sleppa endingu
Keyra vefþjón útaf CORS, öryggisstillingu í vafra sem leyfir okkur ekki að keyra gegnum file://

// module.js
export default {
  message: 'hello world',
};

// named export
export const message = 'hello named world';

// sækjum default export, gætum nefnt annað
import obj from './module.js';

// sækjum named export
import { message } from './module.js';

// sækjum named export undir öðru nafni
import { message as moduleMessage } from './module.js';

Notum almennt frekar named export en default export:

Betri stuðningur í ritlum, getum skrifað nafn og ritill býr til import sjálfkrafa
Auðveldara fyrir tree shaking reiknirit að sleppa föllum sem ekki eru notuð
Ef allt hefur nafn er auðveldara að refactora

Með JavaScript modules flækist ennfrekar hvernig við vísum í JavaScript
- 24 mismunandi leiðir til að vísa í JavaScript…
Almennt getum við sett <script type="module" src=".."></script> í <head> og það keyrir eftir að DOM er tilbúið

JavaScript modules dæmi