D.3. Propriétés et méthodes statiques : La classe PageRenderer

js/PageRenderer.js

+export default class PageRenderer {
+	static titleElement;
+	static contentElement;
+
+	static renderPage(page) {
+		if (this.titleElement) {
+			this.titleElement.innerHTML = page.renderTitle();
+		}
+		if (this.contentElement) {
+			this.contentElement.innerHTML = page.render();
+		}
+	}
+}

js/main.js

 import data from './data.js';
 import Component from './components/Component.js';
 import HomePage from './pages/HomePage.js';
-
-const title = new Component('h1', null, ['La', ' ', 'carte']);
-document.querySelector('.pageTitle').innerHTML = title.render();
+import PageRenderer from './PageRenderer.js';
 
 const homePage = new HomePage(data);
-document.querySelector('.pizzasContainer').innerHTML = homePage.render();
+
+PageRenderer.titleElement = document.querySelector('.pageTitle');
+PageRenderer.contentElement = document.querySelector('.pizzasContainer');
+PageRenderer.renderPage(homePage);

js/pages/HomePage.js

-import Component from '../components/Component.js';
+import Page from './Page.js';
 import PizzaThumbnail from '../components/PizzaThumbnail.js';
 
-export default class HomePage extends Component {
+export default class HomePage extends Page {
 	constructor(pizzas) {
 		super(
-			'section',
-			null,
+			'La carte',
 			pizzas.map(pizza => new PizzaThumbnail(pizza))
 		);
 	}

js/pages/Page.js

+import Component from '../components/Component';
+
+export default class Page extends Component {
+	title = '';
+
+	constructor(title, children) {
+		super('section', null, children);
+		this.title = title;
+	}
+
+	renderTitle() {
+		return `<h1>${this.title}</h1>`;
+	}
+}