Я не претендую на уникальность кода, но весь код написан мной самостоятельно с учетом всего моего опыта веб-мастерства. Сделан с любовью к пользователю.
API фреймфорка состоит из 4-х функций.
Возвращает найденый элемент соответствующий selector.
Если необходим поиск внутри конкретного элемента, корневой элемент поиска parent указывается до selector. Уточнящийся поиск обходит все переданные функции аргументы слева направо. Аргументов может быть сколько угодно. Принимает в качестве аргументов строки selector и объекты элементов.
Тестовое окружение
<ul>
<li> 1 </li>
<li> 2 </li>
<li> 3 </li>
</ul>
Использование
$( 'ul li:last-child' ).innerHTML // => 3
$( 'ul', 'li:last-child' ).innerHTML // => 3
$( $( 'ul' ), 'li:last-child' ).innerHTML // => 3
$`ul li:last-child`.innerHTML // => 3
Возвращает коллекцию найденных соответствующих selector элементов.
Если необходим поиск внутри конкретного элемента, корневой элемент поиска parent указывается до selector. Уточнящийся поиск обходит все переданные функции аргументы слева направо. Аргументов может быть сколько угодно. Принимает в качестве аргументов строки selector и объекты элементов.
Тестовое окружение
<ul>
<li>
<p> 1 </p>
<ul>
<li> 1.1 </li>
<li> 1.2 </li>
<li> 1.3 </li>
</ul>
</li>
<li>
<p> 2 </p>
<ul>
<li> 2.1 </li>
<li> 2.2 </li>
<li> 2.3 </li>
</ul>
</li>
<li> 3 </li>
</ul>
Использование
$$( 'ul li:last-child' ) // => [ <li> 1.3 </li>, <li> 2.3 </li>, <li> 3 </li> ]
$$( 'ul', 'li:last-child' ) // => [ <li> 1.3 </li>, <li> 2.3 </li>, <li> 3 </li> ]
$$( $( 'ul' ), 'li:last-child' ) // => [ <li> 1.3 </li>, <li> 2.3 </li>, <li> 3 </li> ]
$$`li:last-child` // => [ <li> 1.3 </li>, <li> 2.3 </li>, <li> 3 </li> ]
$$( 'ul li:nth-child(2)', 'ul li:last-child' ) // => [ <li> 2.3 </li> ]
Создает элемент по параметрам:
-
n- имя тега элемента -
x- пространство имен XML (xmlns) -
d- корневой документ -
o- клонировать объект -
t- клонировать вместе с деревом потомства -
u- использовать уже созданный элемент -
c- список классов элемента -
p- параметры (аттрибуты) элемента -
k- ключевые значения объекта элемента -
e- обработчики событий элемента -
s- значения стиля элемента -
i- структура внутренних элементов -
z- выжать результат в массив элементов -
h- внутренний html-код -
f- поместить элемент первым внутрь элемента -
l- поместить элемент последним внутрь элемента -
b- поместить элемент перед элементом -
a- поместить элемент после элемента -
r- заменить указаннй элемент текущим -
m- применить к объекту определения элемента миксины -
w- применить к результирующему элементу миксины┏━━━━━━━┳━━━━━━━━━━━━━━━━━━━━━━━┳━━━━━━━━━━━┳━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓ ┃Имя па-┃ Тип ┃ значение ┃ описание эффекта ┃ ┃раметра┃ параметра ┃ умолчания ┃ действия ┃ ┣━━━━━━━┻━━━━━━━━━━━━━━━━━━━━━━━┻━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫ ┃ Параметры иициализация элемента /* используется {d,n,x} или {o,t} или {u}) */ ┃ ┠───────┰───────────────────────┰───────────┰────────────────────────────────────────┨ ┃ def.d ┃ Document ┃ document ┃ Ссылка на используемый объект document ┃ ┃ def.n ┃ String ┃ "div" ┃ Название тэга элемента ┃ ┃ def.x ┃ String ┃ "" ┃ Область имён элемента (xmlns) ┃ ┃ def.o ┃ Element ┃ undefined ┃ Клонирование элемента вместо создания ┃ ┃ def.t ┃ Boolean ┃ false ┃ Клонировать вместе с потомками ┃ ┃ def.u ┃ Element ┃ undefined ┃ Использование элемента вместо создания ┃ ┠───────┸───────────────────────┸───────────┸────────────────────────────────────────┨ ┃ Характиристики элемента /* используются параметры без ограничений */ ┃ ┠───────┰───────────────────────┰───────────┰────────────────────────────────────────┨ ┃ def.c ┃ [String]|String ┃ undefined ┃ Список классов элемента ┃ ┃ def.p ┃ Object ┃ {} ┃ Значения параметров элемента ┃ ┃ def.e ┃ Object ┃ {} ┃ Обработчики событий элемента ┃ ┃ def.k ┃ Object ┃ {} ┃ Значения ключевых свойств элемента ┃ ┃ def.s ┃ Object ┃ {} ┃ Стили элемента ┃ ┠───────┸───────────────────────┸───────────┸────────────────────────────────────────┨ ┃ Размещение элемента /* используются {h} или {i,z} */ ┃ ┠───────┰───────────────────────┰───────────┰────────────────────────────────────────┨ ┃ def.h ┃ String ┃ "" ┃ Переданный код в innerHTML ┃ ┃ def.i ┃ [Element]|Element ┃ [] ┃ Вложеные внутрь элементы ┃ ┃ def.z ┃ Boolean ┃ false ┃ Выполнить .flat() массиву результата ┃ ┠───────┸───────────────────────┸───────────┸────────────────────────────────────────┨ ┃ Параметры размещения элемента /* используется один из параметров */ ┃ ┠───────┰───────────────────────┰───────────┰────────────────────────────────────────┨ ┃ def.f ┃ Element ┃ undefined ┃ Вставить первым элементом внутырь ┃ ┃ def.l ┃ Element ┃ undefined ┃ Вставить последним элементов внутрь ┃ ┃ def.b ┃ Element ┃ undefined ┃ Вставить элемент до указаного ┃ ┃ def.a ┃ Element ┃ undefined ┃ Вставить элемент после указаного ┃ ┃ def.r ┃ Element ┃ undefined ┃ Заменить элемент вместо указаного ┃ ┠───────┸───────────────────────┸───────────┸────────────────────────────────────────┨ ┃ Прочие параметры /* используются параметры без ограничений */ ┃ ┠───────┰───────────────────────┰───────────┰────────────────────────────────────────┨ ┃ def.m ┃ [Function]|Function ┃ undefined ┃ список ранних миксинов для def ┃ ┃ def.w ┃ [Function]|Function ┃ undefined ┃ список поздних миксинов для элемента ┃ ┗━━━━━━━┻━━━━━━━━━━━━━━━━━━━━━━━┻━━━━━━━━━━━┻━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
Пример 1.
-
окружение:
<ul> <li> 1 </li> <li> 2 </li> <li> 3 </li> </ul> -
код:
_( { n: 'li', h: '4', l: $`ul` } ) -
результат:
<ul> <li> 1 </li> <li> 2 </li> <li> 3 </li> <li> 4 </li> </ul>
Пример 2.
-
окружение:
<ul> <li> 1 </li> <li> 2 </li> <li> 3 </li> </ul> -
код:
_( { n: 'li', h: '0', f: $`ul` } ) -
результат:
<ul> <li> 0 </li> <li> 1 </li> <li> 2 </li> <li> 3 </li> </ul>
Пример 3.
_({n: 'a', p: { href: '/', title: 'Главная страница' }, h: '/главная' })
// => <a href="/" title="Главная страница"> /главная </a>
Функция рендерит структуру из переданного кода html(xml) вместе с переданными элементами.