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

Чанки

Чанки — это кусочки статического текста, которые вы можете повторно использовать на своем сайте. Хотя чанки не могут содержать никакой логики напрямую, тем не менее, они могут содержать вызовы сниппетов, которые представляют собой исполняемый PHP код, который в свою очередь производит динамический вывод.

• Главная
• MODx
• Документация
• Создание сайтов на MODx
• Элементы

Оглавление

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

Создание чанка

Прежде чем использовать чанк, вы должны сначала создать его и дать ему имя. Перейдите во вкладку дерева «Элементы», выберите «Чанки», затем «Новый чанк» или «Быстро создать чанк».

Использование чанка

Для использования чанка, вам необходимо обратиться к нему по его имени:

Этот плейсхолдер заменится содержимым чанка.

Вы также можете передать свойства в чанк. Скажем, у вас был фрагмент с именем intro и содержимым:

Вы можете заполнить эти значения следующим образом:

В итоге вы увидите следующий вывод:

Обработка чанка через API MODx

Чанки также часто используются для форматирования вывода сниппетов. Чанк может быть обработан из сниппета с помощью функции process(); . В качестве примера возьмем чанк со содержимым ниже и именем rowTpl:

Сниппет ниже, извлекает содержимое чанка и обрабатывает его с массивом свойств для всех опубликованных ресурсов и возвращает отформатированные результаты в виде таблицы, устанавливая класс «alt» для четных строк:

Модификация чанка через API MODx

Чанками также можно управлять с помощью API MODx:

Благодарность автору

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

Один из самых популярных способов поблагодарить автора, воспользоваться сервисом Яндекс.Деньги.

Чанки

Чанки — это кусочки статического текста, которые вы можете повторно использовать на своем сайте. По функциям они похожи на файлы или «блоки» в других системах управления контентом. Типичными примерами чанков могут быть ваша контактная информация или уведомление об авторских правах. Хотя чанки не могут содержать никакой логики напрямую, они могут содержать вызовы Сниппетов, которые являются исполняемыми битами кода PHP, которые производят динамический вывод.

Создание

Прежде чем вы сможете использовать чанк, вы должны сначала создать и назвать его, вставив текст в менеджер MODX (Элементы —> Чанки —> Новый чанк):

Использование

Чтобы использовать Чанк, вы ссылаетесь на него по имени в ваших шаблонах или в содержимом вашей страницы.

Эта ссылка затем заменяется содержимым Чанка.

Вы также можете передать свойства в чанк. Скажем, у вас был чанк с именем intro и содержимым:

Вы можете заполнить эти значения с:

Который будет выводить:

Привет, George. У тебя есть 12 сообщений.

Вы могли бы сделать еще один шаг, добавив Переменные шаблона что позволяет пользователю указать свое имя для каждого ресурса:

или в самом чанке:

Обработка чанка через API

Чанки также часто используются для форматирования вывода сниппетов. Чанк может быть обработан из сниппета с помощью функции process(); например, с учетом следующего чанка с именем rowTpl:

следующий сниппет кода извлекает его и обрабатывает его с массивом свойств для всех опубликованных ресурсов и возвращает отформатированные результаты в виде таблицы, устанавливая класс «alt» для четных строк:

What are module, chunk and bundle in webpack?

I can’t understand concepts like module, chunk and bundle very well.

In the above configuration, are only-dev-server.js and foo.js both chunks? Are foo and bar both bundles? Are foo.js and bar.js both modules?

3 Answers 3

After spending a day digging into this I wanted to provide what I believe is a slightly more accurate answer. The webpack team has published a useful (and tricky to notice) glossary.

I believe the confusion about chunks and bundles is that the terms can refer to the same thing, but should be used at different points in the webpack process.

webpack glossary definitions

Module: Discrete chunks of functionality that provide a smaller surface area than a full program. Well-written modules provide solid abstractions and encapsulation boundaries which make up a coherent design and clear purpose.

Chunk: This webpack-specific term is used internally to manage the bundling process. Bundles are composed out of chunks, of which there are several types (e.g. entry and child). Typically, chunks directly correspond with the output bundles however, there are some configurations that don’t yield a one-to-one relationship.

Bundle: Produced from a number of distinct modules, bundles contain the final versions of source files that have already undergone the loading and compilation process.

(emphasis added by me)

Interpretation

I summarize the difference as: a chunk is a group of modules within the webpack process, a bundle is an emitted chunk or set of chunks.

The distinction is useful when talking about webpack processes as they are occuring. As modules are chunked together, they can change significantly (especially during plugin processing), so it isn’t accurate to call them bundles at that point, the chunks may not even be emitted as bundles in the final output! Then after webpack is finished it is useful to have a term to refer to all of the emitted, final files (bundles).

