Skip to content

Latest commit

 

History

History
246 lines (142 loc) · 11.7 KB

9.common.md

File metadata and controls

246 lines (142 loc) · 11.7 KB

https://htmlacademy.ru/blog/articles/short-11

article

Элемент представляет собой законченную или автономную структуру в документе, странице, приложении или сайте, которая может независимо распространяться или повторно использоваться

Это может быть сообщение на форуме, статья в журнале или газете, запись в блоге, пользовательский комментарий, интерактивный виджет или гаджет или любой другой независимый элемент контента.

article - описание вариативности сущности, перечисление, эти перечисления взаимозаменяемые друг к другу, они эквивалентны

Когда нужно добавить вариативность в описание, когда есть какое-то неотъемлемое качество, которое вы хотите описать в нескольких вариантах

  • можно представить как связь 1...n
  • можно понимать как логическое ИЛИ

section

Общий раздел документа или приложения. Раздел в этом контексте представляет собой тематическую группу контента, обычно с заголовком.

Разработчикам рекомендуется использовать article элемент вместо section элемента, когда имеет смысл сгруппировать содержимое элемента.

section - неотъемлемое качество сущности, прямая зависимость.

Желание описать какое-либо неотъемлемое качество объекта, которое характеризует этот объект.

Если это качество вместе с секции вырвать, то объект потеряет изначальную свою суть и его смысл будет изменен

section - описание некоторого св-ва нашего контента, которую мы хотим выделить, т.е выделить неотъемлемую важную часть контента

  • 1...1
  • можно понимать как логическое И

header and footer

Это инструменты которые позволяют определить связи определнных частей контента, между основным контентом и побочным, например дата публикации контента, автор, адреса, лицензия

Определяют контент внутри секции (article,nav,figure,section,aside), для того чтобы анализирую секцию, определенный контент не связать с основным контентом

Весь контент в этой группе, не имеет никакого прямого отношения к выполнению задачи раскрытия основного контента текущий страницы (логических секций)

header - группирует тот контент, который не нужен для раскрытия осн. контента, но имеет прямую связь с основным контентом

footer - группирует тот контент, который не нужен для раскрытия осн. контента, но не имеет прямой связь с основным контентом

aside

Элемент представляет собой часть страницы, состоящую из содержимого, которое косвенно связано с содержимым вокруг aside элемента и может рассматриваться как отдельное от этого содержимого.

Задача максимально нивелировать влияние контента, содержащегося внутри него.

Контент, который заключен внутри него не стоит связывать с основным контентом, который был связан с секции

Модули, import/export

https://habr.com/ru/post/501198/

https://doka.guide/js/modules/

ES-модули — модульная система на уровне языка, которая появилась в спецификации ES2015.

Сейчас модули уже появились и поддерживаются, но их «становление» проходило медленно. Существовало несколько версий модульных систем: AMD, CommonJS, UMD и ES-модули.

AMD

AMD (asynchronous module definition) — асинхронное определение модулей, одна из первых попыток создать систему модулей.

// require.js,
// Например, определение модуля-объекта с данными:
define(function() {
  return {
    color: 'black',
    size: 'unisize'
  }
})

// Также можно было экспортировать и функции:
define(function() {
  return {
    sum: function(a, b) {
      return a + b
    },
  }
})

CommonJS

CommonJS — это модульная система, которая пришла вместе с Node.js.

У неё несколько другое определение импортов и экспортов:

const useFullConstant = 42

// Чтобы экспортировать функциональность,
// назвав её каким-то именем,
// используют именованные экспорты:

exports.useFullConstant = useFullConstant

// А чтобы экспортировать что-то из модуля,
// как одну сущность —
// экспорты по умолчанию:
module.exports = useFullConstant

// Для импорта функциональности
// используется require:
const { useFullConstant } = require('./other-module.js')
const useFullConstant = require('./other-module.js')

UMD

UMD (Universal Module Definition) — предлагается как универсальная модульная система, совместима и с AMD, и с CommonJS.

  • AMD - для клинта
  • Common js - для сервра
  • UMD - для клиента и для сервера

когда пишем require или imports нужно понимать где это будет работать на сервере или на клиенте

ECMAScript или ES-модули

В ES-модулях для экспорта используется ключевое слово export, а для импорта — import.

Особенности в браузере

<body>
  <script src="module1.js" type="module"></script>
  <script src="module2.js" type="module"></script>
</body>
  1. Такие скрипты всегда будут отложенными.

Это значит, что загрузка модулей не будет блокировать отрисовку страницы, но их выполнение начнётся только после того, как документ загрузится полностью. Кроме этого сохранится порядок выполнения.

  1. Внешние скрипты с type='module' загрузятся и выполнятся только один раз.

  2. Должен быть прописан путь до файла.

import user from 'user' // Неправильно...

// Должен быть либо абсолютный путь:
import user from 'https://some-site.com/js/user.js'

// ...Либо относительный:
import user from './user.js'

Модули и сборка

https://doka.guide/tools/webpack/

https://doka.guide/js/language-versions/

Task runner

у gulp нет задачи связать ресурсы, задача получить файл на вход и получить что-то на выходе

Сборщики

все ресурсы перелинкованы, все js связаны, все картинки, шрифты и т.д будут связаны правильными ссылками

В браузере модули сами по себе используются пока редко. Сейчас чаще используются инструменты сборки типа Gulp, Webpack, Parcel, Rollup и другие.

Код, использующий импорты и экспорты, или использующий скрипты с type="module", «прогоняется» через этот инструмент, соединяется в бандлы, минифицируется и уже в таком виде отправляется в продакшен.

https://github.com/WeAreAthlon/frontend-webpack-boilerplate

https://github.com/webtime-studio/create-html-boilerplate

https://create-react-app.dev/docs/getting-started

Code Style

https://doka.guide/js/code-style/

Стиль кода (code style) — это набор правил, как писать код в проекте. Они могут включать прямые рекомендации, примеры кода, ссылки на лучшие практики, «рецепты», что делать в спорных ситуациях.

https://google.github.io/styleguide/jsguide.html

https://airbnb.io/javascript/

https://github.com/rwaldron/idiomatic.js/tree/master/translations/ru_RU

Prettier

Prettier при сохранении превращает «сырой» код (1 на примере ниже) в код с форматированием (2):

class SomeClass {constructor(mass,acceleration,force) {this.mass = mass
this.acceleration = acceleration;this.force = force}
}

class SomeClass {
  constructor(mass, acceleration, force) {
    this.mass = mass;
    this.acceleration = acceleration;
    this.force = force;
  }
}

В итоге с форматтерами:

  • нам не требуется руками расставлять точки с запятой;
  • не нужно заменять вручную одни кавычки на другие; = не за чем спорить о табах и пробелах ;–)

https://www.digitalocean.com/community/tutorials/how-to-format-code-with-prettier-in-visual-studio-code

https://prettier.io/docs/en/editors.html

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

Линтеры

Форматтеры по сути следят за синтаксисом (точки с запятой, кавычки, табы). Для более высокоуровневых правил есть статические анализаторы кода — линтеры.

Статический анализатор кода, линтер — программа, которая проверяет код на соответствие стандартам или каким-то правилам.

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

https://eslint.org/docs/user-guide/configuring/

https://code.visualstudio.com/docs/languages/jsconfig

https://astexplorer.net/