Evolution Framework v1.4 beta
 

Дело было вечером, делать было нечего... Рылся на Yandex.Disk и нашел старые и давно забытые кусочки кода (:

В связи с тем, что мне надоела разжирневшая jQuery, а от Angular сводит зубы и свербит в носу, я решил написать свой небольшой(микро) фреймворк.

Вот что из этого получилось:

* Большинство первичных функций jQuery(такие как Sizzle-подобный API для выборки HTML элементов, простенькие анимации свойств CSS);
* AJAX(и JSON);
* парочка базовых модулей слайдера, модальных окошек и табов в ядре;
* целая куча полезнейших хелперов для создания своих модулей;
* целых 10!кБ сжатого кода :D
* непритязательный нативный стиль программирования позволяет легко влиться в разработку;
* ну и так далее.

В перспективе хотел бы развивать данное решение и возможно довести сие творение до хорошего юзабельного уровня; в связи с чем прошу высказывать критику и пожелания(какой-то функционал буду реализовывать постоянно так делать на этом простецкие сайты можно уже сейчас).:write:

Git: https://github.com/xShiftx/javascript-framework

p.s.: огромное спасибо Dilettante_Pro за помощь с модулем rotate.

Выложите код на GitHub, никто не будет скачивать zip архив с Яндекс диска.

Добавил на гитхаб ...

v.1.4.1 - подправлен модулей микротабов. немного улучшен код, исправлено влияние клика переключения активной вкладки на остальные вкладки и добавлена опция подсветки активного таба.

v 1.4.2 - реализован интеллектуальный коннектор схем CSS для различных размеров экрана.

При инициализации автоматически определяется является ли браузер пользователя например мобильным(разрешение экрана меньше 960px) и включается нужный CSS файл схемы из папки /app/schema.

Работает в трех режимах:

MIN : <=960px
MED: от 1024 до 1280 px
MAX: экраны больше чем 1280px

Модуль также автоматически отслеживает resize окна и автоматически переключает схемы.

Для разработки(не на продакшн) рекомендую поменять параметр ReactionRate для того чтобы можно было нормально редактировать CSS код в браузере.

v 1.4.3: анимация CSS свойств переписана более производительно и с использованием request animation frame. + небольшие правки багов

v 1.4.4: добавил поддержку LocalStorage(последняя версия доступна по ссылке на git в первом посте).

$.storage(['test=data-test','key2=data-2','evolution={"js framework": "1.4.4"}'],'set');

для установки значения или нескольких значений

$.storage('test'],'get')

для получения ключа

$.storage(['data','testing'], 'del');

для удаления одного или нескольких ключей

Нужны ли COOKIES если не планируется поддерживать IE9 и младше? В убогом IE Edge LocalStorage тоже нет. Будет fallback на куках для этого говна.

В IE localStorage есть аж с 8-й или 7-й версии, в Эдже есть и LocalStorage/SessionStorage и IndexedDB, более того есть куча либ, типа localForage, который унифицируют интерфейс, а также есть PouchDB, MiniMongo, SQLLite и т.д.

Это я в локальном режиме тестировал. Оказывается и в правду работает нормально.

Да там и унифицировать то нечего особо ... три метода.

Запостил статью с обсуждением на хабре: https://habrahabr.ru/post/316606/.

Я имел ввиду унифицирует интерфейс IndexedDB на мотив LocalStorage.

Не думаю, что это хорошая идея и реализуемо. Вседь это MySQLi, если я не ошибаюсь. Как это можно унифицировать на мотив LS если речь идет о полноценной БД.

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

Вот LS - это хорошо. Теперь Cookies не нужны, да и места больше дают.

Вы меня либо плохо читаете, либо не читаете вообще) Я уже говорил, что есть тысячи либ, которое это делают, например LocalForage. Зачем? Когда нам нужно асинхронное key-value для больших данных, то интерфейс СУБД избыточен и всё. Вообще голый интерфейс IndexedDB не удобный, и если нужно сахарное АПИ как к СУБД, то есть PouchDB, MongoLite и т.д. Я кстати об этом тоже писал.

Вы пишите библиотеку для себя и для развития себя как программиста. Практического смысла в ней нет, ввиду того, что в 2016 году библиотеки типа jQuery не нужны, а если будет нужно - возьму jQuery. Более того, идея засунуть "всё всё" в один неймспейс хуже некуда и именно за это ругают jQuery больше всего.

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

Пользуюсь IndexedDB уже года 4-5. Вы наверное удивитесь, но сейчас люди используют потоки, полноценные СУБД, С++ модули и прочее на клиенте.

>> в 2016 году библиотеки типа jQuery не нужны

Не нужны кому? Именно вам? А я считаю есть достаточное число не таких опытных программистов, которым бы такие библиотеки не помешали.

Мне тоже не нужна jQuery по большому счету, но пишется с ней проще и приятнее чем на нативном скрипте.

Я понимаю, что вам больше подавай ES6, но это будет актуально только для Node.js и для сервера. Браузер Edge его не понимает до сих пор, а это критическое в данном случае.

Да и Node.js это не панацея. Я вот предпочитаю PHP.

ИМХО, как-то писал обертку для API MySQLi на PHP на подобие Doctryne только без поддержки JOIN. Интересно, но мало чего полезного в итоге.

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


А пишу я не бесполезную библиотеку, а полноценный front-end framework ибо включаю в ядро уже более сложные по своему принципу модули. Это не библиотека.

Кому нужны, то те возьмут jQuery.

Хоспади, https://babeljs.io/. Пишу всё на ES6 уже года 4 точно, хотя мейнстримом он стал года 2 как, т.к. до появления бабеля всё было сложнее.

DOM API Level4 и так как жиквери.

Или fetch API для аякс запросов:

await fetch('/my-request')

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

Для начала разберитесь тогда в терминологии.

***

Ладно, вы явно не можете воспринимать критику, поэтому удаляюсь из треда.

>> Хоспади, https://babeljs.io/. Пишу всё на ES6 уже года 4 точно, хотя мейнстримом он стал года 2 как, т.к. до появления бабеля всё было сложнее.

Упарываетесь полифилами. Ваш выбор. Не мой. Я не спешу.

В очередной раз, пока мой рабочий ноут в ремонте со всеми данными, помаленьку пилю код фреймворка на мамкином ноутбуке (:

v. 1.4.7:

Добавлены легкие эффекты для анимации CSS свойств(easeInOutCubic, elastic, circ, back), которые были сперты из мануала(https://learn.javascript.ru/js-animation).

Остальные я воровать не решился так как они возможно находятся под чьей-то лицензией. Буду рад если кто подскажет свободно распространяемые формулы.

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

Добавлен $.hasClass для проверки имеет ли элемент установленный класс заданный в параметре; или классы.

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

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

Также принимаю идею по поводу реализации модулей.

v 1.4.9.

Еще немного оптимизирован механизм анимаций и добавлена наиболее полная коллекция easing методов для рендеринга CSS анимаций.

Вот полный список способов(их 31!):

switch(r) {
					case 'easeIn': f = Math.pow( f, 5 );
						break;
					case 'easeOut': f = 1 - Math.pow( 1 - f, 5 );
						break;
					case 'easeOutQuad': f = f < 0.5 ? 2 * f * f : -1 + (4 - 2 * f) * f;
						break;
					case 'easeOutCubic': f = f * f * f;
						break;
					case 'easeInOutCubic': f = f < 0.5 ? 4 * f * f * f : (f - 1) * (2 * f - 2) * (2 * f - 2) + 1;
						break;
					case 'easeInQuart': f = f * f * f * f;
						break;
					case 'easeOutQuart': f = 1 - (--f) * f * f * f;
						break;
					case 'easeInOutQuart': f = f < 0.5 ? 8 * f * f * f * f : 1 - 8 * (--f) * f * f * f;
						break;
					case 'easeInQuint': f = f * f * f * f * f;
						break;
					case 'easeOutQuint': f = 1 + (--f) * f * f * f * f;
						break;
					case 'easeInOutQuint': f = f < 0.5 ? 16 * f * f * f * f * f : 1 + 16 * (--f) * f * f * f * f;
						break;
					case 'elastic': f = Math.pow(2, 10 * (f - 1)) * Math.cos(20 * Math.PI * 1.5 / 3 * f);
						break;
					case 'easeInElastic': f = (.04 - .04 / f) * Math.sin(25 * f) + 1;
						break;
					case 'easeOutElastic':  f = .04 * f / (--f) * Math.sin(25 * f);
						break;
					case 'easeInOutElastic':  f = (f -= 0.5) < 0 ? (0.01 + 0.01 / f) * Math.sin(50 * f) : (0.02 - 0.01 / f) * Math.sin(50 * f) + 1;
						break;
					case 'easeInSin':  f = 1 + Math.sin(Math.PI / 2 * f - Math.PI / 2);
						break;
					case 'easeOutSin':  f = Math.sin(Math.PI / 2 * f);
						break;
					case 'easeInOutSin':  f = (1 + Math.sin(Math.PI * f - Math.PI / 2)) / 2;
						break;
					case 'easeInCirc':  f = -(Math.sqrt(1 - (f * f)) - 1);
						break;
					case 'easeOutCirc':  f = Math.sqrt(1 - Math.pow((f-1), 2));
						break;
					case 'easeInOutCirc':  f = ((f /= 0.5) < 1) ? -0.5 * (Math.sqrt(1 - f * f) - 1) : 0.5 * (Math.sqrt(1 - (f-=2) * f) + 1);
						break;
					case 'easeInQuad':  f = f * f;
						break;
					case 'radical':  f = Math.sqrt(f);
						break;
					case 'harmony':  f = (1 + Math.sin((f - 0.5) * Math.PI)) / 2;
						break;  
					case 'back':  f = Math.pow(f, 2) * ((1.5 + 1) * f - 1.5);
						break;
					case 'easeInExpo':  f = (f === 0) ? 0 : Math.pow(2, 10 * (f - 1));
						break;
					case 'easeOutExpo':  f = (f === 1) ? 1 : -Math.pow(2, -10 * f) + 1;
						break;
					case 'easeInOutExpo':  f = ((f /= 0.5) < 1) ? 0.5 * Math.pow(2,10 * (f-1)) : 0.5 * (-Math.pow(2, -10 * --f) + 2);
						break;
					case 'easeOutBounce':  
						if ((f) < (1/2.75)) {
							f = (7.5625 * f * f);
						} else if (f < (2/2.75)) {
							f = (7.5625 * (f -= (1.5 / 2.75)) * f + 0.75);
						} else if (f < (2.5/2.75)) {
							f = (7.5625 * (f -= (2.25 / 2.75)) * f + 0.9375);
						} else {
							f (7.5625 * (f -= (2.625 / 2.75)) * f + 0.984375);
						}
						break;
					case 'bounce':  
						if (f < (1/2.75)) {
							f = (7.5625 * f * f);
						} else if (f < (2 / 2.75)) {
							f = (7.5625 * ( f -= (1.5 / 2.75)) * f + 0.75);
						} else if (f < (2.5 / 2.75)) {
							f = (7.5625 * (f -= (2.25 / 2.75)) * f + 0.9375);
						} else {
							f = (7.5625 * (f -= (2.625 / 2.75)) * f + 0.984375);
						}						
						break;
					case 'bouncePast': 
						if (f < (1/2.75)) {
							f = (7.5625 * f * f);
						} else if (f < (2 / 2.75)) {
							f = 2 - (7.5625 * ( f -= (1.5 / 2.75)) * f + 0.75);
						} else if (pos < (2.5 / 2.75)) {
							f = 2 - (7.5625 * ( f -=(2.25 / 2.75)) * f + 0.9375);
						} else {
							f = 2 - (7.5625 * ( f -=(2.625 / 2.75)) * f + 0.984375);
						}
						break;
					default: f = 1;
						break;
				}

Весь фреймворк на данный момент весит около 40кб чистого несжатого кода, что выигрывает у jQuery в 6 раз примерно. Минифицированная версия будет немного позже.

v 1.5.0

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

if(caseVal <= 480) {
				this.schema = "mobile";
			}
			if(caseVal <= 768 && caseVal >= 480) {
				this.schema = "tablet";
			}
			if(caseVal <= 960 && caseVal >= 768 ) {
				this.schema = "ptablet";
			}
			if(caseVal >= 1024 && caseVal <= 1280) {
				this.schema = "desktop-min";
			}
			if(caseVal >= 1280) {
				this.schema = "desktop-max";
			}

Автоматически подключаемые схемы:

1) мобильный телефон
2) таблетка(планшет)
3) таблетка в режиме портрета
4) десктопная схема минимум для меньше 1280px
5) десктопная схема максимум для больше 1280px

Таким образом упростилась верстка под разные устройства с использованием Evolution, а также произошло избавление от надобности писать media-queries.

CSS-схемы расположены в /app/schema.

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

v.1.5.1

Добавлены модули removeClass, addClass и hasClass.
Оптимизирован модуль $.scroll для работы с animate engine и возможностью использования easing.

v 1.5.2

Закончил все мыслимые и немыслимые тесты и сделал первый релиз фреймворка(https://github.com/xShiftx/javascrip...ework/releases).

Есть пара багов связанных с ошибками Edge, о которых я написал разработчикам(два из них уже подтвердили и будут исправлять). Баги мелочные: при анимациях в IE желательно указывать изначально оба свойства и left и right ибо они по умолчанию не вычисляются браузером и отдаются как значения auto. Я не стал лепить костылей и просто попросил исправить код у разработчиков.

Вот ошибки:

https://developer.microsoft.com/en-u...sues/10216077/

https://developer.microsoft.com/en-u...sues/10216218/


В целом: вы можете спокойно использовать фреймворк на Production.
Пока нет сетки для верстки, но я над этим активно думаю(задача не простая).

Если вам нужны какие-то функции или модули - вы можете запросить об реализации здесь или написать мне на почту shift-sg@yandex.ru.

Также приглашаю разработчиков к разработке и тестированию. Религия не запрещает менять код ядра - все адекватные правки кода буду смотреть и принимать решение о включении изменений в будущие релизы.

Пока над проектом работаю один. Присоединяйтесь. С радостью приму.

v. 1.5.3

Добавлена возможность анимировать цвета.

v 1.5.6 (Production release: https://github.com/xShiftx/javascrip...ases/tag/1.5.6)

Произведены некоторые оптимизации и устранена поддержка старых браузеров младше IE10.

Добавлена минифицированная версия движка размером в какие-то жалкие 18.5 kB(если на сервере gzip - выхлоп будет еще меньше, а в будущем, когда мой рабочий хакинтош привезут с ремонта я оптимизирую код еще на одну или две трети с помощью утилиты JavaScipt packer), что хорошо для мобильного интернета.

Теперь движек селекторов работает на чистом document.querySelectorAll и поддерживает все псевдоклассы и прочие прелести.

Добавлена поддержка анимации новых CSS3 2D transforms(3D в процессе). Теперь можно анимировать skewX, skewY, translateX, translateY, rotate и scale.

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

Например,

$.dom("a:first-child", "animate", ['transform:rotate(360deg) scale(0.7):2000']);

Добавлены новые эффекты Easings(полный список в описании проекта на главной страницу GitHub).

Переписан events API на более классический из-за бывшей некрасивости.
Теперь, к примеру, событие click можно создать так:

$.click('aside h3', 'click', function(e){ e.preventDefault(); })

http://semver.org/

---

Как тебе помягче сказать... Это же лютый треш исходники твоего "фреймворка" :)

Например, почему у тебя функции проверки типов возвращают null?)

Кстати, isObject должна выглядеть по другому. Почему по другому, предлагаю тебе самому найти ответ)

Я его постоянно переписываю. Чтобы выделить код в отдельные компоненты надо хотя бы примерно представлять как часто они будут использоваться, но я последние 30 дней только и думаю о том, что бы мне еще хотелось добавить.

В версии 2.0 запланировано изменение API и уход от подхода коллекторов на свичах - там большинство бардака и разгребется.

Мне вот, например, хочется добавить поддержку анимации градиентов CSS3 для чего есть color animate, который для анимации цветов и animate move для простого просчета значений по времени, а еще есть теперь matrix animate для работы с матрицей трансформаций(она по get computed выставляется в виде matrix(1, 0, 0, 1, 0, 0), а не привычных свойств типа rotote или scale и еще до кучи в радианах, что приходится дважды пересчитывать по технической необходимости).

Плюсом придется делать костыль для распаковки 3D матрицы и ее уравнивания с дефолтной 2D матрицей. Это ощутимый говнокод, но без него работать просто не будет и желаемый функционал не получится хорошим ...
Можно конечно сказать что то вроде 'да говно это все' и плюнуть и ничего не делать, я же решил сделать поддержку некоторых вещей лучше чем в jQuery, меньше по коду и размеру чем в jQuery и сделать это на приемлемом уровне.

Как уж тут без треша?

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

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

Код изначально оптимизирован под максимальную минималистичность и компактность - поэтому выглядит немного трешово.

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

Пока я в основном наращиваю функционал. А что вам показалось особенно трешовым?

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

А какая техническая разница в JavaSript условиях иcпользовать null или false? И то и другое работает одинаково ...

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

Насчет версионности спасибо за ссылку. Задумаюсь(чето там много букафф).

Еще что-то посоветуете?

xShift,Какую цель преследует твоя библиотека? Для каких целей она мне, как разработчику, может пригодиться?

1. Ты уперся в жуквери, как в потолок. Жуквери -- это старая добрая библиотека, преимущественно, для работы с DOM + AJAX. Теперь понятно, почему ее: а) не рекомендуется использовать для анимаций; б)в нет нет расширеного фунционала для работы с анимациями?
2. Для анимаций существуют библиотеки гораздо более оптимизированные + full-featured как говорится. Та же Velocity.js. Причем с API jQuery.

потом поймешь :)

---

"как жуквери, только моя + с багами + с сайд эффектами" :)

---

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

Для решения каждой из подзадач я выберу инструмент (бибилотеку если тебе так яснее), которая делает это:
1. правильно (тесты)
2. быстро
3. имеет интуитивно понятное апи
4. поддержку/комьюнити
5. ...

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

О чем это я? На мой взгляд твой "фреймворк" (да, да, именно в кавычках), не более чем твой собственный образовательный проект -- велосипед в учебных целях.

Велосипеды нужны. Если их не писать, ничему не научишься. Как раз именно после n+1 кол-ва велосипедов появляется полезный выхлоп :)

Но сейчас это просто велик на треугольных колесах и тебе стоит сконцентиророваться на обучении. Я так считаю.

Если хочешь, чтобы бородатые ребята с форума проревьювили твой код, оставь ссылку, они сделают это в меру своей загруженности. Но не стоит пытаться на данном этапе написать аналог жуквери. Даже близко не подойдешь. Кстати, Zepto есть еще =)

Пишу с телефона.

1. Нет. Я взял самое часто мною юзаемое. Да и других потолков нет просто. Кроме того я уже переварил реак и ангуляр и знаю что нужно сделать. Лучше бы помогли чем засирать ))) из патриотических соображений. Иначе что мы лично сделали?

2. Я из патриотических соображений пишу свое решение.

Потом не пойму в чем разница между нул и фэлс. Это эквивалентно при использовании условия иф.

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

(Пьяный ответ)

Спасибо за пример. Кое что утащу к себе в движок.
Да я не люблю ангуляр. Он стандарты не соблюдает со своими материальными дизайнами и компонентами.

v.1.5.7(https://github.com/xShiftx/javascrip...ses/tag/v1.5.7)

Реализована перепаковка 2D матрицы в принудительный 3D режим. Теперь поддерживаются 3D трансформации для анимирования.

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

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

Все это богатство реализовано максимально эффективно и компактно, что позволило сделать размер очень маленьким, а значит быстрым для загрузки(в последней на момент написания версии 1.5.7 - это всего 20 кб сжатого кода против 150кб у jQuery с учетом всех компонентов и такого же функционала, который она полностью не обеспечит. если на сервере есть gzip, то размер движка будет еще компактнее).

Кароче лучше jQuery потому, что если вы для реализации того же функционала подцепите UI и плагины - это у вас вылезет в 1.5 мегабайта веса ...

Это пока. В будущем функционал будет расширяться(например задуман рутер). Если вам чего-то не хватает - попросите - я это реализую в меру загруженности и адекватности.

Может ли это вам пригодиться в 2017 году - решайте сами.

Поскольку мой ноутбук починить не смогли, но я смог обменять его на новый, фреймворк продолжу писать на Linux(тошнит от венды а сборку хакинтош пока никто завести не сумел. в общем жду пока). Немного тяжеловато вспоминать как оно, но, тем не менее вроде бы как больше никаких подводных камней с IE не предвидится и можно кодить на линухе.

В этом году перепишу систему немного на другой стиль, чтобы удобство API соответствовало тому, что мы видим у jQuery. Хотя делать этого очень не хочется(может просто похмелье:).

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

Присоединяйтесь ;)

v.1.5.9

https://github.com/xShiftx/javascrip...ework/releases

Добавлена поддержка короткого формата записей для CSS3 transforms анимаций. Например translate(10px,20px,30px) будет автоматически транслирован в translate по всем трем осям X,Y,Z.

Накидал простенький логотип ... Может такой и останется

Наконец то завел Хакинош, все настроил и появилось время чтобы снова писать framework.

в version 1.6 добавлены модные хипсерские методы Foreach, map и filter. Хотя я до сих пор не понимаю зачем они нужны - все таки сделал. Может кому-то понадобятся.

Готовлюсь внедрить один из паттернов программировани и координально изменить архитектуру приложения. Сейчас у меня используется идея модулей и SOLID. Но почему-то хипстерам и прочим фаперам на паттерны она не нравится. Придется пойти по моде и слегка уступить этим людям.

Вот еще мысли. я хотел сделать модуль роутера, но на реальном сайте SPA у меня вышло на тупую несколько строчек кода для реализации простой загрузки страниц на AJAX и выполнения каких-то стартовых функций.

Выглядит это примерно так:

<script src="./app/evolution.js?production=1.5.9" id="evolution">

	function liveRun() { // restart selectors on ajax or document load

		/* animations */
		$.dom( '#logotype img','style', ['width:10px','height:10px'] );
		$.dom( '#logotype img','animate', ['width:349px:1000:bounce','height:188px:1000:bounce', 'transform: perspective(40px) rotate(360deg,360deg,360deg):900:bounce'] );

		$.dom( '#logotype span','style', ['opacity:0'] );
		$.dom( '#logotype span','animate', ['opacity:1:3500'] );

		/* slider init */
		$.rotate('#rotate div', null, 6000);

		/* increase and descrease text size if telephone hovered */ 
		$.event('#logotype i', 'mouseover', function() {
			$.dom('#logotype i', 'animate', ['transform: scale(1.5,1.5) translateX(-40px):400']);
		});

		$.event('#logotype i', 'mouseleave', function() {
			$.dom('#logotype i', 'animate', ['transform: scale(1,1) translateX(0px):400']);
		});

		/* scroll top */
		$.event('#footer li:last-child a', 'click', function(e) {
			e.preventDefault();
			$.scroll();
		});

		/* route ajax path */
		$.event('#menu li a, #bottom-menu li:not(:last-child) a', 'click', function(e) {
			e.preventDefault();
			clearInterval(rotate);
			getPageLive(e.target.href, e.target.text);
		});

		// simple router
		function getPageLive(url, title) {
			$.ajax(url,'GET', null, 'dom', function() {
				$.dom('#shell','del');
				$.insert($.dom('body'), this[0].outerHTML);
				
				document.title = title;
				window.history.pushState({"pageTitle": title}, "", url);
				
				$.scroll();
				liveRun();
			});
		}

	}

	liveRun();

	</script>

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

В будущих версиях будет модуль history, который я назову как-то по типу locations или наподобие.

v 1.6.1

добавлено location API для косметической смены адреса и заголовка страницы с поддержкой callback. Модуль работает корректно вплоть до отрицательного значения state(ловушка на событие для установки title из стека и ловушка на запоминание нулевого индекса).

'$.location('Page Title','http://somedomain.com/index.html', function(){console.log(this)})'

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

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

v 1.6.2 добавлен модуль хинтов. (еще маленько в ядро и остальное в репозиторий плагинов)

Звучит внушительно.
Пример можно?

На самом деле это грязный хак поскольку по умолчанию у всех элементов если не указано это свойство то параметр имеет значение none. Если казано только значение трансформации осей X и Y - браузер выставляет значение в transform 2D матрицу, но как только указано значение Z то матрица сразу приобретает вид 3D трансформации.

Чтобы написать как можно короче и эффективнее мне не осталось ничего другого кроме как вручную устанавливать параметры матрицы автоматически в 3D режим путем перепарса Computed Style и перегруппировки.

Вот кусок оригинального кода:

// get matrix and set a default value if not present
						var matrixStart = (window.getComputedStyle(e[x], null)[prop] === 'none') ? 'matrix(1, 0, 0, 1, 0, 0)' : window.getComputedStyle(e[x], null)[prop];
						
						var M2D = $.arguments(this.getValFromPropsBrackets('matrix',matrixStart)[1], ',');

						// set matrix from 2D to 3D
						if( M2D.length <= 6) {
							var matrix3D = 'matrix3d('+ M2D[0] +', '+ M2D[1] +', 0, 0, '+ M2D[2] +', '+ M2D[3] +', 0, 0, 0, 0, 1, 0,'+ M2D[4] +','+ M2D[5] +', 0, 1)'
						} 
						else {
							var matrix3D = window.getComputedStyle(e[x], null)['transform'];
						}
												
						// extract matrix values
						var M3D = $.arguments(this.getValFromPropsBrackets('matrix3d',matrix3D)[1], ',');

						//console.log(M3D);
						/*
						matrix3d pattern
						   1, 0, 0, 0,    1 scalex 6 scaley 11 scalez
						   0, 1, 0, 0,    5 skewX  2 skewY
						   0, 0, 1, 0,    10 rotateX 9 rotateY 1 rotateZ  
						   tx, ty , tz, 1 13 translateX 14 translateY 15 translateZ
						   				  12 - perspective
						*/

В результате затрагиваемый элемент дом сразу же снабжается переупакованной матрицей 4x4 из 16ти значений. Я кстати задействовал не все параметры, которые мог и можно было достичь интересных эффектов типа блика солнечных лучей на камере если затрагивать перспективу, но это уж недокументированная фича.

Собственно. 1). считываем текущую конфигурацию матрицы. Если none, то прописывает дефолтные параметры трансформации не затрагивая и не искажая ничего 2). переупаковываем 2D матрицу в 3D матрицу с учетом 2D трансформации. 3). запускаем анимацию с параметрами полученными при "оригинальной" прописи свойства transform как по стандарту CSS, дробим все это на сегменты и запускаем анимацию каждого вектора отдельным контекстом через RAF.

В результате получаем обрисованный по матрице 3D элемент по всем трем осям если эти значения отличны от 0.

Например:

$.dom( '#logotype img','animate', ['width:349px:1000:bounce','height:188px:1000:bounce', 'transform: perspective(40px) rotate(360deg,360deg,360deg):900:bounce'] );

Меняем ширину с bounce, трансформируем перспективу и вращаем по всем трем осям за 900 миллисекунд используя тот же эффект bounce. Все элементарно просто на выходе.

Сейчас у меня код маленько с запашком, но я на первых порах работал в основном над самими механизмами и не внедрял никаких паттернов кроме SOLID и Module на Single Namespase. В будущем это будет переработано, но как я пока не могу придумать.

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

1.7.2

- Обнаружился баг связанный со скоростью иниуиализации Android browser: метод самоинициализации позаимствован у jQuery.

- Добавлен $.fireEvent для симуляции таких событий как click и submit и так далее.

- Частично переписано на ES6. Со временем полностью избавлюсь от Legacy кода(бабулю не предлагать - лишний мартышкин труд).

- Исправно работает на трех проектах, один из которых - калькулятор стоимости пластиковых окон и конструкций ПВХ. Будут еще проекты где можно использовать - будут новые фичи. Принимаю заявки на нужные вам модули.