Введение в библиотеку Mootools

Что такое framework и для чего они нужны?
Введение в библиотеку Mootools
Плагины к библиотеке Mootools
Вопросы и ответы

Что такое framework и для чего они нужны?

Работая над созданием web-приложений приходится применять как серверные, так и клиентские скрипты. В качестве клиентских скриптов чаще всего применяется JavaScript. Только вот беда: одни браузеры понимают DOM, другие - не очень, в одних наблюдаются одни глюки, в других - другие. Написать приложение, которое нормально функционировало бы в разных браузерах - задача не из простых.

Так вот, одна из основных задач библиотек (frameworks) - обеспечить кроссбраузерность создаваемых приложений.
Дополнительно, библиотеки предоставляют набор классов и функций для реализации клиентских приложений. Обычно это:

функции общего назначения для работы с объектами и событиями
функции для реализации Ajax
функции для реализации визуальных эффектов (JavaScript анимация )

Из функций общего назначения наиболее известна $() - это короткий кроссбраузерный эквивалент document.getElementById()

Наиболее известные библиотеки:

Prototype - очень мощная библиотека. Ряд функций стали стандартом де-факто и заимствованы другими библиотеками
script.aculo.us - работает совместно с Рrototype
dojo
Rico
jQuery - компактная и достаточно популярная библиотека
mochikit
mootools

Надо как-нибудь сделать сравнительный обзор...

Введение в библиотеку Mootools

"MooTools - компактная, модульная, объектно-ориентированная JavaScript библиотека. Она позволяет создавать мощные, гибкие, кросс-браузерные приложения." - вот так примерно написано на сайте разработчиков. Модульность библиотеки подразумевает, что на сайте разработчика вы можете выбрать только нужные вам функции. Компактность кода достигается в том числе и упаковкой кода специальными компрессорами.

Mootools - My Object Oriented javascript.

Тут необходимо сделать лирическое отступление. "Что за бред!" - вот такой комментарий я получил на попытку дословного перевода документации mootools. И действительно, вспоминая свое знакомство с библиотеками, я понял, что первым делом я смотрел примеры применения, оценивая возможности библиотеки, а уже потом (при необходимости) переходил к документации. Так что, вынужден согласиться с критиком. Поэтому, пожалуй, начнем с примеров, а доками - закончим.

Примеры применения

Примеры применения можно посмотреть на сайте библиотеки (http://demos.mootools.net/), а здесь я постараюсь привести другие примеры и не дублировать (пока) то, что уже есть.

Первое, что мне потребовалось при написании Ajax-приложений - это вывести на экран скрытое окно и расположить его по центру экрана или рядом со ссылкой, при щелчке по которой данное окно появится.

показать окно по центру экрана

показать окно рядом с ссылкой

Документация

Вот полный набор модулей (классов) библиотеки версии 1.1:

CORE - базовые функции
- Core.js - основные функции библиотеки
CLASS - работа с классами
- Class.js - базовые функции для работы с классами
- Class.Extra.js
NATIVE - работа с типами
- Array.js
- Functions.js
- Number.js
- String.js
- Element.js
ELEMENT - работа с элементами
- Element.Selectors.js
- Element.Filters.js
- Element.Forms.js
- Element.Event.js
- Element.Dimentions.js
WINDOW - параметры окна и быстрый аналог onLoad
- Window.DomReady.js
- Window.Size.js
REMOTE - Ajax, куки, динамическая подгрузка стилей и скриптов
- XHR.js
- Ajax.js
- Assets.js
- Cookie.js
- Json.js
- Json.Remote.js
EFFECTS - анимация и переходы
Fx.Base.js
- Fx.CSS.js
- Fx.Style.js
- Fx.Styles.js
- Fx.Elements.js
- Fx.Scroll.js
- Fx.Slide.js
- Fx.Transition.js
DRAG - перемещение элементов
- Drag.Base.js
- Drag.Move.js
PLUGINS - визуальные эффекты
- Hash.js
- Hash.Cookie.js
- Color.js
- Group.js
- Scroller.js
- Slider.js
- SmoothScroll.js
- Sortables.js
- Tips.js
- Accordion.js

Core

* Класс частично основан на Base.js http://dean.edwards.name/weblog/2006/03/base/© 2006 Dean Edwards, Лицензия http://creativecommons.org/licenses/LGPL/2.1/
* Некоторые функции заимствованы из prototype.js http://prototype.conio.net/© 2005 Stephenson, лицензия MIT-style
* Документация: Aaron Newton (aaron.newton [в] cnet [точка] com) & Valerio Proietti.

Основные функции:

$defined - возвращает true если передаваемое значение(объект) определены, то есть не null и не undefined
$type - возвращает тип передаваемого элемента
Пример:

    var myString = 'hello';$type(myString); //возвращает "string"

Возвращаемые значения:

’element’	элемент DOM
’textnode’	текстовый узел DOM
’whitespace’	DOM whitespace node
’arguments’	аргумент объекта
’object’	объект
’string’	строка
’number’	целое число
’boolean’	булево
’function’	функция
’regexp’	регулярное выражение
’class’	класс
’collection’	коллекция html-элементов, таких как childNodes, getElementsByTagName ..и т д.

$merge - рекурсивно объеденяет ряд объектов, не ссылаясь на них и их под-объекты
Пример:

    var mergedObj = $merge(obj1, obj2, obj3);//obj1, obj2, and obj3 не изменяются при этом

$extend - копирует все свойства второго передаваемого объекта в первый
Пример:

var firstOb = {    'name': 'John',    'lastName': 'Doe'};var secondOb = {    'age': '20',    'sex': 'male',    'lastName': 'Dorian'};$extend(firstOb, secondOb);//firstOb становится:{    'name': 'John',    'lastName': 'Dorian',    'age': '20',    'sex': 'male'};

$native Will add a .extend method to the objects passed as a parameter, but the property passed in will be copied to the object’s prototype only if non previously existent.
$chk - возвращает true если передаваемое значение(обьект) существует или равно 0, иначе возвращает false.
$pick - возвращает первый переданный обьект, если он определен, иначе - второй
Пример:

    function say(msg){    alert($pick(msg, 'no meessage supplied'));}

$random - возвращает случайное целое число, лежащее в диапазоне между двумя переданными параметрами
$time - возвращает текущую метку времени (integer)
$clear - сбрасывает таймер
Пример:

    var myTimer = myFunction.delay(5000); //ждет 5 секунд и выполняет функциюmyTimer = $clear(myTimer); //очищает

См также: Function.delay, Function.periodical

Класс Abstract

Abstract class, to be used as singleton. Will add .extend to any object

Arguments

an object

Returns

the object with an .extend property, equivalent to $extend.

класс window

Некоторые свойства объекта window для определения типа браузера.

Свойства

window.ie	возвращает true, если браузер - ИЕ (любой)
window.ie6	ИЕ6
window.ie7	ИЕ7
window.gecko	Mozilla/Gecko.
window.webkit	Safari/Konqueror.
window.webkit419	Safari2 / webkit till version 419.
window.webkit420	Safari3 (Webkit SVN Build) / webkit over version 419.
window.opera	Opera.

Class.js

empty	Returns an empty function
extend	Returns the copy of the Class extended with the passed in properties.
implement	Implements the passed in properties to the base Class prototypes, altering the base class, unlike Class.extend.

top Class

The base class object of the http://mootools.net framework. Creates a new class, its initialize method will fire upon class instantiation. Initialize wont fire on instantiation when you pass null.

Arguments

properties

the collection of properties that apply to the class.

Example

    var Cat = new Class({    initialize: function(name){        this.name = name;    }});var myCat = new Cat('Micia');alert(myCat.name); //alerts 'Micia'

Summary

Properties
empty	Returns an empty function
extend	Returns the copy of the Class extended with the passed in properties.
implement	Implements the passed in properties to the base Class prototypes, altering the base class, unlike Class.extend.

top Properties

top empty

Returns an empty function

top extend

Returns the copy of the Class extended with the passed in properties.

Arguments

properties

the properties to add to the base class in this new Class.

Example

    var Animal = new Class({    initialize: function(age){        this.age = age;    }});var Cat = Animal.extend({    initialize: function(name, age){        this.parent(age); //will call the previous initialize;        this.name = name;    }});var myCat = new Cat('Micia', 20);alert(myCat.name); //alerts 'Micia'alert(myCat.age); //alerts 20

top implement

Implements the passed in properties to the base Class prototypes, altering the base class, unlike Class.extend.

Arguments

properties

the properties to add to the base class.

Example

    var Animal = new Class({    initialize: function(age){        this.age = age;    }});Animal.implement({    setName: function(name){        this.name = name    }});var myAnimal = new Animal(20);myAnimal.setName('Micia');alert(myAnimal.name); //alerts 'Micia'

Плагины к библиотеке Mootools

Вопросы и ответы

Последнее обновление 05.11.2009 00:35