Страница 1 из 1

Mootools и jQuery в Joomla!

СообщениеДобавлено: 19 июл 2013, 03:06
alex
Те, кто делал сайты на Joomla, знают что в ней используется JavaScript-библиотека Mootools.
В Joomla 3.1 в админ-панели уже подключаются и Mootools и jQuery 1.8.3.
Я раньше часто задавался вопросом, во-первых, почему разработчики Joomla предпочли Mootools в качестве родной библиотеки, и второй вопрос, что не давал мне покоя: почему многие расширения для Joomla используют jQuery?
Что касается первого, думаю выбор Mootools связан с его объектно-ориентированностью, которую он дает разработчикам на JavaScript, в jQuery, ни о какой объктно-ориентированности в ядре библиотеки речи не идет, jQuery — это более высокоуровневая библиотека, созданная для манипуляции DOM-объектами и всевозможной анимации.
Фактически из объектно-ориентированных методов там есть только jQuery.extend(), который "Merge the contents of two or more objects together into the first object".
Mootools же — это более низкоуровневый JavaScript Framework, естественно, на нем можно реализовать все то же что и на jQuery, но с бОльшими трудозатратами. Но разработчиков Joomla в первую очередь интересовали именно низкоуровневость и объектно-ориентированность Mootools, т. к. они смотрели в перспективу.
Тут, мы плавно подошли как раз ко второму вопросу: почему многие разработчики расширений для Joomla используют jQuery?
Да потому что на самом деле они стараются адаптировать свои платные расширения не только для Joomla, но и для других CMS, а в дркгих CMS в большинстве используется как раз jQuery..
Вот и приходится подгружать 2 эти библиотеки порой, используя "jQuery.noConflict()".
Не удивлюсь, если недалеком в будущем команда Joomla полностью решит отказаться от Mootools в пользу jQuery.
Не настолько оказались востребованы объектно-ориентированные фишки Mootools, а обстоятельства давят в сторону jQuery.
А объектно-ориентированность, когда нужна, она и так с нуля на JavaScript реализуется разработчиками плагинов, взять те же JCE или TinyMCE.

В чистом JavaScript объект можно создать несколькими способами, например:

  1. var myObject = new Object(); // здесь используется корневой объект Object, на котором базируются все остальные объекты JavaScript, как встроенные в него типа Date, Array, String и т. п., так и прочие пользовательские.
  2. var myObject = {свойство1:значение1,свойство2:значение2[,свойствоN:значениеN...]} // — литеральная нотация создания объекта.
  3. var myObject = new someFunction() // — использование пользовательской функции-конструктора, — наиболее приемлемый вариант.
Создание полноценного объекта-конструктора обычно реализуется при помощи задания пользовательской функции, и затем создания объекта при помощи оператора "new" и этой пользовательской функции. Такой вариант наиболее практичен т. к. использование пользовательской функции(объекта)-конструктора позволяет реализовать наследование путём присвоения этой функции свойству "prototype" дочернего объекта. С первыми двумя вариантами создания объектов такой фокус не пройдет.
Код: Выделить всё
function Animal(name) {
this.name = name
this.canWalk = true
}
var cow = new Animal("cow")

Наследование реализуется путем игр со свойством "prototype", которое есть у любого пользовательского объекта-конструктора, этому свойству prototype назначается желаемый родительский объект.
Вообще, существует такая хорошо известная функция, реализующая наследование классов.
Код: Выделить всё
function extend(Child, Parent) {
var F = function() { }
F.prototype = Parent.prototype
Child.prototype = new F()
Child.prototype.constructor = Child
Child.superclass = Parent.prototype
}
На самом деле все это достаточно сложно, поэтому, пожалуй, достаточно.

В Mootools же, класс создается проще:
Код: Выделить всё
var MyClass = new Class(properties);

В конструктор класса в качестве параметров можно передать помимо обычных параметров и ряд специальных, которые позволяют выполнить наследовательность (параметр "Extends"), инициализацию (параметр "initialize") и как аналог вышеописанного метода "jQuery.extend" — (параметр "Implements").
Пример создания и наследования класса в Mootools:
Код: Выделить всё
var Animal = new Class({
    initialize: function(age){
        this.age = age;
    }
});
var Cat = new Class({
    Extends: Animal,
    initialize: function(name, age){
        this.parent(age); // calls initalize method of Animal class
        this.name = name;
    }
});
var myCat = new Cat('Micia', 20);
alert(myCat.name); // alerts 'Micia'.
alert(myCat.age); // alerts 20.


И не забываем, что JavaScript чувствителен к регистру символов, можно задать пользовательский конструктор "Class()", но "сlass()" вообще нельзя использовать т. к. "сlass" — зарезервированное слово в JavaScript.
Ну и естественно, при создании сайта, если у вас уже подгружается библиотека Mootools, то там используется переменная "$" как глобальный объект Mootools, по крайней мере до версии MooTools 1.2.3, где появился её аналог document.id.
Поэтому при конфликте версий MooTools до 1.2.3 и jQuery, нужно пользоваться методом jQuery.noConflict();.
В jQuery $ и jQuery — это алиасы. jQuery.noConflict() просто отказывается от использования глобального объекта-переменной "$", отдавая её во власть другой библиотеке.
Если же в коде, например плагине на jQuery используется "$", то этот код нужно обернуть (создать локальную область выполнения) в функцию, параметром которой будет "$" и вызвать её, передав ей объект jQuery.

Код: Выделить всё
jQuery.noConflict();
(function($) {
$(function() {
// код на jQuery с использованием "$" как объекта "jQuery" 
});
})(jQuery);
// А здесь "$" уже живет своей жизнью.


Часто при написании сценариев на JavaScript, необходимо дождаться полной загрузки документа, прежде чем позволить скрипту выполнять какие-то манипуляции. При этом важен именно сам полностью сформированный DOM-объект, и нет смысла дожидаться загрузки каких-то файлов типа изображений, видео и т. п., как это происходит при задании обработчика "window.onload".
В самом JavaScript для этих целей есть "readystatechange" и "DOMContentLoaded" но они не кроссбраузерны.
В общем, т. к. здесь мы рассматриваем 2 популярных библиотеки, естественно, в них уже есть свои реализации обработки события создания DOM-объекта.
В Mootools — это событие "domready":
Код: Выделить всё
window.addEvent('domready', function() {
    alert('The DOM is ready!');
});

В jQuery есть как минимум 2 способа:
1. Метод "ready" объекта "document":
Код: Выделить всё
$(document).ready(function() {
// Код на выполнение после готовности DOM.
});

2. Просто объектам "jQuery" или его псевдониму "$" передать в качестве параметра функцию:
Код: Выделить всё
$(function(){
// Document is ready
});

// Или:

jQuery(function(){
// Document is ready
});

// Или:

function myFunc(){ alert('Good') };
jQuery( myFunc() );