LPF Landing Page Framework

Создание компонентов LPF

Что такое компоненты и как их создавать. Основы

Что такое компоненты LPF?

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

Все компоненты располагаются в каталоге lpf-content/components. В LPF предусмотрено несколько php-констант для компонентов:

Пример простого компонента

Рассмотрим простой пример создания компонента DEMO.

В каталоге components создадим каталог demo, по которому, собственно, и будет именоваться компонент. В этом каталоге необходимо создать файл demo.php — это основной файл компонента — он всегда совпадает с каталогом. То есть будет так: /components/demo/demo.php.

В файле demo.php разместим что-нибудь простое:

echo 'Привет! Это компонент DEMO.';

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

Для запуска компонента предназначенна функция mso_component(). В любой странице:

<php mso_component('demo') ?>

То есть первым параметром указываем имя компонента.

Опции компонента

Очевидно, что пользы от компонента будет больше, если он будет настраиваемым. Поэтому вторым параметром можно передать в компонент произвольные опции. LPF сделает так, что в файле компонента будет доступна переменная $OPTIONS, в которой, и будут находиться переданные опции.

В demo.php:

echo $OPTIONS['text'];

Здесь мы передаем в компонент $OPTIONS['text']. Понятно, что ключ массива может быть произвольным.

Используем компонент:

<php mso_component('demo', array('text' => 'Привет, мир!')) ?>

Дефолтные опции

Может возникнуть ситуация, когда вызов компонента содержит не все требуемые опции. Например в компоненте используются ключи: text и class. Но сам компонент может вызываться без этих ключей:

mso_component('demo', array('text' => 'Hello!'));

То есть отстутствуeт class. Чтобы такое реализовать, в компоненте следует создать массив дефолтных опций, который будет объединён с входящим $OPTIONS с помощью функции array_merge().

Тогда $OPTIONS будет содержать все необходимые ключи и можно не беспокоиться, что чего-то забыли указать. Ошибки не будет. Посмотрите готовый код компонента demo.

$def_options = array(
	'text' => 'Hello!',
	'class' => 't-red'
);

$OPTIONS = array_merge($def_options, $OPTIONS);

if ($OPTIONS['class'])
	echo '<span class="' . $OPTIONS['class'] . '">' . $OPTIONS['text'] . '</span>';
else
	echo $OPTIONS['text'];

Данный компонент можно вызывать с любыми опциями.

Создание компонентов jQuery-плагинов

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

Здесь следует отметить, что jQuery-плагины очень разнообразные, но как правило они работают по одному принципу:

Чтобы не усложнять задачу, предположим, что у нас есть jQuery-плагин с условным названием «putinhuilo». Сам плагин состоит из:

HTML-разметка для плагина создается прямо в тексте страницы, например требуется задать класс .putinhuilo нужного блока. JS-функция плагина пусть будет putinHuilo.

Создадим каталог компонента putinhuilo с файлом putinhuilo.php и здесь же разместим файлы jQuery-плагина.

Вначале приведу код putinhuilo.php:

$def_options = array(
	'element' => '.putinhuilo',
	'load_css' => true,
	// ... другие опции плагина ...
);

$OPTIONS = array_merge($def_options, $OPTIONS);

if ($OPTIONS['load_css'])
	echo mso_load_css(COMPONENTS_URL . 'putinhuilo/jquery.putinhuilo.css', true);

mso_lazy(
	mso_load_script(COMPONENTS_URL . 'putinhuilo/jquery.putinhuilo.js', true)
);

mso_lazy(
	mso_jsscript(
				$OPTIONS['element'], 
				'putinHuilo', 
				mso_array_php_to_js($OPTIONS, $def_options)
			)
);

Начальная часть кода объединяет переданные опции с дефолтными. Здесь стоит отметить две служебные:

Функция mso_load_css() формирует html-строчку (link rel) для подключения css-файла. Браузеры нормально понимают такое подключение в BODY страницы, но это неверно с точки зрения html-валидатора. Поэтому после тестирования и отладки, через load_css лучше отключить загрузку css-файла, а сам файл перенести в основной каталог css, где файл будет подключен как положено в секцию HEAD.

Функция mso_lazy() подключает вывод не сразу, а в конце html-страницы перед закрывающим /BODY. Это благотворно сказывается на скорости загрузки сайта.

Функция mso_load_script() формирует script для загрузки js-файла. При этом проверяется уже загруженные дубли файла. Это актуально если на странице компонент вызывается многократно.

Функция mso_jsscript(ЭЛЕМЕНТ, ФУНКЦИЯ, ОПЦИИ) формирует строчку:

<script>$(document).ready(function(){ $('ЭЛЕМЕНТ').ФУНКЦИЯ({ОПЦИИ})})</script>

Функция mso_array_php_to_js() преобразует PHP-массив опций в массив JS-опций. Например:

в PHP задаём:

	'display' => 10,
	'border' => false,
	'images' => 'null',

Получаем в JS:

	display: 10,
	border: false,
	images: null,

Если задан второй параметр ($def_options), то будут исключены опции, которые совпадают с дефолтными. Например в плагине задано «display: 10». Если вызвать компонент с этим же значением, то оно не попадет в JS-опции.

Итого

Используйте приведенный код как каркас для новых компонентов для jQuery-плагинов.

Если вы отлаживаете сторонний PHP-код или библиотеку, то попробуйте вынести её в компонент.


О проекте

Landing Page Framework упрощает создание целевых страниц, избавляя вебмастера от массы рутинных операций. Фреймворк обладает мощным ядром, способным решать сложные задачи. Сайты, созданные в LPF, будут работать с очень высокой скоростью даже на слабых серверах.

Контакт