VcorpJS - независимый JavaScript-модуль со встроенными плагинами
JavaScript-модуль VcorpJS
VcorpJS - независимый кросс-браузерный JavaScript-модуль, написанный на чистом JavaScript и содержащий набор встроенных плагинов и полезных функций.
Размер около 67 Кбайт (без gzip-сжатия), поддержка старых браузеров (Opera12 и IE8), авто-поддержка сенсорных экранов и ряда современных технологий.
Автор старается максимально увеличивать скорость работы и уменьшить размер модуля, сохраняя оптимизацию под разные браузеры (часть деталей здесь: Тест гридов).
Автор никак не ограничивает использование VcorpJS, но не дает никаких гарантий на этот JavaScript-модуль и не отвечает ни за какие последствия использования VcorpJS, ни частично, ни целиком. Исходный код с комментариями закрыт и не будет выкладываться в открытый доступ, но будет дорабатываться по мере развития технологий, сохраняя обратную совместимость.
Автор много лет использует собственные наработки, включённые в состав VcorpJS, под стандартом html5, и не имеет проблем с веб-страницами.
Работа над VcorpJS продолжается (появляются новые плагины или происходит внутренняя оптимизация после реализации новых веб-технологий в браузерах).
Для навигации по всем страницам этого раздела сайта используйте пиктограмму или ссылку Навигация в верхней строке навигации.
VcorpJS содержит следующие функции и плагины:
- модальные (для страницы) перемещаемые диалоговые окна и окна сообщений,
- оконная система (до 48 переключаемых и перемещаемых окон с изменяемыми размерами), панель окон,
- галерея всплывающих изображений с показом/переключением до 9 изображений одновременно, перелистывание начиная с позиции любого увеличенного изображения,
- динамичные анимационные многоуровневые меню (неограниченное количество меню, до 50 уровней вложенности каждое),
- перетаскивание объектов, ротация любого числа изображений в блоке,
- форматированный ввод данных (spinner, phone), работа с курсором в редактируемых полях ввода,
- календарь (datepicker) в английском и русском вариантах,
- флажки-переключатели (checkbox) с произвольным текстом подписи,
- поля ввода с раскрываемыми анимационными списками вариантов быстрого выбора (combobox),
- табличный вывод объёмных данных с навигацией (JS-Grid) - в том числе в окнах или в модальном диалоговом окне,
- анимация и обёртки анимации,
- спец-объект для работы с обработчиками событий,
- работа со слоями, coockies, localStorage, селекторами, классами и стилями, функции общего назначения,
- формирование и отправка POST-запроса с произвольным телом (любыми полями и данными в виде строки),
- работа с Canvas (набор функций ограничен - пока в зачаточном состоянии).
- работа с SVG (пока одна тестовая функция создания графиков и диаграмм).
Скачать vcorp_js_00_80.zip (35 Kb - js и css файлы)
Май-Октябрь 2016 г.
Рендеринг и отзывчивость веб-страниц
Не следует слепо верить замеряемому времени выполнения JavaScript-кода, это не имеет никакого отношения к скорости рендеринга (отображения изменений).
Те разработчики, которые считают скорость выполнения JavaScript определяющим фактором быстроты работы web-страницы, заблуждаются или плохо тестируют.
Автор VcorpJS уделяет много внимания на отзывчивость веб-страниц - это важнейшее условие комфортной работы с любыми web-приложениями.
VcorpJS создаёт почти все визуальные объекты через .innerHTML-вставки, по 2 причинам:
1. Тесты показали, что рендеринг после .innerHTML быстрее рендеринга после DOM-вставок, несмотря на спорную разницу скорости выполнения JavaScript в Chrome и FireFox. В других браузерах скорость JavaScript при DOM-операциях всегда медленнее, чем сборка строки с последующей .innerHTML-вставкой (например, в IE 11 до 8-10 раз, в Opera12 до 1.5 раза). На мобильных и SmartTV, .innerHTML-вставки превосходят DOM-вставки по скорости отображения в 10 и более раз при увеличении объёма добавляемых объектов, несмотря на то, что имеют большее время выполнения JavaScript-кода.
2. Создание визуальных объектов путём сборки строки HTML - быстрая и гибкая операция. Обработчики событий могут встраиваться в HTML-код (даже с частичной реализацией) - такие обработчики не пропадают при переносе HTML-содержимого. Хотя многим не нравится такой подход (видимо, по религиозно-шаблонным причинам).
Смешивание создаваемых в HTML и добавляемых отдельно обработчиков упрощает JavaScript-код и позволяет делать более быстрые, простые и компактные реализации.
Таким образом, VcorpJS предназначен для простого, гибкого и быстрого решения задач по интерфейсу пользователя, возникающих перед каждым разработчиком.
Разумеется, волшебного средства не существует, много зависит от опыта разработчика, поэтому в случае расхождения ожидаемого результата с реальным, нужно разбираться в HTML и CSS всего проекта и его частей.
VcorpJS использует CSS-классы с префиксом "pb_" (образец типового CSS-файла прилагается), много зависит от настроек CSS-стилей.
Содержание раздела «VcorpJS»
Основные сведения:
- Подключение и инициализация VcorpJS
- Типовой CSS-файл
- Краткий обзор и правила. Полный список функций VcorpJS
Работа с функциями различного назначения:
- Функции общего назначения
- Работа с классами и стилями
- Работа с coockie
- Работа со слоями (layers)
- Управление событиями, объект для работы с обработчиками событий
Работа со встроенными плагинами:
- Плагины VcorpJS - краткий обзор и правила
- Перетаскивание объектов
- Многоуровневые анимационные меню а так же Визуальные примеры работы меню
- Галереи изображений (всплывание, перемещение, переключение, одновременно до 9 окрытых изображений), а так же Визуальный пример галереи
- Блоки ротации изображений а так же Визуальный пример блока ротации
- Модальное диалоговое окно ( визуальный пример по кнопке "Показать сообщение")
- Модальное окно сообщения ( визуальный пример по кнопке "Показать диалог")
- Переключатели-флажки checkbox а так же Визуальный пример флажков checkbox
- Форматированный ввод данных а так же Визуальные примеры
- Поля ввода со списком выбора - combobox а так же Визуальный пример комбинированного списка выбора combobox
- Календарь (datepicker) а так же Визуальный пример календаря (по кнопкам)
Оконная система VcorpJS:
- Оконная система VcorpJS - краткий обзор и правила
- Настройка окон и оконная callback-функция
- Функции работы с окнами
- Работа с панелью окон
Табличный вывод данных Grid:
Анимация объектов:
- Анимация - краткий обзор и правила (запуск, реверс)
- Базовая функция анимации, останов и очистка дескриптора
- Функции - обёртки анимации
POST запросы VcorpJS:
Canvas и SVG - графика: