• 10 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 02/03/2022

Maîtriser la création de vos objets avec les Creational Design Pattern

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Compétences évaluées

  • Maîtriser la création d’objets avec les Creational Design Patterns
  • Question 1

    Le Constructor Pattern est le premier pattern que vous avez étudié dans ce cours. Il fait partie des Creational Design Patterns.

    À quoi peut nous servir un Constructor Pattern ?

    Attention, plusieurs réponses sont possibles.
    • Écouter plus facilement des objets.

    • Ajouter de nouvelles fonctionnalités à un objet.

    • Formater plus facilement des données.

    • Optimiser la mémoire et la connexion aux bases de données.

    • Migrer une API.

    • Faciliter la création d’objets.

  • Question 2

    Pour cette question, vous aurez besoin d’ouvrir le projet et de vous positionner sur la branche  partie-2/quiz/question-2  . Vous pouvez lancer le projet avec LiveServer. Vous devriez normalement avoir le résultat ci-dessous :

    Screenshot du résultat obtenu. En titre Filmo Patterns. Endessous un carré rouge. Et encore en-dessous, un bouton Click me. Cliquez-moi
    Le résultat obtenu avec le bouton Cliquez-moi

    Nous souhaitons mettre en place un effet de "disparition". Autrement dit, au moment où le bouton “Click me” est cliqué, la div contenant la classe   box  doit disparaître. Le fichier   css/main.css  contient une classe   .fade-in  .

    Quel code ci-dessous correspond à une implémentation d’un Constructor Pattern ? Souvenez-vous que la solution doit être la plus générique et réutilisable possible.

    • class Effect {
      constructor() {
      this._$eventNode = document.querySelector('.btn')
      this._$target = document.querySelector('.box')
      this._effect = 'fade-in'
      }
      bindEventOnClick() {
      this._$eventNode.addEventListener('click', () => {
      this._$target.classList.add(this._effect)
      })
      }
      }
      const FadeInEffect = new Effect()
      FadeInEffect.bindEventOnClick()
    • class Effect {
      constructor($eventNode, $target, effect) {
      this._$eventNode = $eventNode
      this._$target = $target
      this._effect = effect
      }
      bindEventOnClick() {
      this._$eventNode.addEventListener('click', () => {
      this._$target.classList.add(this._effect)
      })
      }
      }
      const FadeInEffect = new Effect(
      document.querySelector('.btn'),
      document.querySelector('.box'),
      'fade-in'
      )
      FadeInEffect.bindEventOnClick()
    • class Effect {
      bindEventOnClick() {
      document.querySelector('.btn').addEventListener('click', () => {
      document.querySelector('.box').classList.add('fade-in')
      })
      }
      }
      const FadeInEffect = new Effect()
      FadeInEffect.bindEventOnClick()
    • class Effect {
      constructor() {
      this._$eventNode = document.querySelector('.btn')
      this._$target = document.querySelector('.box')
      this._effect = 'fade-in'
      }
      bindEventOnClick() {
      document.querySelector('.btn').addEventListener('click', () => {
      document.querySelector('.box').classList.add('fade-in')
      })
      }
      }
      const FadeInEffect = new Effect()
      FadeInEffect.bindEventOnClick()
  • Question 3

    Pour cette question, vous aurez besoin d’ouvrir le projet et de vous positionner sur la branche  partie-2/quiz/question-3  . Vous pouvez lancer le projet avec LiveServer, puis ouvrez le fichier   /js/App.js  .

    Il contient un objet App qui récupère des données depuis la fonction   fetchData  et les affiche ensuite dans la console. On vous demande d’implémenter un Constructor Pattern pour formater la donnée.

    Quelle proposition ci-dessous correspond à une implémentation valide d’un Constructor Pattern ?

    • class Movie {
      constructor(data) {
      this._data = data
      }
      get id() {
      return this._data.id
      }
      get title() {
      return this._data.title
      }
      get img() {
      return this._data.img
      }
      get rating() {
      return this._data.rating
      }
      }
    • class Movie {
      constructor(data) {
      this._id = data._id
      this._title = data._title
      this._img = data._img
      this._rating = data._rating
      }
      get id() {
      return this._id
      }
      get title() {
      return this._title
      }
      get img() {
      return this._img
      }
      get rating() {
      return this._rating
      }
      }
    • class Movie {
      constructor(data) {
      this._data = data
      }
      get data() {
      return this._data
      }
      }
    • class Movie {
      constructor(data) {
      this._id = data.id
      this._title = data.title
      this._img = data.img
      this._rating = data.rating
      }
      get id() {
      return this._id
      }
      get title() {
      return this._title
      }
      get img() {
      return this._img
      }
      get rating() {
      return this._rating
      }
      }