Подключение JS CSS -> MVC -> API -> Core Framework

Подключение JS CSS библиотек

MVC компонент способен подключать внутри себя все Javascript скрипты и CSS таблицы стилей с учетом всех зависимостей при необходимости. У вас более не будет ошибки, когда вы подключаете Jquery дважды - в главном шаблоне и во внутреннем. Вам не придется ставить Jquery в корень сайта, даже, если он там не используется, а используется только на второстепенной странице, тем самым увеличивая траффик и нагрузку на клиента. У вас не будет ошибки, когда вы подключаете JqueryUI до подключения Jquery, или вовсе забываете подключить при этом Jquery. Вам больше не придется вспоминать, где у вас лежит каждая из библиотек и вспоминать синтаксис, как их подключать. Вам больше не нужно будет вспоминать синтаксис включения версии библиотеки в зависимости от версии браузера.

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

Для включения таблицы стилей или Javascript библиотек - используется скрипты

c\mvc::addJs($script);
c\mvc::addCss($script);

Вы можете указать в качестве аргумента абсолютный, или относительный путь к скрипту, или к таблице стилей.

Вы можете также обращаться к скриптам, используя ключевые слова. Но предварительно - вам нужно завести справочник ключевых слов. Для этого - в папке global-config - нужно создать файл mvc.php примерно следующего содержания

<?php
//css
self::$css_dict['bootstrap']='/css/bootstrap.min.css';
self::$css_dict['select2']='/css/select2.css';
self::$css_dict['jqueryui']=self::$css_dict['jquery_ui']=self::$css_dict['jquery-ui']='http://...';
self::$css_dict['responsive-tables']='...';

//js
self::$js_dict['jquery']='http://...';
self::$js_dict['bootstrap']=array('url'=>'http://.../bootstrap/bootstrap.min.js','requires'=>'jquery');
self::$js_dict['lazyload']='http://common.euroset.lan/js/lazyload.js';
self::$js_dict['jqueryui']=self::$js_dict['jquery_ui']=self::$js_dict['jquery-ui']=array('url'=>'http://.../jquery-ui.js','requires'=>'jquery');
self::$js_dict['sticky-tables']=array('url'=>'http://.../sticky-tables.js','requires'=>'jquery','if'=>'gt IE 8');

// core scripts
self::$js_dict['core_ajax']=self::$js_dict['core']=array('url'=>'http://.../core_ajax3.js','requires'=>'jquery');

//polifills
self::$js_dict['placeholder']=array('url'=>'http://.../placeholder.js','requires'=>'jquery','if'=>'lte IE 8');

Секция self::$css_dict и self::$js_dict - отвечает за справочники CSS и JS соответственно. Можно указывать значение, как строку. Javascript справочник можно дополнительно указать как массив, содержащий следующие элементы

url - относительный путь/абсолютный путь
requires - зависимые библиотеки. Можно указать, как строку, или как одномерный массив, если библиотек несколько
if - условие, при котором библиотека будет включена. Строка использования библиотеки добавится, но браузер сам будет решать - грузить ее или нет ('if'=>'lte IE 8')
version - название версии скрипта. Используется, чтобы очистить кеш всех браузеров при обновлении библиотеки

Стоит учесть, что css файлы лучше указывать, с ссылкой на тот же домен (относительные пути с копированием файлов), если вы еще поддерживаете IE8 и вынуждены подгонять адаптивную верстку @media через respond.js. Если IE8 в прошлом - можете смело использовать абсолютные пути. Точно также следует учесть, что для подгрузки шрифтов - нужно добавить заголовок CORS через .htaccess

В файл очень желательно запихнуть путь к core_ajax, если вы собираетесь всецело использовать ajax компонено (описаный далее).

Элементы форм и таблиц будут искать sticky-tables и placeholder заголовки автоматически. Следует также их предусмотреть, если они нужны

В файле должны лежать только общие скрипты, доступные для всех ваших проектов. Стоит учесть, что в правильно построенном MVC компоненте - файлы index.css и index.js внутри папки app автоматически подцепляются при обращении к конкретной странице и вам не нужно думать об их включении.

Включение компонента

Часто, CSS и JS идут вместе одним компонентом. Bootstrap, Jquery-UI. Чтобы не писать подключение каждой из строк - существует альтернативный синтаксис.

c\mvc::addComponent($script);

Функция подгружает скрипты, более ничего.

У данного метода есть только одно ограничение - вы не можете использовать скрипты <script>$()</script> с использованием сторонних библиотек, т.к. они включаются в самом конце страницы. Для решения данной ситуации - необходимо исользовать

Произвольный скрипт

Чтобы добавить произвольный скрипт в конец подгружаемых библиотек - вы можете использовать функцию

c\mvc::addScript($script);

Весь произвольный скрипт будет добавлен последовательно в очередь после загрузки всех вышестоящих скриптов. Также - можете все пользовательские скрипты подгружать через addJs или создав файл index.js в указаной папке app при полноценном использовании скелетона.

Передача переменной

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

c\mvc::addJsVar($var,$value);

В случае, когда нужно передать переменную, как массив, а не объект - используется метод

c\mvc::addJsVarAsArray($var,$value);

Отображение добавленных скриптов

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

c\mvc::drawJs();
c\mvc::drawCss();

Удаление ранее добавленных скриптов

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

Для удаления скриптов, добавленных ранее - предусмотрены функции

c\mvc::clearScripts();
c\mvc::clearScriptsFull();

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

Второй - удаляет полностью все скрипты и стили без исключения

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