JavaScript (скор. JS) — мова програмування, широко використовуваний і де-факто є стандартом не тільки в браузерах, різних додатках, але і яка не оминула рушій Фандома: MediaWiki. На Фандома має унікальну особливість в реалізації, яку більш ніде не можна зустріти.
Використання[]
Одна з головних задач JavaScript полягає в забезпеченні інтерактивності сторінки. У той час як HTML (вікі-розмітка) створить «скелет» сторінки, CSS — її вигляд, то JS вдихне в сторінку життя. Так, на Фандомі JavaScript в тій чи іншій мірі забезпечує роботу всіх редакторів — головних інструментів редактора, без винятку: клавіші швидкої вставки, попередній перегляд змін або навіть сам по собі редактор цілком, як у випадку з візуальним — все це працює завдяки цій мові програмування. JavaScript дозволяє також, наприклад, бачити і редагувати коментарі або повідомлення стіни обговорень відразу і без оновлення сторінки, що набагато зручніше, ніж просто переміщення по сторінках. І це далеко не повний перелік використань цієї мови програмування.
Таким чином JavaScript знаходить застосування серед розробників MediaWiki. Але однією з особливостей рушія є і той факт, що кожен користувач може підключити будь-які додаткові модулі, використовуючи лише особисті сторінки. На даний момент створено величезну кількість модулів aka скриптів — програм, призначених для виконання в браузері, вирішальних самі різні завдання: від автоматичного виконання редагувань до повернення колись вилучених функцій[1]. Нехай ці скрипти не включені в код рушія (а значить не завантажуються і не виконуються), користувач може підключати будь-який потрібний скрипт або скрипти, або написати власний у міру появи в цьому необхідності.
Однак, цим можуть бути вирішені їм завдання не обмежуються. Мова також використовується для програмування ботів і додаткових програм; причому це можуть бути як ті, що працюють прямо в браузері — Javascript Wiki Browser, так і повноцінні програми, реалізовані, наприклад, через «Electron».
Можна зробити вивід, що JavaScript — дуже потужний інструмент, що дозволяє вирішувати цілий ряд самих різних завдань, які постали перед користувачами рушія, окремими користувачами або вікі-проєктами в цілому.
Характеристика[]
Перевагою JavaScript є підтримка різних стилів програмування: об'єктно-орієнтованого, імперативного та функціонального. Мова управляє пам'яттю автоматично, використовуючи збирач сміття. JavaScript можна назвати інтерпретованою мовою, і не дивлячись на відмінності в реалізації його обробки в різних браузерах, його код завжди виконується негайно. Так як на вікі в переважній більшості випадків інтерпретатором є браузер користувача, то в теорії не всі браузери можуть в повній мірі підтримувати і однаково обробляти всі можливості мови.
Якщо в період 1995-2015 мову існував, зазнаючи істотних змін, то в 2015 році був випущений стандарт EcmaScript-2015 (ES-6); стандарт значно розширив можливості мови[2]. Хоча більшість сучасних браузерів підтримує основну масу нововведень ES-2015[3] или ES-2016[4], виникла ситуація, коли не всі вони підтримуються движком MediaWiki через використання ResourceLoader (Див. відповідний розділ).
Класичний приклад з Hello, world! може виглядати ось так:
alert("Hello, world!");
У мові використовується динамічна типізація, тому можна міняти тип змінної на ходу; оголошувати тип змінної також не потрібно:
var a = "test"; alert(a); //-> 'test'
a = 1; alert(a); //-> 1
a += "test"; alert(a); //-> '1test'
На Фандомі JavaScript найчастіше виконується в браузері, де виробляє певні маніпуляції зі сторінкою. Однак сам по собі мова JavaScript не передбачає роботи з браузером. Замість цього JS використовує два об'єкти:
- DOM або Об'єктна модель документа — дозволяє взаємодіяти з вмістом сторінки. Через DOM можна робити все що завгодно з HTML-елементом і його вмістом. Так, можна приховати все всередині тега
<body>, таким чином приховав усю сторінку:
document.body.style.display = "none";
- BOM або Браузерна модель документа — дозволяє взаємодіяти з оточенням сторінки. З огляду на специфічності використовується значно рідше, ніж DOM. Через BOM можна, наприклад, отримати інформацію про браузер користувача:
navigator.userAgent;
Однак в «чистому» вигляді JavaScript використовується на Фандомі не часто. Часто до нього додається технологія Ajax і бібліотека jQuery.
Ajax[]
Фонова подгрузка даних про користувача, коли статична інформація вже доступна
Технологія, що дозволяє створювати асинхронні запити. Якщо на Вікі про Вікі зайти на сторінку, присвячену користувачу, то можна помітити, що дані в інфобоксі завантажуються у фоновому режимі через деякий час після завантаження інших елементів сторінки. Це стає можливим завдяки використанню цієї технології — браузер очікує завершення подгрузки даних про користувача незалежно від стану основного вмісту сторінки. Це особливо корисно при використанні повільного Інтернет-з'єднання, так як дозволяє відразу почати читати текст сторінки, нехай і без додаткових елементів.
Ajax використовується в більшості користувацьких JavaScript-скриптів, де дозволяє не тільки отримувати дані про користувача в фоні, а й, наприклад, патрулювати редагування без переходу на додаткові сторінки[5] або викреслити заблокованих користувачів[6] зі списків.
jQuery[]
Популярна бібліотека, що за замовчуванням включена на сторінках кожної вікі Фандому. Продукція, що поставляється таким чином версія: 1.8.2, в той час як останній станом на квітень 2018 року є 3.3.1. Бібліотека полегшує розробку скриптів, реалізуючи потрібні розробникові функції. Наприклад, код, який за допомогою Ajax отримає вміст цієї сторінки може виглядати так:
var xhr = new XMLHttpRequest();
xhr.open("GET", "api.php/api.php?action=query&prop=revisions&titles=JavaScript&rvprop=content&format=json", true);
xhr.onload = function() {
if (xhr.status === 200) {
console.log("Вміст сторінки: " + xhr.responseText);
}
};
xhr.send();
Або так при використанні jQuery:
$.get("api.php/api.php?action=query&prop=revisions&titles=JavaScript&rvprop=content&format=json", function(data){
console.log("Вміст сторінки: " + data);
});
В результаті код стає куди простіше і лаконічніше.
Звичайно, функціонал jQuery не обмежений одними лише запитами. Найголовніша функція бібліотеки — це jQuery або її скорочений варіант $. Функція дозволяє легко і просто знайти будь-який елемент сторінки за заданими критеріями. Ось так можна знайти все абзаци на сторінці (в дужках вказано ім'я HTML-тега для абзаців):
$("p");
До знайдених абзаців можна застосувати необхідні дії. Наприклад, перефарбувати колір тексту і додати CSS-клас:
$("p").css("color", "white").addClass("custom");
Таким чином, jQuery може як значно полегшити розробку скриптів, так і прискорити її, звільняючи програміста від реалізації багатьох алгоритмів.
Оптимизация[]
- Загальна стаття: ResourceLoader
З виходом MediaWiki версії 1.17 (Фандом використовує 1.19) була випущена система під назвою «ResourceLoader», що значно оптимізує доставку ресурсів: JavaScript, CSS, деяких зображень до користувачів. Виграш отримують як розробники скриптів, так і всі користувачі вікі.
Розробникам немає потреби піклуватися про оптимізацію: ResourceLoader автоматично вилучяє непотрібні проблеми під час мініфікаціі коду (максимального його стиснення з урахуванням збереження читаності людиною). Крім цього, система додає потрібні розробникові змінні на кожній сторінці вікі, в результаті можна отримати мову всієї вікі всього одним рядком коду:
mw.config.get('wgContentLanguage'); //-> ru
Додатково, ResourceLoader надає «хукі» (від англ. «Hooks»). Це дозволяє виконати код в певних ситуаціях, наприклад, тільки після завантаження основного вмісту сторінки:
mw.hook( 'wikipage.content' ).add(function() {
// ...
});
З іншої сторони, ResourceLoader за станом на квітень 2018 року ні на Фандомі[7], ні на MediaWiki [8][9] не підтримує новітні можливості мови. Розробники повинні писати код згідно стандарту ES3, але методи повинні бути доступні і в ES6.
Користувачі отримують максимальну швидкість завантаження сторінки: весь код (як частина оптимізуються ресурсів) стискається і об'єднується таким чином, що доставляється від сервера до користувача з максимальною ефективністю. Однак адміністраторам проєкту варто бути обережніше з множинним імпортом скриптів, оскільки неправильні дії можуть знизити ефективність системи. В ідеалі скрипти повинні завантажуватися через сторінку ImportJS, але, якщо це неможливо, потрібно використовувати функцію importArticles (див. FANDOM Open Source Library).
Керування скриптами[]
Блок «Статус користувацького JavaScript»
Користувальницькі скрипти для вики завантажуються з ряду MediaWiki-сторінок, головною з яких є MediaWiki:Common.js — скрипти з цієї сторінки будуть завантажуватися на всіх сторінках вікі у всіх скінів. Крім того, для кожного скіна можна завантажувати окремі сценарії, за допомогою сторінки типу MediaWiki:НазваСкіна.js (приклад: MediaWiki:Wikia.js — сценарії з цієї сторінки будуть завантажені тільки для скіна Oasis). Втім, після вилучення додаткових скінів, цей поділ втратило функцію поділу скінів, але все ще може використовуватися для структуризації скриптів. Швидко виконати код можна, використовуючи і вбудовану консоль браузера (але потрібно враховувати, що поведінка в консолі і в реальних умовах може відрізнятися).
Головна відмінність Фандома від інших вікі-проєктів області JS — система перевірки коду. JavaScript виповнюється на стороні клієнта і має повний доступ до сторінки, на якій працює. Подібна поведінка може бути небезпечним для користувачів, наприклад, можливо перехопити сесію або опублікувати небажане повідомлення від імені іншої людини. Тому у вересні 2015 року було випущено система, яка запобігає виконанню неперевіреного коду (а бонусом також відкидає неробочі скрипти). Приводом до початку активних дій став злом ряду облікових записів хоча плани з регулювання цій галузі з'явилися і раніше[10]. Під час введення системи одним з питань було відсутність подібної системи на Вікіпедії та інших великих ресурсах[11]. Причина криється в різній архітектурі: на Фандомі дуже велика кількість різних проєктів, і далеко не завжди на проєкті є люди, здатні стежити за скриптами. При цьому, на тій же Вікіпедії влітку 2018 року було введено додатковий статус «Адміністратори інтерфейсу», що розмежовують редагування JS і CSS файлів всього сайту від редагування інших MediaWiki-повідомлень[12].
Тепер кожне редагування JS за запитом адміністраторів перевіряється спеціальною командою співробітників — перевіряючі змісту, що стежать за безпекою скриптів. На всіх сторінках JS, які виконуються для багатьох користувачів, присутні спеціальні блоки «Статус користувача JavaScript», де можна подивитися, чи перевірена остання версія, а маючи статус адміністратора і вище: відправити її на перевірку або увійти в тестовий режим, при цьому будуть довантажуватися останні, а не перевірені версії JS.
Особисті скрипти[]
Крім загальних для вікі сторінок, користувачі можуть використовувати особисті підсторінки для завантаження скриптів тільки для себе особисто, а не для всіх користувачів. Підсторінки працюють відразу, без перевірки і іменуються за наступним принципом: Користувач:ІмяКористувача/назва_скіна_з_великої_літери.js (приклад: Користувач:ІмяКористувача/common.js). Щоб зазначені на них скрипти працювали, потрібно підключити в налаштуваннях опцію «Включити персональний JavaScript» («Різне»-"Додаткові опції").
Для застосування сценаріїв відразу до всіх вікі на Фандомі (тільки для одного користувача, а не для всіх користувачів вікі-проєктів), їх необхідно додати на сторінку Користувач:ІмяКористувача/global.js.
Імпорт[]
Крім того, скрипт може міститися на будь-який MediaWiki сторінці з розширенням «js», і може бути імпортований за допомогою декількох стандартних для цього гостингу і MediaWiki методів. Для імпорту скриптів на сторінки можна використовувати метод importArticles. Він був розроблений для об'єднання декількох окремих запитів до сторінок, що дозволило прискорити завантаження і виконання скриптів і сторінок стилів при використанні даного методу[13].
ImportJS[]
Рекомендована альтернатива методу importArticles, дозволяє підключати локальні скрипти і скрипти з Dev Wiki. На відміну від інших сторінок, ImportJS працює на всіх нових вікі без необхідності робити запит в Contact. Для використання цього методу потрібно записати шлях до скрипту на сторінку MediaWiki:ImportJS. Робиться це в такий спосіб:
- Якщо скрипт локальний (тобто знаходиться на вашій вікі), введіть назву містить скрипт сторінки. Наприклад, ввівши
Cat.js, ви підключите скрипт зі сторінки MediaWiki:Cat.js. - Якщо скрипт узятий з Dev Wiki, потрібно підставити префікс
dev:, приклад —dev:AjaxRC.js.
Увага: Поки на вашій Вікі не буде підключений користувацький JavaScript, MediaWiki:ImportJS не буде доступний для редагування.
Основний плюс ImportJS в тому, що імпортується скрипт не вимагає перевірки і зберігається відразу ж. Проте дана опція підвантажує сценарії в останню чергу.
JavaScript та політика налаштувань Фандома[]
У той час як JavaScript дозволяє змінювати і модифікувати будь-який елемент на вікі, багато зміни заборонені умовами користування та політикою налаштувань Фандома. Зокрема, під суворою забороною знаходяться модифікації глобального навігаційного меню, значні зміни в правій інформаційної колонці (т. Зв. Рейці або WikiaRail), будь-які модифікації динамічного макета сторінки, а також будь-які сценарії, які можуть навмисно або ненавмисно нести незручності і/або шкоду користувачам, перешкоджати відображенню тексту статей, інтерфейсу і рекламних оголошень, негативно впливати на інші елементи сайту[14].
База користувацьких скриптів[]
Так як скрипти на JavaScript досить популярні серед технічно підкованих користувачів вікі, користувачів під контролем співробітників збирають їх в одній базі коду — Fandom Open Source Library. Список написаних користувачами скриптів можна знайти тут.
Корисні ресурси[]
Навчання[]
- Обучающая книга (платно, англійська);
- Coursera (безкоштовно, англійська);
- Mozilla Developer Network (безкоштовно, англійська);
- CodepLayer (безкоштовно, англійська).
Довідкові матеріали[]
Див. також[]
Примітки[]
- ↑ Призначення модератора прямо в чаті
- ↑ https://github.com/lukehoban/es6features
- ↑ http://kangax.github.io/compat-table/es5/
- ↑ http://kangax.github.io/compat-table/es6/
- ↑ AjaxPatrol
- ↑ MarkBlocked
- ↑ Javascript code not working…
- ↑ https://phabricator.wikimedia.org/T96901
- ↑ https://phabricator.wikimedia.org/T75714
- ↑ Проблеми безпеки
- ↑ Оновлення безпеки, частина 2
- ↑ Вікіпедія: Адміністратори інтерфейсу
- ↑ Детально про імпортування скриптів
- ↑ Детальніше про політику налаштувань
| Загальні | |
|---|---|
| Спеціалізовані |
|
| Для роботи з ботами |
|