ФЭНДОМ


Js

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

Фоновая подгрузка данных об участнике, когда статичная информация уже доступна

Технология, что позволяет создавать асинхронные запросы. Если на Викии Вики зайти на страницу, посвящённую участнику, то можно заметить, что данные в инфобоксе подгружаются в фоновом режиме через некоторое время после загрузки прочих элементов страницы. Это становится возможным благодаря использованию этой технологии — браузер ожидает завершения подгрузки данных об участнике вне зависимости от состояния основного содержимого страницы. Это особенно полезно при использовании медленного Интернет-соединения, так как позволяет сразу начать читать текст страницы, пусть и без дополнительных элементов.

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).

Управление скриптами

Статус пользовательского JS

Блок «Статус пользовательского 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. Список написанных пользователями скриптов можно найти здесь.

Полезные ресурсы

Обучение

Справочные материалы

См. также

Примечания

  1. Назначение модератором прямо в чате
  2. https://github.com/lukehoban/es6features
  3. http://kangax.github.io/compat-table/es5/
  4. http://kangax.github.io/compat-table/es6/
  5. AjaxPatrol
  6. MarkBlocked
  7. Javascript code not working…
  8. https://phabricator.wikimedia.org/T96901
  9. https://phabricator.wikimedia.org/T75714
  10. Проблемы безопасности
  11. Обновления безопасности, часть 2
  12. Википедия: Администраторы интерфейса
  13. Подробнее об импортировании скриптов
  14. Подробнее о политике настроек
Материалы сообщества доступны в соответствии с условиями лицензии CC-BY-SA , если не указано иное.