Your example

So for your example

• Modules: «webpack/hot/only-dev-server.js», «./src/foo.js», «./src/bar.js» ( + any other modules that are dependencies of these entry points!)
• Chunks: foo, bar
• Bundles: foo, bar

In your example your chunks and bundles have a 1:1 relationship, but this isn’t always the case. For example adding source maps would mean you have a 1:2 relationship between a chunk and a bundle.

MODX чанки (chunks)

MODX Revo

В прошлых уроках мы разобрали различный синтаксис модх парсера и fenom, а также перенесли HTML шаблон в MODX Revo (там можно скачать шаблон на основе которого пойдут дальнейшие уроки). Сейчас код шаблона статичный и чтобы что то поправить нужно править код — начнем это исправлять. В данном уроке разобьем код на отдельные части — MODX чанки, чтобы в будущем с кодом шаблона было проще работать.

Что такое

MODX чанки – это контейнеры для HTML/CSS/JS-кода (нельзя добавлять php-скрипты, вернее можно но они будут игнорироватся, для этого есть сниппеты). В чанке можно вызывать другие чанки, tv и сниппеты (можно вкладывать другие элементы).

Где хранятся

Чанки, хранятся в БД, в таблице modx_site_htmlsnippets (где modx_ — это префикс таблиц, который задан во время установки движка).

Как создать

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

Переходим во вкладку «Элементы» и кликаем:

1. На иконку «Новый чанк».
2. На плюс напротив пункта «Чанки».
3. ПКМ кликаем по пункту Чанки и выбираем «Создать» либо «Быстро создать».
4. Воспользоваться пакетом TagElementPlugin .

Как вызывать

Выводятся чанки в шаблоне при помощи следующей конструкции:

• [[$name_chunks]] – кэшируемый вызов (рекомендуется в большинстве случаев).
• [[!$name_chunks]] , не кэшируемый вызов — выводится каждый раз из БД MODX парсером — что замедлит сайт.
• , вызов чанка при помощи fenom. Также Fenom позволяет включать одни чанки в другие и даже расширять их. Пример вызова чанка с набором параметров: . Подробнее про читайте в оф. документации.

Чанк с параметрами

Допустим у нас есть чанк «info», со следующим содержимым:

Он имеет 2 плейсхолдера: [[+name]] и [[+mesCount]]. Передать значения данным плейсхолдерам можно при помощи указания соответствующих параметров вызову чанка:

В результате, получим следующее содержимое:

Условия в чанках

Условия и другие phx фильтры / модификаторы MODX можно использовать в любых специальных тегах. Например, нам нужно вывести чанк в чанке (один или другой) в зависимости от идентификатора родителя текущего ресурса.

Внимание! Будьте осторожными, условия могут сильно увеличить время генерации страницы.

Натягиваем шаблон — логика разбивки шаблона

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

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

Выносим весь код шаблона (у на пока только один шаблон базовый, смотрите урок Перенос HTML шаблона в MODX Revo) в отдельный чанк tpl и вызываем чанк tpl в самом шаблоне [[$tpl]] или .

Если сейчас перейти на главную страницу — у нас не чего не поменялось — она также открывается с перенесенным html дизайном.

Причин этому может быть несколько:

1. Вы не включили fenom (настройки должны быть такими).
2. Конфликт с фигурными скобками, что конфликтует можно увидеть в журнале ошибок:
   

Ищем в коде ошибку (или фигурную скобку) и ставим перед ней и после нее пробелы.

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

Далее открываем чанк tpl и вырезаем из него весь контент который меняется (обычно это все кроме шапки и подвала):

Далее создаем чанк tpl.1 и вставляем в него вырезанный код, а на месте вырезанного кода вставляем вот такую конструкцию [[$tpl.[[*template]]]] или тоже самое на fenom:

После этого сохраняем и переходим на главную страницу — она должна точно также загружаться, как и до разбивки на чанки.

Для чего все это?

Тэг «template» выводит id примененного шаблона, а выше приведенная конструкция обращается к соответственному чанку и выводит его. Так мы в дальнейшем сэкономим кучу времени при внесении изменений в верстку сайта.

В дальнейшем мы будем создавать дополнительные шаблоны (для типовых страниц, для статей, для портфолио и т.д.), вызывать во всех будем чанк tpl — там у нас шапка, подвал и другие элементы которые присутствуют на всех остальных страницах. У каждого нового шаблона будет свой id, следовательно, мы будем создавать дополнительные чанки tpl.2, tpl.3, …, tpl.7 и уже в них вносить недостающий контент. Забегая вперед, у нас получится примерно такая структура.