dupontES6: module

index.html

<!doctype html>

<html>

<head>

<title>My project</title>

</head>

<body>

</body>

</html>

index.js

import retrieveContent from './query.js';

console.log("here they are");

async function showContent() {

try {

const content = await retrieveContent();

let ul = document.createElement('ul');

content.forEach(element => {

let li = document.createElement('li');

li.innerText = element;

ul.appendChild(li);

});

document.getElementsByTagName('body')[0].appendChild(ul);

} catch (e) {

console.log('Error', e);

}

showContent();

query.js

export default async function retrieveContent() {

const url = "https://baconipsum.com/api/?type=all-meat&paras=2&start-with-lorem=1";

const response = await fetch(url);

return response.json();

}

Création du fichier helper.js

/**
* querySelector wrapper
*
* @param {string} selector Selector to query
* @param {Element} [scope] Optional scope element for the selector
*/
export function qs(selector, scope = document) {
return scope.querySelector(selector);
}

/**
* addEventListener wrapper
*
* @param {Element|Window} target Target Element
* @param {string} type Event name to bind to
* @param {Function} callback Event callback
* @param {boolean} [capture] Capture the event
*/
export function $on(target, type, callback, capture) {
target.addEventListener(type, callback, !!capture);
}

/**
* Attach a handler to an event for all elements matching a selector.
*
* @param {Element} target Element which the event must bubble to
* @param {string} selector Selector to match
* @param {string} type Event name
* @param {Function} handler Function called when the event bubbles to target
* from an element matching selector
* @param {boolean} [capture] Capture the event
*/
export function $delegate(target, selector, type, handler, capture) {
const dispatchEvent = event => {
const targetElement = event.target;
const potentialElements = target.querySelectorAll(selector);
let i = potentialElements.length;

while (i--) {
if (potentialElements[i] === targetElement) {
handler.call(targetElement, event);
break;
}
}
};

$on(target, type, dispatchEvent, !!capture);
}

/**
* Encode less-than and ampersand characters with entity codes to make user-
* provided text safe to parse as HTML.
*
* @param {string} s String to escape
*
* @returns {string} String with unsafe characters escaped with entity codes
*/
export const escapeForHTML = s => s.replace(/[&<]/g, c => c === '&' ? '&' : '<');

Utilisation de la fonction $on dans un fichier

Voici la structure de l'application

avec dans le répertoire src :

Pour utiliser la fonction $on dans app.js on écrit :

import {$on} from './helpers.js';

Dans le fichier index.html, on utilise le code

<script src="src/app.js" type="module"></script>

Serveur

on peut utiliser simplement l'extension sous chrome.

Exemple en ligne

en action

dupontES6

Pages

modules