HTML5 [1]
CSS3 [1]
JavaScript [3]
JS in HTML5 [4]
Canvas (Context2D) [1]
Canvas (WebGL) [0]
Browser Technologies [2]
jQuery [1]
ExtJS [0]
Prototype.js [2]
SVG [2]
Browsers [2]
Mozilla Plugins [0]
XUL, Jetpack, etc.
Web [2]
MeowW [4]
iOS [0]
Алгоритмы [0]
Криптография [0]
Теория игр [0]
Теория вероятностей [0]
Математика [1]
Мат. анализ [0]
Алгебра [0]
Дискретная математика [0]
Теория графов [0]
Комбинаторика [0]
Теория чисел [0]
Комплексный анализ [0]
Матлогика [0]
Математическая логика, её связь с теорией алгоритмов и т.п.
Тензоры [0]
Геометрия [0]
Топология [0]
Дифференциальная геометрия [0]
Дифференциальные уравнения [0]
26 Июнь 2011 в 12:01:25
19:51:00
Основы prototype

What is prototype.js?

Prototype.js - это кроссбраузерная JavaScript-библиотека, которая может облегчить работу с Web страницей. К слову говоря, она используется в серверном фреймворке Ruby on Rails, на котором, к слову говоря, написан Twitter. Давайте сразу скажу, почему я упорно называю её Prototype.js, а не просто Prototype. Дело в том, что в JS есть одноимённый объект - prototype. И есть он у всех объектов и вообще у всего кроме null и undefined, которые объектами не являются.
И это не случайность - что они называются одинаково. Prototype.js расширяет стандартные объекты браузера и вообще JavaScript. Ну а такое вот расширение производится через объект prototype. Профессионалы и гуру JS называют Prototype.js "фреймворком созданном непрофессионалами для непрофессионалов", а подобный метод - "monkey patching". Действительно метод, используемый prototype.js, может конфликтовать с браузерами, да и с другими скриптами. Однако он удобен, и против этого не возразишь. Ладно, не будем здесь говорить - хорошо это или плохо. Изучив prototype.js, вы сами всё узнаете и поймёте.

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

Prototype имеет несколько основных функций. Это самые основы Prototype и их хорошо надо знать.

$

Как-то нравится всем разработчикам JS-фреймворков функция доллара ($). jQuery её предоставляет для получения элемента по селектору. Prototype, как и Mootools, работает совершенно по другому. $ в ней является всего лишь сокращением функции document.getElementById. К слову сказать: элемент по этой функции возвращается уже расширенный с помощью Prototype.

Внимание! Для использования jQuery совместно с Prototype, необходимо применить функцию jQuery.noConflict(). В таком случае jQ освободит функцию доллара $ для Prototype, а сам останется доступен по функции jQuery. Правда это может уменьшить совместимость с плагинами; а функцию $ во всех jQ-скриптах придётся заменить на функцию jQuery.

Code
alert( $('mydiv') ); // [object HTMLDivElement]

Ещё такой момент. Можно передать сразу несколько параметров. Тогда будет возвращено несколько элементов.

Code
alert( $('mydiv', 'mydiv2', 'mydiv3') );  // [object HTMLDivElement],[object HTMLDivElement],[object HTMLDivElement]

Разумеется, все переданные элементы будут расширены. Тут есть ещё интересный момент. Можно передать элемент напрямую - тогда он тоже вернётся и будет расширен.

Code
alert( $('mydiv', document.getElementById('mydiv2'), 'mydiv3') );  // [object HTMLDivElement],[object HTMLDivElement],[object HTMLDivElement]
$$

А вот эта функция уже, как и в Mootools, возвращает элемент по CSS-селектору. Разумеется, можно также передать и несколько параметров. А вот элемент уже передать нельзя.

Code
$$('#mydiv'); // [object HTMLDivElement]  $$('div'); // [object HTMLDivElement],[object HTMLDivElement],[object HTMLDivElement]  $$('#mydiv', '#mydiv2'); // [object HTMLDivElement],[object HTMLDivElement]
$A

Функция $A получает на вход один объект, похожий на массив, а возвращает настоящий массив. Представляет собой псевдоним для функции Array.from. Вот вам пример:

Code
document.getElementsByTagName('div'); // [object HTMLCollection]  $A(document.getElementsByTagName('div')); // [object HTMLDivElement],[object HTMLDivElement],[object HTMLDivElement]
$F

Функция $F является псевдонимом для функции Form.Element.getValue. Передаём ей id формы, и в ответ возвращается значение формы (value), либо значение свойства checked (для checkbox, radiobox и т.д.).

Code
$F('mytext'); // эквивалентно $('mytext').value
$H

Преображает переданный объект в объект класса Hash. Это специальный объект, предоставляемый Prototype. В общем, мы его позже будем изучать, пока не заморачивайтесь. Но всё-таки пример:

Code
var abc=$H({ a:1, b:2 });  abc.get('a'); // 1  abc.set('b', '123');  abc.get('b'); // 123
$R

Создаёт новый объект класса ObjectRange. Является псевдонимом конструктора ObjectRange. Короче так:

Code
var rng=$R(1, 5);  rng=$A(rng); // преобразуем в массив  rng; // [1, 2, 3, 4, 5]    rng=$R('a', 'd');  rng=$A(rng);  rng; // ['a', 'b', 'c', 'd']
$w

Разбивает строку на массив, разделитель - пробелы.

Code
var str='abc dce efg';  $w(str); // ['abc', 'dce', 'efg']
document.getElementsByClassName

Подобно функциям html5, ищет элементы с указанным классом. При этом можно вторым параметром передать элемент, внутри которого искать.

Вот оно - эти проблемы с несовместимостью. Допустим, браузер поддерживает document.getElementsByClassName. Что будет? Ошибка? Prototype перекроет стандартную функцию браузера? Скорее всего, да. А самое интересное, что в Prototype эта функция появилась задолго до появления в браузерах.

Try.these

Функция Try.these является аналогом конструкции try...catch. Вот пример:

Code
Try.these(function(){  alert(0);  juik; // кидаем ошибку  return 0;  }, function(){   alert(1);  return 1;  })

Как думаете, что вернётся? Вначале выполнится первая функция, алертнет 0, затем возникнет ошибка от неизвестной переменной и выполнится вторая функция. Здесь ошибок не возникнет, функция мирно алертнет 1. И вся эта конструкция вернёт 1 - то что вернула вторая функция.

Под конец

Ещё немножко инфы про Prototype. Автор: СымСэм Стефенсон. Последняя версия - 1.8. Дальше она продвигаться вряд ли будет. Автор её забросил, занимается сейчас другими вещами. Ну а сама библиотека потихоньку умирает :(... Слова "Monkey patching" и "расширение глобальных объектов is bad" ещё больше ускоряют это. В Ruby on Rails вместо Prototype появилась jQuery... Но тем не менее, это не повод чтобы не изучать эту хорошую библиотеку и отказываться от её возможностей. Тем более, у меня есть мысль возродить её, исправив использование "monkey patching", добавив новых возможностей и назвав proto2.

Просмотров: 1722 | | Теги: $H, прототип, $A, $$, $w, $R, PROTOTYPE, $F
Всего комментариев: 2
1 Dino2raptor (27 Июнь 2011 13:57:23) 0  
А продолжение будет? А то везде только основы........ angry
Спам
2 Кейтен (27 Июнь 2011 14:04:15) 0  
Обязательно. И очень скоро
Спам
Имя *:
Email:
Код *: