Что такое чанки в программировании
Перейти к содержимому

Что такое чанки в программировании

  • автор:

MODx/Терминология

MODx это очень гибкая система управления контентом и она может быть настроена множеством разных способов.

Наши новые пользователи могут быть сбиты с толку терминологией, но на практике эта терминология достаточно распространена.

У редактора контента есть два способа, чтобы добавить содержимое на сайт:

  • в специальную область для контента
  • в другие области, которые мы называем Переменные уровня документа (обычно это боковые блоки информации, но это могут быть любые элементы веб-страницы).

Также есть два других важных отличительных понятия MODx, о которых вам следует знать:

  • Чанки (Chunks) — это часто используемые фрагменты HTML-кода. Вы можете использовать Чанки как в специальной области для контента, так и как часть переменных уровня документа. Например, вы можете поместить свою контактную информацию в тело Чанка, а затем вставлять этот Чанк везде где вам требуется без необходимости писать её каждый раз заново.
  • Сниппеты (Snippets) — это небольшие части вашей веб-страницы, требующие некоторой динамики. Например, меню или форма поиска. Сниппеты могут быть использованы как в рамках Шаблона, или в специальной области контента, в составе Чанков или как Переменные уровня документа.

И Чанки, и Сниппеты могут быть добавлены сразу в шаблон вашим веб-разработчиком, или вы можете сами добавить их потом, когда будете заполнять специальную область для контента или создать Переменные уровня документа.

А теперь все сказанное вместе. Для примера рассмотрим абстрактный сайт:

  • В шаблоне заданы основы функциональности веб-страниц вашего сайта. Ваш веб-разработчик может определить где должен располагаться контент общий для каждой веб-страницы сайта. В нашем примере это заголовок и логотип, которые закреплены в шаблоне на специальных местах.
  • У шаблона есть специальная область для контента, помеченная на картинке фиолетовой рамкой, контент добавляется с помощью специальной Переменной уровня документа простым вызовом [*content*]. Содержимое документа заполняется в интерфейсе редактора контента.
  • Шаблон содержит и специальные тэги MODx для вставки Сниппетов. В нашем примере это два Сниппета, помечены синей рамкой, они добавлены в шаблон вызовом [[ИмяСниппета]]
  • Также в примере используются специальные переменные шаблона, которые позволяют вам вставить текст, картинку или любой другой элемент страницы, которые не должны располагаться в основной области для контента. На картинке эти элементы помечены зеленой рамкой и добавятся они в шаблон вызовом [*ИмяПеременнойШаблона*]
  • Редактор сайта может вставить предопределенные части текста или HTML-кода в область контента или в тело переменных шаблона, это Чанки. В нашем примере есть два Чанка, они помечены красным цветом. Чанки добавляются редактором контента через редактирование области контента или вставляя их в тело переменных шаблона.

Что такое «чанки»?

Author24 — интернет-сервис помощи студентам

Что такое файловый буфер? Что такое режим (модификатор) доступа, при работе с файлами?
Что такое файловый буфер? Что такое режим (модификатор) доступа, при работе с файлами?

Что такое IIS и что такое PWS? Почему одно без другого не работает?
вот уже второй день пытаюсь немного разобраться в АСП. накидал небольшую тестовую страничку. но с.

Что такое напряжение и что такое сила тока с позиции заряженных частиц
Объясните пожалуйста, что такое напряжение и что такое сила тока с позиции заряженных частиц.

Что такое рекурсивный тип данных? Что такое конструкция рекурсивного типа?
Что такое рекурсивный тип данных? Что такое конструкция рекурсивного типа?

Что такое монитор и что такое мьютекс? Это же разные вещи?
Здравствуйте. В разных айти-статьях по-разному используют эти термины, причём часто их путают друг.

Всегда онлайн
1084 / 788 / 295
Регистрация: 07.04.2013
Сообщений: 2,703
Peskova_Sveta, вы про чанки в вебпаке?
Coding is art

Эксперт JS

536 / 420 / 153
Регистрация: 04.09.2013
Сообщений: 1,056

Лучший ответ

Сообщение было отмечено Peskova_Sveta как решение

Решение

чанк — часть чего-либо. сумма всех чанков = нечто целое.

Примеры:
1) представим что есть некий js код для фронтенда, исходники. при компиляции «целый исходный код» может быть раздроблен на части (чанки) для разных, например, страниц. Т.е. на главной странице будет загружен чанк с кодом для главной страницы. Перейдя на страницу контактов будет подгружен чанк, относящийся к странице контактов. Так же может быть создан чанк который будет содержать код, который будет использоваться на всех страницах, при этом этот чанк не будет повторяться в других.. (ну т.е. если код попал в один из чанков, он никогда не будет в другом чанке).

2) если рассмотреть пример с чтением файлов в ноде, то при использовании event emitter’a мы будем получать событие, которое будет тригерить эвент с «частью прочитаном в файле». Ну т.е. мы говорим что-то типо

1 2 3 4
const eventEmitter = fs.read('file.txt'); let file = ''; eventEmitter.on('data', (chunk) => file += chunk); eventEmitter.on('end', () => console.log('file', file));

чтение файла в данной ситуации происходит «частями» (чанками) где первый чанк это начало файла который мы читаем, а последний — конец файла.. он может быть ограничен каким-то определённым кол-вом байт и т.п., но суть в том, что это часть файла который мы читаем, а сумма (по порядку) всех чанков = содержимому файла который мы читаем.

Изучаем потоки, чанки и ищем конец

Примечание: ниже перевод статьи «On Streaming, Chunking, and Finding the End», в которой авторы рассматривают процесс передачи информации по HTTP-соединению и возможности для ускорения этого процесса. Мои комментарии далее курсивом.

Два способа передачи

Как и в большинстве механизмов передачи данных, в HTTP существует два основных способа отправить сообщение: «все и сразу» или «по частям». Другими словами, в HTTP есть возможность отправлять данные до тех пор, пока еще есть хотя бы что-то, что можно отправить, либо отправить все данные как одну логическую единицу, указав предварительно ее размер.

Если вы занимаетесь веб-разработками достаточно продолжительное время, скорее всего, вы уже знаете, как работает сброс буфера (flush) на стороне сервера. Этот метод позволяет начать отправку части данных пользователю, в то время как скрипт может продолжать выполнять некоторые, достаточно медленные, действия (скажем, ресурсоемкий запрос к базе данных). Если вы уже применяли эту возможность, тогда вы, вероятно, использовали преимущества потокового (streaming) механизма, хотя могли и не знать всех деталей работы HTTP-протокола.

Как работать с чанками в ModX Revolution?

Добро пожаловать на 5 урок MODX Revolution для новичков. В предыдущем уроке мы начали рассматривать работу с шаблонами в MODX Revolution. Мы начали со статичного HTML/CSS шаблона и перенесли его в нашу установку MODX Revolution, изменили пути к файлам и начали изучать синтаксис тегов MODX Revolution и как его использовать. В этом уроке мы продолжим работу над нашим шаблоном и изучим концепцию чанков.

В данном уроке я использую шаблон 7-in-1 Business Success Site студии Themeforest. Если вы работаете над шаблоном, который вы скачали или сделали сами, то это даже лучше. Подход к построению сайта одинаков вне зависимости от используемого шаблона.

Давайте начнем. Наш сайт выглядит сейчас точно так же как и загруженный шаблон, потому что мы изменили все пути к css, js и image файлам. Давайте рассмотрим что же такое чанки

Чанки MODX Revolution

Чанки — это куски HTML кода или текста. Важно отметить что чанк — это чистый HTML код без всякой логики. Чанк не может содержать PHP код, он просто не будет выполнятся. PHP код необходимо вставлять в сниппет (разберёмся в этом в следующих уроках). Этот сниппет потом может быть вызван в чанке. В то же время чанк сам по себе не может содержать всередине чистый PHP.

Для чего использовать чанки?

Вы можете использовать чанки для различных целей. Некоторые примеры использования чанков включают организацию вашего шаблона в управляемые части, содержащие HTML или текст, который будет использован снова и снова в вашем сайте, а также для хранения мини-шаблонов для ваших меню и др. Сейчас это может быть не совсем ясно, но ситуация прояснится по ходу дела.

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

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

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

Видно, что этот шаблон разделён на три различные секции: шапка, подвал и средняя область (по такому принципу делятся почти все шаблоны). Соответственно можно поделить наш шаблон на эти три части. После разделения мы можем далее еще разделить эти секции.

Поэтому первой вещью, что мы сделаем — это создадим два новых чанка, которые назовём: 7in1-header и 7in1-footer.

Для создания чанка зайдем в менеджер и в дереве слева зайдем во вкладку Elements. Можно создать чанк двумя способами: правым кликом на Chunk и выбрать“New Chunk” или кликнуть на иконку Chunk.

Создание чанка в MODX Revolution

В появившемся окне вводим необходимую информацию — имя чанка, описание и категория, если это необходимо.

Ввод информации в чанк

Пока сохраним этот чанк, чуть позже вставим туда код.

Давайте продолжим и создадим чанк для подвала.

Сейчас если мы взглянем на дерево ресурсов, то увидим наши два новые чанка в разделе Чанки.

Новые чанки в дереве MODX Revolution

Итак, наши чанки готовы к использованию. Всё, что нужно сделать, это вырезать код из секции нашего шаблона и вставить в чанки. В моём случае, я открою шаблон 7in1 Home, который мы создали в предыдущем уроке и вырежу весь код между отрывающим и закрывающим тегами . Далее я вставлю этот код в средину чанка 7in1-header, который я только что создал и сохраню его.

Если мы теперь посмотрим на наш сайт, то увидим, что он не выглядит так, как должен выглядет.

Новый шаблон MODX Revolution

Это случилось потому что сайт больше не видит наших css и js файлов, так как мы вырезали всю информацию об этом из нашего шаблона. Так как эта информация теперь содержится в чанке, то нам необходимо просто вызвать чанк в шапке шаблона.

Как вызывать чанк в MODX Revolution

Синтаксис чанков в MODX Revolution очень прост:

[[$chunkName]]

В нашем случае мы просто перейдём в наш шаблон и разместим там вызов нашего чанка 7in1-header в области, где мы убрали код шапки. Таким образом верхняя часть кода нашего шаблона будет иметь следующий вид:

[[$7in1-header]]

Если сейчас вы перезагрузите страницу, то увидите, что она примет нормальный вид. Это значит, что парсер MODx видит вызов чанка, он берёт его содержимое и размещает в области, где сделан вызов. Если вы знакомы с программированием PHP, то вы увидите схожесть с концепцией использования включения файлов.

Отлично, теперь мы знаем что делать дальше и сделаем ту же процедуру с подвалом. В моём случае я выделю весь код от начала div подвала до закрывающего тега и размещу его в чанке 7in1-footer, который мы создали. Затем размещу вызов это чанка в нужном месте. Теперь конец кода моего шаблона выглядит вот так:

[[$7in1-footer]]

Снова напомню, можете делать что угодно и как угодно, можете вообще не делить ваш шаблон :). цель данной демонстрации — это показать как работать с чанками и какой их синтаксис при вызове чанков в шаблоне.

Для моих целей, я собираюсь еще поделить мой шаблон и добавить пару чанков. Эта секция шаблона появляется в основном на каждой странице вебсайта:

Подвал шаблона MODX Revolution

Я думаю разумно разместить код для этой секции в собственном чанке и далее вызывать его в наших шаблонах. Я назову этот чанк 7in1-bottomwidgets и таким образом нижняя часть кода моего шаблона приобретёт следующий вид:

[[$7in1-bottomwidgets]] [[$7in1-footer]]

Как вы видите, в зависимости от внешнего вида нашего шаблона, мы можем делить его дальше и дальше в отдельные чанки либо же не делить совсем.

Ну вот наш небольшой урок подошёл к концу.

Похожие материалы:

  • Один простой трюк, который способен повысить конверсию сайта
  • Яндекс запускает новую версию сервиса Вебмастер (Бета)
  • Как вывести постраничную навигацию в MODX Revolution с помощью GetPage?

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *