refactoring

classes/blocks.js

@@ -0,0 +1,61 @@
+import { col, row } from '../src/utils.js'
+
+export class Block {
+  constructor(value, options) {
+    this.value = value
+    this.options = options
+  }
+
+  toHTML() {
+    throw new Error(
+      'Для данного блока не найден подходящий метод для генерации HTML кода!'
+    )
+  }
+}
+
+export class TitleBlock extends Block {
+  constructor(value, options) {
+    super(value, options)
+  }
+
+  toHTML() {
+    const { options, value } = this
+    return row(col(`<${options.tag}>${value}</${options.tag}>`), options.styles)
+  }
+}
+
+export class TextBlock extends Block {
+  constructor(value, options) {
+    super(value, options)
+  }
+
+  toHTML() {
+    const { options, value } = this
+    return row(col(`<p style="margin-bottom: 0;">${value}</p>`), options.styles)
+  }
+}
+
+export class TextColumnsBlock extends Block {
+  constructor(value, options) {
+    super(value, options)
+  }
+
+  toHTML() {
+    const { options, value } = this
+    return row(value.map((item) => col(item)).join(''), options.styles)
+  }
+}
+
+export class ImageBlock extends Block {
+  constructor(value, options) {
+    super(value, options)
+  }
+
+  toHTML() {
+    const { alt, styles } = this.options
+    return row(
+      col(`<img src="./img/${this.value}" alt="${alt}" height="250">`),
+      styles
+    )
+  }
+}

src/index.js

@@ -1,13 +1,4 @@
 import './styles/main.css'
 import { model } from './model.js'
-import * as Templates from './templates.js'
 
-let generateHTML = (model) => {
+document.querySelector('#site').insertAdjacentHTML('afterbegin', model.join(''))
-  return model.map((block) => {
-    if (Templates[block.type]) return Templates[block.type](block)
-  })
-}
-
-document
-  .querySelector('#site')
-  .insertAdjacentHTML('afterbegin', generateHTML(model).join(''))

src/model.js

@@ -1,33 +1,27 @@
+import {
+  TitleBlock,
+  TextBlock,
+  TextColumnsBlock,
+  ImageBlock
+} from '../classes/blocks.js'
+
 export const model = [
-  {
+  new TitleBlock('Алексей Плещеев', {
-    type: 'title',
+    styles: `color: #fff; text-align: center; font-family: Georgia, serif;
-    value: 'Алексей Плещеев',
-    options: {
-      styles: `color: #fff; text-align: center; font-family: Georgia, serif;
         font-size: 25px; letter-spacing: 2px; word-spacing: 2px;
         font-variant: small-caps; padding-top: 50px`,
-      tag: 'h2'
+    tag: 'h2'
-    }
+  }).toHTML(),
-  },
+  new TextBlock('Осень наступила, высохли цветы', {
-  {
+    styles: `text-align: center; font-family: Arial, Helvetica, sans-serif;
-    type: 'text',
-    value: 'Осень наступила, высохли цветы',
-    options: {
-      styles: `text-align: center; font-family: Arial, Helvetica, sans-serif;
         font-size: 20px; font-weight: 700; padding-top: 20px`
-    }
+  }).toHTML(),
-  },
+  new ImageBlock('golden_autumn.jpg', {
-  {
+    styles: `text-align: center; padding-top: 20px`,
-    type: 'image',
+    alt: 'Иван Иванович Шишкин – Ранняя осень 1889'
-    value: 'golden_autumn.jpg',
+  }).toHTML(),
-    options: {
+  new TextColumnsBlock(
-      styles: `text-align: center; padding-top: 20px`,
+    [
-      description: 'Иван Иванович Шишкин – Ранняя осень 1889'
-    }
-  },
-  {
-    type: 'textColumns',
-    value: [
       `      Осень наступила,
       Высохли цветы,
       И глядят уныло
@@ -48,10 +42,10 @@ export const model = [
       Птички улетели
       В теплые края.`
     ],
-    options: {
+    {
       styles: `white-space: pre-wrap; text-align: justify; padding-top: 50px;
         font-family: Verdana; font-size: 16px; font-weight: 700; 
         padding-bottom: 200px; padding-left: 150px; padding-right: 100px`
     }
-  }
+  ).toHTML()
 ]

src/templates.js

@@ -1,24 +0,0 @@
-import { col, row } from './utils.js'
-
-export const title = (block) => {
-  const { options, value } = block
-  return row(col(`<${options.tag}>${value}</${options.tag}>`), options.styles)
-}
-
-export const text = (block) => {
-  const { options, value } = block
-  return row(col(`<p style="margin-bottom: 0;">${value}</p>`), options.styles)
-}
-
-export const textColumns = (block) => {
-  const { options, value } = block
-  return row(value.map((item) => col(item)).join(''), options.styles)
-}
-
-export const image = (block) => {
-  const { description, styles } = block.options
-  return row(
-    col(`<img src="./img/${block.value}" alt="${description}" height="250" />`),
-    styles
-  )
-}