Внутрішні функції m.js
Компактний код - просте використання
В нашому JS фреймворку m.js є ряд влаштованих функцій, котрі можуть бути застосованими до елементів, які огорнуті в об'єкт m, наприклад так:
m('#some-id .some-class')
Такий екземпляр m містить масиво-подібний набір елементів у внутрішній змінній elements. Ці елементи можна обійти як масив чи первірити їх кількість через length самого екземпляра m.
Більшість внутрішніх функцій повертають той самий екземпляр m, то ж цілком виправдане об'єктно-орієнтоване використання функцій, на зразок такого:
m('nav a')
.class({wait: null, active: true})
.append('<i class="fa fa-angle-down"></i>')
.on('click', function(){
console.log(this);
});
Спробуємо описати кожну з внутрішніх функцій окремо. Зверніть увагу, що не всі з них повертають екземпляр m з набором елементів!
| Функція |
Опис |
|---|---|
| active_toggle(context) | Ініціює перемикання класу "active" на елементі context при натисненні на кожен з елементів набору. Повертає той самий екземпляр m з набором елементів. |
| after(html) | Вставляє код після кожного з елементів набору. Повертає той самий екземпляр m з набором елементів. |
| animate(properties, duration, callback) | Виклик анімації кожного з елементів набору з властивостями properties, з тривалістю ефекту duration та з викликом callback() по завершенню анімації. Повертає той самий екземпляр m з набором елементів. |
| append(node) | Вставляє код node всередину (в кінець всіх внутрішніх елементів) кожного з елементів набору. Повертає той самий екземпляр m з набором елементів. |
| attr(name, val) | Встановлює кожному елементу набору атрибут name з властивістю val. Повертає той самий екземпляр m з набором елементів, або текстове значення атрибуту name у випадку, якщо val порожня. |
| before(html) | Вставляє код html перед кожним з елементів набору. Повертає той самий екземпляр m з набором елементів. |
| change() | Ініціює штучний виклик події change над кожним елементом набору. Повертає той самий екземпляр m з набором елементів. |
| children(selector) | Вибирає потомка в DOM за селектором selector, якщо той відсутній, то повертає першого потомка в екземплярі m. Повертає новий екземпляр m з набором елементів. |
| class(class_name, val) | Встановлює чи повертає CSS клас набору елементів чи першого елементу відповідно, якщо val не задано. Аргумент class_name може бути об'єктом з кількома класами для встановлення/вимикання кількох класів за один обхід набору елементів, наприклад: {active: true, hidden: null, loading: true}. Також, val може бути текстовим ":toggle", що дасть перемикання наявності CSS класу. Повертає той самий екземпляр m з набором елементів. |
| click() | Ініціює виклик події click над кожним елементом набору. Повертає той самий екземпляр m з набором елементів. |
| clone() | Клонує перший елемент набору з усіма його дочірними елементами. Повертає новий набір з 1 елементом. Колонування подій, прив'язаних до першого елементу набору, не налаштовано і не досліджено повністю. |
| closest(selector, context) | Повертає в наборі елементів m найближчий по ієрархії батьківський контейнер, що відповідає селектору selector або false у випадку незнаходження відповідності. |
| css(prop, val) | Встановлює CSS-значення style кожному з елементів набору або повертає значення конкретної властивості, якщо val відсутнє. Атрибут prop може бути простим об'єктом і встановлювати набір CSS-значень за один обхід елементів набору. Повертає той самий екземпляр m з набором елементів, або значення конкретної властивості. |
| dom(selector, context) | Внутрішня функція, рідко використовується з-зовні m.fn. Знаходить набір елементів за селектором selector в context. Якщо context порожній, пошук відбувається в глобальному об'єкті document. Повертає масиво-подібний набір елементів, навіть якщо їх кількість 0. |
| each(callback) | Застосовує ф-цію callback до кожного з елементів набору методом call() , тобто в середині ф-ції callback() контекст this стає кожним елементом набору по черзі. Повертає той самий екземпляр m з набором елементів. |
| event(name, func) | Дозволяє асоціювати певну функцію func до елементів набору за назвою події name. Або ж, повертає раніше асоційовану функцію за тією ж назвою події name. Слугує для ініціації подій над елементами для запобігання дублів однакових функцій при одній і тій же самій події. Повертає той самий екземпляр m з набором елементів. |
| event_fire(event_type) | Генерує штучний виклик функції заданого типу за event_type над кожним елементом набору. Наприклад: click, change, load, resize, тощо. Повертає той самий екземпляр m з набором елементів. |
| find(selector) | Намагається знайти всіх потомків в першому елементі набору за CSS-селектором. Повертає той новий екземпляр m з набором елементів, навіть якщо їх кількість - 0. Рекомендується перевірка через length перед подальшими діями! |
| first | Використовується як властивість без аргументів, на зразок m('.selector').first . Повертає перший елемент набору, якщо набір не порожній або null. Зверніть увагу, що такий елемент не є екземпляром m, а звичайним HTMLElement. Рекомендується перевірка на співпадіння з null перед подальшими діями. |
| form_collect() | Збирає з редагованих полів першого елементу набору (це не обов'язково має бути форма) всі їх імена та значення в простий об'єкт. Зачасту слугує для передачі даних через Ajax. |
| form_populate(obj) | Заповнює всі редаговані поля першого елементу набору (це не обов'язково має бути форма) даними з простого об'єкту obj. Повертає той самий екземпляр m з набором елементів. |
| hide() | Приховує кожен з елементів набору через встановлення CSS класу 'hidden'. Повертає той самий екземпляр m з набором елементів. |
| hover() | Ініціює штучний виклик події hover та виклик прив'язаної функції. Повертає той самий екземпляр m з набором елементів. |
| html(html) | Якщо html не порожнє, встановлює через innerHTML в перший елемент набору, повертає той самий екземпляр m з набором елементів. Якщо html порожній текст або null, очищає вміст першого елементу набору через innerHTML, повертає той самий екземпляр m з набором елементів. Якщо html порожній (undefined), повертає innerHTML першого елементу набору. |
| i18n(key) | Використовується без набору елементів. Функція намагається знайти і повернути текстовий відповідник в отриманому раніше об'єкті перекладів за ключем key. Якщо відповідник не знайдено, повертає назад той же key. |
| init() | Рідко використовується з-зовні, більш "внутрішня" функція. Слугує для включення скриптів модулів і їх запуску, якщо в елементів набору є атрибути data-m-action. Повертає той самий екземпляр m з набором елементів. |
| interval_animate(properties, duration, callback) | Аналог animate() для старіших браузерів. Повертає той самий екземпляр m з набором елементів. |
| is(selector) | Виконує перевірку чи відповідає перший елемент набору результату пошуку в батьківському елементі за вказаним селектором. Повертає true або false. |
| last | Використовується як властивість без аргументів, на зразок m('.selector').last . Аналогічно до first, повертає останній елемент набору. Зверніть увагу, що такий елемент не є екземпляром m, а звичайним HTMLElement. Рекомендується перевірка на співпадіння з null перед подальшими діями! |
| length | Використовується як властивість без аргументів, на зразок m('.selector').length . Підраховує кількість елементів набору. Найкраще слугує для перевірки чи є в наборі після пошуку за селектором елементи взагалі. Повертає int. |
| load_script(action, callback) | Функція, в основному, застосовується по відношенню до body. Намагається вставити в тіло сторінки асинхронний скрипт модулю за назвою action та CSS за тією ж назвою. Далі викликає функцію callback. Використовується в основному в init(). |
| next(selector) | Намагається знайти наступний за першим елементом набору елемент-родич на тому ж рівні ієрархії за CSS селектором selector. Повертає або екземпляр m, або false. Якщо ж selector null або undefined, бере наступний елемент за першим елементом набору через nextElementSibling. |
| nth(n) | Дозволяє взяти HTMLElement з набору за його номером в наборі (починаючи з 0). Зверніть увагу, що такий елемент не є екземпляром m, а звичайним HTMLElement. |
| obj_merge(dst, src) | Дозволяє об'єднати простий одномірний об'єкт src з об'єктом dst. Не має внутрішніх елементів в наборі, викликається через m.fn.obj_merge(dst, src). Повертає об'єкт dst. |
| off(events) | Вимикає функції подій, прив'язані до елементів набору за назвами в events (можна декілька через пробіл) . Повертає той самий екземпляр m з набором елементів. |
| offset() | Намагається визначити розташування першого елементу набору на сторінці. Повертає простий об'єкт {top: int, left: int}. |
| on(events, callback) | Прив'язує функції callback до кожного елементу набору за подіями в events (можуть бути декілька через пробіл). Повертає той самий екземпляр m з набором елементів. |
| parent(selector) | Шукає прямий батьківський елемент за селектором або через closest(). Повертає екземпляр m з 1 елементом або false. Рекомендується перевірка на length перед подальшими діями! |
| prepend(node) | Аналогічно до append() вставляє на початок кожного елементу в наборі елемент node. Повертає той самий екземпляр m з набором елементів. |
| prev(selector) | Аналогічно до next(), намагається взяти попереднього "родича" до першого елементу набору за селектором selector. Повертає екземпляр m з 1 елементом або false. Рекомендується перевірка на length перед подальшими діями! |
| ready(callback) | Кріпить ф-цію callback на подію onreadystatechange та onload першого елементу набору. Зазвичай такий елемент - body, image, script, тощо. Повертає той самий екземпляр m з набором елементів. |
| remove() | Знищує всі елементи набору через removeChild() та знищує поточний екземпляр m. Повертає нетипове false. |
| remove_script(action) | Знищує інтеграцію скрипту модуля в DOM за його назвою в action. Повертає те ж саме false, що й remove(). |
| replace(node) | Замінює кожен з елементів набору елементом з node. Використовується replaceChild(). Повертає той самий екземпляр m з набором нових елементів. |
| replace_with(m_element) | Виконує заміну елементів поточного набору з елементами з набору m_element. Повертає той самий екземпляр m з набором нових елементів. |
| show() | Змінює видимість всіх елементів набору, видаляючи CSS клас 'hidden' та встановлюючи CSS стиль "display: 'block'". Повертає той самий екземпляр m з набором елементів. |
| slide(direction) | Застосовує animate() до кожного елементу набору, змінюючи їх висоту в залежності від значення direction: 'down' - розгортає вниз з 0 до 100% висоти, ':toggle' - обернено розкриває або приховує кожн з елементів, 'up' або будь-яке інше значення - згортає кожен з елементів набору до 0px за висотою. Повертає той самий екземпляр m з набором елементів. |
| submit() | Ініціює штучний виклик події submit та виклик прив'язаної функції. Повертає той самий екземпляр m з набором елементів. |
| text() | Аналогічно до html(), хоча без аргументу і можливості запису, намагається отримати внутрішній текст першого елементу набору. Повертає TextNode або null. |
| toggle() | Змінює CSS властивість display між 'none' та 'block' в кожному елементі набору. Повертає той самий екземпляр m з набором елементів. |
| translate() | Намагається перекласти мовні змінні з шаблону m-framework (слова латиницею, обрамлені символами *) на значення за допомогою ф-ції m.i18n() з раніше отриманого JSON-об'єкту перекладів. Повертає той самий екземпляр m з набором елементів. |
| val(val) | Намагається отримати значення через стандартну ф-цію value першого елементу в наборі (як правило - текстові поля чи checkbox) та повернути його якщо аргумент val порожній. У випадку, якщо аргумент val не порожній, встановлює значення з val кожному елементу з набору через стандартну функцію value та повертає той самий екземпляр m з набором елементів. |
| visible() | Первіряє чи всі елементи набору є видимі в поточному фокусі вікна. Повертає булевий результат (true|false). |
| wrap(node) | Огортає кожен з елементів набору елементом з node. Події оригінальних елементів мають бути без змін прикріплені до них, тобто не втрачаються при огортанні. Повертає той самий екземпляр m з набором елементів. |
Задавайте свої запитання у формі нижче. Ми спробуємо відповісти якнайшвидше.
Коментарі користувачів
Вибачте, Ви не можете залишити коментар. Спробуйте авторизуватись за допомогою логіну та паролю або скористайтеся однією з соціальних мереж: