Salut,
Ton réflexe de vouloir factoriser ton code est une très bonne chose !
Cependant, il existe des techniques simples et efficaces qui permettent d'éviter les répétitions tout en clarifiant le code. Dans ta solution, tu évites effectivement les répétitions, mais ton code reste en un seul bloc. Découper son code permet de le rendre plus clair et plus simple. Cela empêche également d'ajouter des bugs lors de changements futurs. Chaque partie étant indépendante, cela limite les effets de bord.
La première chose à faire lorsque l'on veut factoriser son code est de le découper en fonctions :
function addButton(id, text, action) {
const button = document.createElement('button')
button.id = id
button.innerHTML = text
button.setAttribute('onclick', action)
document.body.appendChild(button)
}
function addColorButton(id, text, action) {
const button = document.createElement('input')
button.setAttribute('type', 'color')
button.id = id
button.innerHTML = text
button.setAttribute('onclick', action)
document.body.appendChild(button)
}
function editerPage() {
addButton('titre', 'Titre de l\'onglet de la page', 'titre()')
addButton('h1', 'Titre h1 de la page', 'h1()')
addButton('p', 'Paragraphe de la page', 'p()')
addColorButton('input', 'Changer la couleur du titre h1', 'couleurH1()')
}
editerPage()
Ensuite on voit ce qu'on peut regrouper :
function addAttributes(element, id, text, action) {
element.id = id
element.innerHTML = text
element.setAttribute('onclick', action)
document.body.appendChild(element)
}
function addButton(id, text, action) {
const button = document.createElement('button')
addAttributes(button, id, text, action)
}
function addColorButton(id, text, action) {
const button = document.createElement('input')
button.setAttribute('type', 'color')
addAttributes(button, id, text, action)
}
Idéalement, une fonction devrait avoir un minimum d'arguments pour rester facilement compréhensible. On peut donc regrouper la liste d'attributs dans une classe :
class AttributeList {
constructor(id, text, action) {
this.id = id
this.text = text
this.action = action
}
}
function addAttributes(element, attributes) {
element.id = attributes.id
element.innerHTML = attributes.text
element.setAttribute('onclick', attributes.action)
document.body.appendChild(element)
}
function addButton(attributes) {
const button = document.createElement('button')
addAttributes(button, attributes)
}
function addColorButton(attributes) {
const button = document.createElement('input')
button.setAttribute('type', 'color')
addAttributes(button, attributes)
}
function editerPage() {
addButton(new AttributeList('titre', 'Titre de l\'onglet de la page', 'titre()'))
addButton(new AttributeList('h1', 'Titre h1 de la page', 'h1()'))
addButton(new AttributeList('p', 'Paragraphe de la page', 'p()'))
addColorButton(new AttributeList('input', 'Changer la couleur du titre h1', 'couleurH1()'))
}
editerPage()
On peut séparer les données des fonctions et utiliser une boucle pour éviter de répéter l'appel à addButton :
function editerPage() {
const elements = {
buttons: [
new AttributeList('titre', 'Titre de l\'onglet de la page', 'titre()'),
new AttributeList('h1', 'Titre h1 de la page', 'h1()'),
new AttributeList('p', 'Paragraphe de la page', 'p()')
],
colorButtons: [
new AttributeList('input', 'Changer la couleur du titre h1', 'couleurH1()')
]
}
elements.buttons.forEach(attributes => addButton(attributes))
elements.colorButtons.forEach(attributes => addColorButton(attributes))
}
Enfin, on peut regrouper les fonctions dans des classes afin d'avoir un code plus facilement corrigeable et évolutif :
class AttributeList {
constructor(id, text, action) {
this.id = id
this.text = text
this.action = action
}
}
class Element {
constructor(attributes) {
this.element = this.createElement()
this.addAttributes(attributes)
document.body.appendChild(this.element)
}
addAttributes(attributes) {
this.element.id = attributes.id
this.element.innerHTML = attributes.text
this.element.setAttribute('onclick', attributes.action)
}
}
class Button extends Element {
createElement() {
return document.createElement('button')
}
}
class ColorButton extends Element {
createElement() {
const button = document.createElement('input')
button.setAttribute('type', 'color')
return button
}
}
function createButtons(buttons) {
buttons.forEach(attributes => new Button(attributes))
}
function createColorButtons(buttons) {
buttons.forEach(attributes => new ColorButton(attributes))
}
function editerPage() {
const elements = {
buttons: [
new AttributeList('titre', 'Titre de l\'onglet de la page', 'titre()'),
new AttributeList('h1', 'Titre h1 de la page', 'h1()'),
new AttributeList('p', 'Paragraphe de la page', 'p()')
],
colorButtons: [
new AttributeList('input', 'Changer la couleur du titre h1', 'couleurH1()')
]
}
createButtons(elements.buttons)
createColorButtons(elements.colorButtons)
}
editerPage()
. Je vois ça demain ou lundi. Merci beaucoup !!
: