Прототип - Краткое руководство

Что такое прототип?

Prototype - это платформа JavaScript, которая призвана облегчить разработку динамических веб-приложений. Прототип был разработан Сэмом Стивенсоном.

Prototype - это библиотека JavaScript, которая позволяет вам управлять DOM очень простым и увлекательным способом, который также является безопасным (кросс-браузерный).

Scriptaculous и другие библиотеки, такие как Rico , построены на основе Prototype для создания виджетов и других материалов для конечных пользователей.

Prototype -

Расширяет элементы DOM и встроенные типы с помощью полезных методов.
Имеет встроенную поддержку ООП в стиле классов, включая наследование.
Имеет расширенную поддержку для управления событиями.
Имеет мощные функции Ajax.
Это не полная среда разработки приложений.
Не предоставляет виджеты или полный набор стандартных алгоритмов или систем ввода-вывода.

Как установить прототип?

Prototype распространяется в виде одного файла с именем prototype.js. Выполните следующие шаги, чтобы настроить библиотеку прототипов -

Перейдите на страницу загрузки (http://prototypejs.org/download/), чтобы скачать последнюю версию в удобном пакете.
Теперь поместите файл prototype.js в каталог вашего веб-сайта, например / javascript.

Теперь вы готовы использовать мощный фреймворк Prototype на своих веб-страницах.

Как использовать библиотеку прототипов?

Теперь вы можете включить скрипт прототипа следующим образом:

<html>
   <head>
      <title>Prototype examples</title> 
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
   </head>
   
   <body>
      ........
   </body>
</html>

пример

Вот простой пример, показывающий, как вы можете использовать функцию Prototype $ () для получения элементов DOM в вашем JavaScript:

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         function test() {
            node = $("firstDiv");
            alert(node.innerHTML);
         }
      </script>
   </head>

   <body>
      <div id = "firstDiv">
         <p>This is first paragraph</p> 
      </div>
      
      <div id = "secondDiv">
         <p>This is another paragraph</p>
      </div>
      
      <input type = "button" value = "Test $()" onclick = "test();"/>
   </body>
</html>

Вывод

Зачем нужен этот учебник?

Очень хорошая документация по Prototype Framework доступна на prototypejs.org, тогда зачем обращаться к этому руководству!

Ответ заключается в том, что в этом руководстве мы собрали все наиболее часто используемые функции. Во-вторых, мы объяснили все полезные методы вместе с подходящими примерами, которых нет на официальном сайте.

Если вы опытный пользователь Prototype Framework, вы можете напрямую перейти на официальный веб-сайт, иначе это руководство может стать для вас хорошим началом, и вы можете использовать его как справочное руководство.

Давайте теперь посмотрим, что Prototype может сделать специально для нас при разработке динамического веб-приложения.

Кроссбраузерная поддержка

При программировании на JavaScript необходимо по-разному обрабатывать разные веб-браузеры. Библиотека прототипов была написана таким образом, что она заботится обо всех проблемах совместимости, и вы можете без проблем выполнять кроссбраузерное программирование.

Объектная модель документа

Prototype предоставляет вспомогательные методы, которые частично облегчают программирование DOM. Используя Prototype, вы можете очень легко манипулировать DOM.

HTML-формы

В Ajax другие механизмы ввода, такие как перетаскивание, могут использоваться как часть диалога между браузером и сервером. При обычном программировании на JavaScript сложно захватить эти входные данные и передать их серверу. Prototype предоставляет набор утилит для работы с HTML-формами.

События JavaScript

Prototype обеспечивает отличную кроссбраузерную поддержку при кодировании событий, а также расширяет объект Function, чтобы упростить работу с обработкой событий.

Утилиты Ajax

Самая важная особенность Prototype - это поддержка Ajax. Все основные браузеры поддерживают версию объекта XMLHttpRequest, которая делает возможным использование Ajax, либо как компонент ActiveX, либо как собственный объект JavaScript.

XMLHttpRequest, однако, предоставляет протокол HTTP на очень низком уровне, что дает разработчику много возможностей, но также требует от него написания большого количества кода для выполнения простых вещей.

Prototype использует собственную систему наследования объектов для обеспечения иерархии вспомогательных объектов Ajax, при этом более общие базовые классы подклассифицируются более сфокусированными помощниками, которые позволяют кодировать наиболее распространенные типы запросов Ajax в одной строке.

Библиотека Prototype содержит множество предопределенных объектов и служебных функций. Вы можете использовать эти функции и объекты непосредственно в программировании на JavaScript.

Эти методы являются одними из краеугольных камней эффективного кодирования JavaScript на основе прототипов. Потратьте некоторое время на их изучение, чтобы освоить методы.

В этой главе подробно описаны все эти полезные методы с примерами.

S.No.	Метод и описание
1.	$ () Если предоставлено строкой, возвращает элемент в документе с совпадающим идентификатором; в противном случае возвращает переданный элемент.
2.	$$ () Принимает произвольное количество селекторов CSS (строк) и возвращает массив расширенных элементов DOM в порядке документа, соответствующих любому из них.
3.	$ A () Преобразует единственный аргумент, который он получает, в объект Array.
4.	$ F () Возвращает значение элемента управления формы. Это удобный псевдоним Form.Element.getValue.
5.	$ H () Преобразует объекты в перечислимые объекты Hash, похожие на ассоциативные массивы.
6.	$ R () Создает новый объект ObjectRange.
7.	$ w () Разбивает строку на массив, обрабатывая все пробелы как разделители.
8.	Попробуйте это Принимает произвольное количество функций и возвращает результат первой, не вызывающий ошибки.

document.getElementsByClassName

Этот метод извлекает (и расширяет) все элементы, которые имеют имя класса CSS className .

Однако этот метод объявлен устаревшим в последних версиях Prototype.

Объект Element предоставляет различные служебные функции для управления элементами в DOM.

Вот список всех служебных функций с примерами. Все определенные здесь методы автоматически добавляются к любому элементу, доступ к которому осуществляется с помощью функции $ ().

Итак, написание Element.show ('firstDiv'); то же самое, что и запись $ ('firstDiv'). show ();

Метод элемента прототипа

NOTE - Убедитесь, что у вас установлена версия prototype.js не ниже 1.6.

S.No.	Метод и описание
1.	абсолютизировать () Превращает элемент в элемент с абсолютно позиционированием без изменения его положения в макете страницы.
2.	addClassName () Добавляет заданное имя класса CSS к именам классов элемента.
3.	addMethods () Дает возможность смешивать ваши собственные методы с объектом Element, которые вы позже можете использовать как методы расширенных элементов.
4.	смежный () Находит всех братьев и сестер текущего элемента, соответствующих данному селектору (-ам).
5.	предки () Собирает всех предков элементов и возвращает их как массив расширенных элементов.
6.	childElements () Собирает все дочерние элементы элемента и возвращает их как массив расширенных элементов.
7.	classNames() Не рекомендуется. Возвращает новый экземпляр ClassNames, объекта Enumerable, используемого для чтения и записи имен классов CSS элемента.
8.	cleanWhitespace () Удаляет все текстовые узлы элемента, содержащие только пробелы. Возвращает элемент.
9.	clonePosition () Клонирует положение и / или размеры источника в элемент, как определено дополнительными параметрами аргумента.
10.	cumulativeOffset () Возвращает смещения элемента от левого верхнего угла документа.
11.	cumulativeScrollOffset () Вычисляет совокупное смещение прокрутки элемента во вложенных прокручиваемых контейнерах.
12.	Потомок () Проверяет, является ли элемент потомком предка.
13.	потомки () Собирает всех потомков элемента и возвращает их как массив расширенных элементов.
14.	вниз() Возвращает первого потомка элемента, соответствующего cssRule. Если cssRule не указан, учитываются все потомки. Если ни один потомок не соответствует этим критериям, возвращается undefined.
15.	пустой () Проверяет, является ли элемент пустым (т. Е. Содержит ли только пробелы).
16.	продлить () Расширяет элемент всеми методами, содержащимися в Element.Methods и Element.Methods.Simulated.
17.	Огонь() Запускает настраиваемое событие с текущим элементом в качестве цели.
18.	firstDescendant () Возвращает первый дочерний элемент, являющийся элементом. Это противоположно свойству DOM firstChild, которое возвращает любой узел.
19.	getDimensions () Находит вычисленную ширину и высоту элемента и возвращает их как пары ключ / значение объекта.
20.	getElementsByClassName Не рекомендуется. Выбирает всех потомков элемента, которые имеют класс CSS className, и возвращает их как массив расширенных элементов. Пожалуйста, используйте $$ ().
21.	getElementsBySelector Не рекомендуется. Принимает произвольное количество селекторов CSS (строк) и возвращает массив расширенных дочерних элементов элемента, соответствующих любому из них. Пожалуйста, используйте $$ ().
22.	getHeight () Находит и возвращает вычисленную высоту элемента.
23.	getOffsetParent () Возвращает ближайшего предка элемента. Если ничего не найдено, возвращается элемент body.
24.	getStyle () Возвращает заданное значение свойства CSS элемента. Свойство можно указать либо в его CSS, либо в верблюжьей форме.
25.	getWidth () Находит и возвращает вычисленную ширину элемента.
26.	hasClassName () Проверяет, имеет ли элемент данное CSS className.
27.	скрывать() Скрывает и возвращает элемент.
28.	идентифицировать () Возвращает атрибут id элемента, если он существует, или устанавливает и возвращает уникальный автоматически сгенерированный идентификатор.
29.	immediateDescendants() Не рекомендуется. Собирает всех непосредственных потомков элемента (т. Е. Потомков) и возвращает их как массив расширенных элементов. Пожалуйста, используйте childElements ().
30.	вставить () Вставляет содержимое до, после, вверху или внизу элемента.
31.	осмотреть() Возвращает ориентированное на отладку строковое представление элемента.
32.	makeClipping () Имитирует плохо поддерживаемое свойство клипа CSS, устанавливая значение переполнения элемента на «скрытый». Возвращает элемент.
33.	makePositioned () Позволяет легко создавать CSS-содержащий блок, устанавливая положение CSS элемента на «относительное», если его начальное положение является «статическим» или неопределенным. Возвращает элемент.
34.	соответствие() Проверяет, соответствует ли элемент заданному селектору CSS.
35.	следующий() Возвращает следующего брата элемента, который соответствует заданному cssRule.
36.	nextSiblings () Собирает всех ближайших братьев и сестер элемента и возвращает их как массив расширенных элементов.
37.	наблюдать () Регистрирует обработчик событий для элемента и возвращает элемент.
38.	positionedOffset () Возвращает смещение элемента относительно его ближайшего позиционированного предка.
39.	предыдущий () Возвращает предыдущего брата элемента, который соответствует заданному cssRule.
40.	previousSiblings () Собирает всех предыдущих братьев и сестер элемента и возвращает их как массив расширенных элементов.
41.	readAttribute () Возвращает значение атрибута элемента или null, если атрибут не был указан.
42.	рекурсивноCollect () Рекурсивно собирает элементы, отношения которых заданы свойством.
43.	релятивизировать () Превращает элемент в относительно позиционированный элемент без изменения его позиции в макете страницы.
44.	удалять () Полностью удаляет элемент из документа и возвращает его.
45.	removeClassName () Удаляет элемент CSS className и возвращает элемент.
46.	заменить () Заменяет элемент содержимым аргумента html и возвращает удаленный элемент.
47.	scrollTo () Прокручивает окно так, чтобы элемент отображался вверху области просмотра. Возвращает элемент.
48.	Выбрать() Принимает произвольное количество селекторов CSS (строк) и возвращает массив расширенных потомков элемента, соответствующих любому из них.
49.	setOpacity () Устанавливает визуальную непрозрачность элемента при устранении несоответствий в различных браузерах.
50.	setStyle () Изменяет свойства стиля CSS элемента.
51.	Показать() Отображает и возвращает элемент.
52.	братья и сестры () Собирает всех братьев и сестер элемента и возвращает их как массив расширенных элементов.
53.	stopObserving () Отменяет регистрацию обработчика и возвращает элемент.
54.	переключить () Переключает видимость элемента.
55.	toggleClassName () Переключает CSS className элемента и возвращает элемент.
56.	undoClipping () Устанавливает для свойства переполнения CSS элемента значение, которое оно имело до применения Element.makeClipping (). Возвращает элемент.
57.	undoPositioned () Устанавливает элемент обратно в состояние, в котором он был до применения к нему Element.makePositioned. Возвращает элемент.
58.	вверх () Возвращает первого предка элемента, который соответствует заданному cssRule.
59.	Обновить() Заменяет содержимое элемента предоставленным аргументом newContent и возвращает элемент.
60.	viewportOffset () Возвращает координаты X / Y элемента относительно области просмотра.
61.	видимый () Возвращает логическое значение, указывающее, является ли элемент видимым.
62.	заворачивать() Оборачивает элемент внутрь другого, а затем возвращает оболочку.
63.	writeAttribute () Добавляет, указывает или удаляет атрибуты, переданные в виде хеша или пары имя / значение.

Prototype расширяет собственные номера JavaScript, чтобы обеспечить -

Совместимость ObjectRange с помощью Number # succ.
Рубиноподобные числовые циклы с числом раз.
Простые служебные методы, такие как Number # toColorPart и Number # toPaddedString.

Вот список всех функций с примерами работы с числами.

Метод номера прототипа

NOTE - Убедитесь, что у вас установлена версия prototype.js 1.6.

S.No.	Метод и описание
1.	абс () Возвращает абсолютное значение числа.
2.	ceil () Возвращает наименьшее целое число, большее или равное числу.
3.	этаж() Возвращает наибольшее целое число, меньшее или равное числу.
4.	круглый() Округляет число до ближайшего целого.
5.	succ () Возвращает преемника текущего числа, как определено текущим + 1. Используется для обеспечения совместимости чисел с ObjectRange.
6.	раз () Инкапсулирует обычный цикл [0..n] в стиле Ruby.
7.	toColorPart () Производит двузначное шестнадцатеричное представление числа (поэтому предполагается, что оно находится в диапазоне [0..255]). Полезно для составления цветовых строк CSS.
8.	toJSON () Возвращает строку JSON.
9.	toPaddedString () Преобразует число в строку, дополненную нулями, чтобы длина строки была как минимум равной длине.

Prototype дополняет объект String рядом полезных методов, от простых до сложных.

Вот список всех функций с примерами работы со String.

Строковые методы прототипа

NOTE - Убедитесь, что у вас установлена версия prototype.js 1.6.

S.No.	Метод и описание
1.	пустой () Проверяет, является ли строка «пустой», то есть пустой или содержащей только пробелы.
2.	верблюд () Преобразует строку, разделенную тире, в эквивалент camelCase. Например, «foo-bar» будет преобразовано в «fooBar».
3.	капитализировать () Делает первую букву строки заглавной и уменьшает все остальные.
4.	дашеризэ () Заменяет все символы подчеркивания («_») тире («-»).
5.	пустой () Проверяет, пуста ли строка.
6.	заканчивается с () Проверяет, заканчивается ли строка подстрокой.
7.	escapeHTML () Преобразует специальные символы HTML в их эквиваленты сущностей.
8.	evalJSON () Оценивает JSON в строке и возвращает полученный объект.
9.	evalScripts () Оценивает содержимое любого блока скрипта, присутствующего в строке. Возвращает массив, содержащий значение, возвращаемое каждым скриптом.
10.	extractScripts () Извлекает содержимое любого блока сценария, присутствующего в строке, и возвращает его в виде массива строк.
11.	gsub () Возвращает строку, в которой каждое вхождение данного шаблона заменяется либо обычной строкой, либо возвращенным значением функции, либо строкой шаблона.
12.	включают() Проверяет, содержит ли строка подстроку.
13.	осмотреть() Возвращает ориентированную на отладку версию строки.
14.	интерполировать () Обрабатывает строку как шаблон и заполняет ее свойствами объекта.
15.	isJSON () Проверяет, является ли строка допустимой JSON, с помощью регулярных выражений. Этот метод защиты вызывается внутренне.
16.	parseQuery () Анализирует строку запроса, подобную URI, и возвращает объект, состоящий из пар параметр / значение.
17.	сканирование () Позволяет перебирать каждое вхождение данного шаблона.
18.	начинается с() Проверяет, начинается ли строка с подстроки.
19.	полоса () Удаляет все начальные и конечные пробелы из строки.
20.	stripScripts () Удаляет из строки все, что выглядит как блок сценария HTML.
21.	stripTags () Удаляет из строки любой HTML-тег.
22.	sub () Возвращает строку, в которой первое количество вхождений шаблона заменено либо обычной строкой, либо возвращенным значением функции, либо строкой шаблона.
23.	succ () Используется внутри ObjectRange. Преобразует последний символ строки в следующий символ в алфавите Юникода.
24.	раз () Объединяет количество раз строки.
25.	toArray () Посимвольно разбивает строку и возвращает массив с результатом.
26.	toJSON () Возвращает строку JSON.
27.	toQueryParams () Анализирует строку запроса, подобную URI, и возвращает объект, состоящий из пар параметр / значение.
28.	усечь () Обрезает строку до заданной длины и добавляет к ней суффикс (указывая, что это всего лишь отрывок).
29.	нижнее подчеркивание() Преобразует преобразованную строку в серию слов, разделенных знаком подчеркивания ("_").
30.	unescapeHTML () Удаляет теги и преобразует формы сущностей специальных символов HTML в их нормальную форму.
31.	unilterJSON () Удаляет разделители комментариев вокруг ответов Ajax JSON или JavaScript. Этот метод защиты вызывается внутренне.

Prototype расширяет все встроенные массивы JavaScript с помощью нескольких мощных методов.

Это делается двумя способами -

Он смешивается с модулем Enumerable, который уже содержит массу методов.
Он добавляет довольно много дополнительных методов, которые описаны в этом разделе.

Использование итераторов

Одной из важных поддержки, предоставляемой Prototype, является то, что вы можете использовать java как итератор в JavaScript. Смотрите разницу ниже -

Традиционный способ написания for петля -

for (var index = 0; index < myArray.length; ++index) {
   var item = myArray[index];
   // Your code working on item here...
}

Теперь, если вы используете Prototype, вы можете заменить приведенный выше код следующим образом:

myArray.each(function(item) {
   // Your code working on item here...
});

Вот список всех функций с примерами, имеющими дело с Array.

Методы массива прототипов

NOTE - Убедитесь, что у вас установлена версия prototype.js 1.6.

S.No.	Метод и описание
1.	Чисто() Очищает массив (делает его пустым).
2.	клон () Возвращает дубликат массива, оставляя исходный массив нетронутым.
3.	компактный () Возвращает новую версию массива без нулевых / неопределенных значений.
4.	каждый () Обходит массив в порядке возрастания числового индекса.
5.	первый() Возвращает первый элемент в массиве или значение undefined, если массив пуст.
6.	сплющить () Возвращает "плоскую" (одномерную) версию массива.
7.	из() Клонирует существующий массив или создает новый из коллекции, подобной массиву.
8.	индекс чего-либо() Возвращает позицию первого вхождения аргумента в массиве.
9.	осмотреть() Возвращает ориентированное на отладку строковое представление массива.
10.	последний() Возвращает последний элемент в массиве или значение undefined, если массив пуст.
11.	уменьшить () Уменьшает массивы: одноэлементные массивы превращаются в их уникальный элемент, а многоэлементные массивы возвращаются нетронутыми.
12.	обеспечить регресс() Возвращает инвертированную версию массива. По умолчанию прямо переворачивает оригинал. Если для inline задано значение false, используется клон исходного массива.
13.	размер() Возвращает размер массива.
14.	toArray () Это всего лишь локальная оптимизация смешанного toArray из Enumerable.
15.	toJSON () Возвращает строку JSON.
16.	uniq () Создает версию массива без дубликатов. Если дубликатов не обнаружено, возвращается исходный массив.
17.	без() Создает новую версию массива, не содержащую ни одного из указанных значений.

Хеш можно рассматривать как ассоциативный массив, связывающий уникальные ключи со значениями. Единственное отличие состоит в том, что вы можете использовать любую строку в качестве индекса, а не просто использовать число в качестве индекса.

Создание хеша

Есть два способа создать экземпляр Hash:

Используйте ключевое слово JavaScript new .
Использование функции Prototype Utility $ H .

Чтобы создать пустой хеш, вы также вызываете любой из методов конструктора без аргументов.

Ниже приведен пример, показывающий, как простым способом создать хэш, установить значения и получить значения.

// Creating Hash
var myhash = new Hash();
var yourhash = new Hash( {fruit: 'apple'} );
var hishash = $H( {drink: 'pepsi'} );

// Set values in terms of key and values.
myhash.set('name', 'Bob');

// Get value of key 'name' as follows.
myhash.get('name');
yourhash.get('fruit');
hishash.get('drink');

// Unset a key & value
myhash.unset('name');
yourhash.unset('fruit');
hishash.unset('drink');

Prototype предоставляет широкий спектр методов для легкой оценки хэша. Это руководство подробно объяснит каждый метод с подходящими примерами.

Вот полный список всех методов, связанных с Hash.

Прототип методов хеширования

NOTE - Убедитесь, что у вас установлена версия prototype.js как минимум 1.6.

S.No.	Метод и описание
1.	клон () Возвращает клон хеша.
2.	каждый () Итерирует по парам имя / значение в хэше.
3.	получить() Возвращает значение свойства хеш-ключа.
4.	осмотреть() Возвращает ориентированное на отладку строковое представление хэша.
5.	ключи () Предоставляет массив ключей (то есть имен свойств) для хэша.
6.	объединить () Объединяет объект в хэш и возвращает результат этого слияния.
7.	удалять() Удаляет ключи из хэша и возвращает их значения. Этот метод устарел в версии 1.6.
8.	набор() Устанавливает для свойства хеш-ключа значение и возвращает значение.
9.	toJSON () Возвращает строку JSON.
10.	на объект() Возвращает клонированный ванильный объект.
11.	toQueryString () Превращает хэш в его представление строки запроса в кодировке URL.
12.	unset () Удаляет свойство хеш-ключа и возвращает его значение.
13.	Обновить() Обновляет хеш парами ключ / значение объекта. Исходный хеш будет изменен.
14.	значения() Собирает значения хэша и возвращает их в виде массива.

Object используется Prototype как пространство имен и для вызова связанной функции с помощью объекта Object . Это используется двумя способами:

Если вы простой разработчик, вы можете использовать существующие функции, такие как inspect или clone .
Если вы тот , кто хочет создать свои собственные объекты , такие как Prototype делает, или исследовать объекты , как если бы они были хэши, повернется к простираться , ключи и значения .

Методы прототипа объекта

NOTE - Убедитесь, что у вас установлена версия prototype.js как минимум 1.6.

S.No.	Метод и описание
1.	клон () Клонирует переданный объект с помощью неглубокой копии (копирует в результат все свойства оригинала).
2.	продлить () Копирует все свойства из исходного объекта в целевой объект.
3.	осмотреть() Возвращает ориентированное на отладку строковое представление объекта.
4.	isArray () Возвращает true, если obj является массивом, иначе false.
5.	isElement () Возвращает true, если obj является узлом DOM типа 1, иначе false.
6.	isFunction () Возвращает true, если obj имеет тип function, иначе false.
7.	isHash () Возвращает true, если obj является экземпляром класса Hash, иначе false.
8.	isNumber () Возвращает true, если obj имеет тип number, иначе false.
9.	isString () Возвращает true, если obj имеет тип string, иначе false.
10.	isUndefined () Возвращает true, если obj имеет тип undefined, иначе false.
11.	ключи () Обрабатывает любой объект как хэш и извлекает список его имен свойств.
12.	toHTML () Возвращает возвращаемое значение метода obj toHTML, если он существует, иначе запускает obj через String.interpret.
13.	toJSON () Возвращает строку JSON.
14.	toQueryString () Превращает объект в его представление строки запроса в кодировке URL.
15.	значения() Обрабатывает любой объект как хэш и извлекает список значений его свойств.

Шаблоны используются для форматирования группы однотипных объектов и для создания форматированного вывода для этих объектов.

Prototype предоставляет класс Template , который имеет два метода:

Template()- Это метод конструктора, который используется для создания объекта шаблона и вызова метода Assessment () для применения шаблона.
evaluate() - Этот метод используется для применения шаблона для форматирования объекта.

Для создания форматированного вывода требуется три шага.

Create a template- Это включает создание предварительно отформатированного текста. Этот текст содержит форматированный контент вместе с#{fieldName}значения. Эти#{fieldName}значения будут заменены фактическими значениями при вызове метода eval () с фактическими значениями.
Defining actual values- Это включает создание фактических значений в форме ключей и значений. Эти ключи будут отображены в шаблоне и будут заменены соответствующими значениями.
Mapping Keys and replacing Values- Это последний шаг, на котором будет вызвана оценка () , и все ключи, доступные в отформатированном объекте, будут заменены определенными значениями.

Пример1

Шаг 1

Создайте шаблон.

var myTemplate = new Template('The \ TV show #{title} was directed by #{author}.');

Шаг 2

Подготовьте наш набор значений, который будет передан в указанном выше объекте для получения форматированного вывода.

var record1 = {title: 'Metrix', author:'Arun Pandey'};
var record2 = {title: 'Junoon', author:'Manusha'};
var record3 = {title: 'Red Moon', author:'Paul, John'};
var record4 = {title: 'Henai', author:'Robert'};
var records = [record1, record2, record3, record4 ];

Шаг 3

Последний шаг - заполнить все значения в шаблоне и получить следующий конечный результат:

records.each( function(conv) {
   alert( "Formatted Output : " + myTemplate.evaluate(conv) );
});

Итак, давайте объединим все эти три шага -

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         function showResult() {
            //  Create template with formatted content and placeholders.
            var myTemplate = new Template('The \ TV show #{title} was directed by #{author}.');
   
            // Create hashes with the required values for placeholders
            var record1 = {title: 'Metrix', author:'Arun Pandey'};
            var record2 = {title: 'Junoon', author:'Manusha'};
            var record3 = {title: 'Red Moon', author:'Paul, John'};
            var record4 = {title: 'Henai', author:'Robert'};
            var records = [record1, record2, record3, record4 ];

            // Now apply template to produce desired formatted output
            records.each( function(conv) {
               alert( "Formatted Output : " + myTemplate.evaluate(conv) );
            });
         }
      </script>
   </head>

   <body>
      <p>Click the button to see the result.</p>
      <br />
      <br />
      <input type = "button" value = "Result" onclick = "showResult();"/>
   </body>
</html>

Это даст следующий результат -

Вывод

Класс Enumerable предоставляет большой набор полезных методов для перечислений. Перечисления - это объекты, которые действуют как набор значений.

Методы перечисления в основном используются для перечисления массивов и хэшей . Существуют и другие объекты, такие как ObjectRange и различные объекты, связанные с DOM или AJAX, в которых вы можете использовать методы перечисления.

Параметр контекста

Каждый метод Enumerable, который принимает итератор, также принимает объект контекста в качестве следующего (необязательного) параметра. Объект контекста - это то, к чему будет привязан итератор, поэтомуthis ключевое слово внутри него будет указывать на объект.

var myObject = {};

['foo', 'bar', 'baz'].each(function(name, index) {
   this[name] = index;
}, myObject); // we have specified the context

myObject;

Это даст следующий результат -

Вывод

{ foo: 0, bar: 1, baz: 2}

Эффективное использование

Если вам нужно вызвать один и тот же метод для всех элементов, используйте метод invoke () .
Если вам нужно получить одно и то же свойство для всех элементов, используйте метод pluck () .
В FindAll / выберите методы извлечения все элементы , которые соответствуют заданному предикату. И наоборот, метод reject () извлекает все элементы, не соответствующие предикату. В конкретном случае, когда вам нужны оба набора, вы можете избежать двойного цикла: просто используйте метод partition () .

Вот полный список всех методов, связанных с Enumerable.

Перечислимые методы прототипа

NOTE - Убедитесь, что у вас установлена как минимум версия 1.6 prototype.js.

S.No.	Метод и описание
1.	все() Определяет, являются ли все элементы логическим эквивалентом true, либо напрямую, либо путем вычисления предоставленным итератором.
2.	Любые() Определяет, является ли хотя бы один элемент логическим эквивалентом истины, напрямую или посредством вычисления предоставленным итератором.
3.	собирать () Возвращает результаты применения итератора к каждому элементу. С псевдонимом map ().
4.	обнаружить () Находит первый элемент, для которого итератор возвращает значение true. Псевдоним методом find ().
5.	каждый () Он позволяет вам перебирать все элементы стандартным образом, а затем возвращает Enumerable, тем самым разрешая цепной вызов.
6.	eachSlice () Группирует элементы в блоки по заданному размеру, причем последний блок может быть меньше.
7.	записи () Псевдоним для более общего метода toArray.
8.	находить() Находит первый элемент, для которого итератор возвращает значение true. Удобный псевдоним для detect ().
9.	найти все() Возвращает все элементы, для которых итератор вернул истину. С псевдонимом select ().
10.	grep () Возвращает все элементы, соответствующие фильтру. Если предоставляется итератор, он используется для получения возвращаемого значения для каждого выбранного элемента.
11.	inGroupsOf () Группирует элементы в блоки фиксированного размера, используя определенное значение для заполнения последнего блока, если это необходимо.
12.	включают() Определяет, находится ли данный объект в Enumerable или нет, на основе оператора сравнения ==. Псевдоним члена ().
13.	inject () Постепенно строит значение результата на основе последовательных результатов итератора.
14.	invoke () Оптимизация для общего варианта использования each () или collect (): вызов одного и того же метода с одинаковыми потенциальными аргументами для всех элементов.
15.	карта() Возвращает результаты применения итератора к каждому элементу. Удобный псевдоним для collect ().
16.	Максимум() Возвращает максимальный элемент (или вычисление на основе элементов) или значение undefined, если перечисление пусто. Элементы сравниваются либо напрямую, либо сначала применяется итератор и сравниваются возвращаемые значения.
17.	член () Определяет, находится ли данный объект в Enumerable или нет, на основе оператора сравнения ==. Удобный псевдоним для include ().
18.	мин () Возвращает минимальный элемент (или вычисление на основе элементов) или значение undefined, если перечисление пусто. Элементы сравниваются либо напрямую, либо сначала применяется итератор и сравниваются возвращаемые значения.
19.	раздел () Разделяет элементы на две группы: те, которые считаются истинными, и те, которые считаются ложными.
20.	щипать () Оптимизация для распространенного варианта использования collect (): получение одного и того же свойства для всех элементов. Возвращает значения свойств.
21.	отклонить () Возвращает все элементы, для которых итератор вернул false.
22.	Выбрать() Псевдоним для метода findAll ().
23.	размер() Возвращает размер перечисления.
24.	Сортировать по() Предоставляет настраиваемый отсортированный вид элементов на основе критериев, вычисленных для каждого элемента итератором.
25.	toArray () Возвращает представление перечисления в виде массива. Псевдонимы как записи ().
26.	zip () Застегивается вместе (подумайте о молнии на паре брюк) 2+ последовательности, обеспечивая массив кортежей. Каждый кортеж содержит одно значение на исходную последовательность.

Управление событиями - одна из самых больших проблем для создания кросс-браузерных сценариев. В каждом браузере есть разные подходы к обработке нажатия клавиш.

Prototype Framework решает все проблемы совместимости между браузерами и избавляет вас от всех проблем, связанных с управлением событиями.

Prototype Framework предоставляет пространство имен Event , которое изобилует методами, которые принимают текущий объект события в качестве аргумента и с радостью производят запрашиваемую информацию во всех основных браузерах.

Пространство имен событий также предоставляет стандартизированный список кодов клавиш, которые вы можете использовать с событиями, связанными с клавиатурой. Следующие константы определены в пространстве имен -

S.No.	Ключевая константа и описание
1.	KEY_BACKSPACE Представьте клавишу пробела назад.
2.	KEY_TAB Представляют собой клавишу табуляции.
3.	KEY_RETURN Представляют ключ возврата.
4.	KEY_ESC Представляют ключ esc.
5.	KEY_LEFT Представляют левую клавишу.
6.	KEY_UP Представляем ключ.
7.	KEY_RIGHT Представьте правильный ключ.
8.	KEY_DOWN Представляют собой клавишу вниз.
9.	KEY_DELETE Представляют ключ удаления.
10.	KEY_HOME Представляют домашний ключ.
11.	KEY_END Представляют конечный ключ.
12.	KEY_PAGEUP Представляют ключ страницы вверх.
13.	KEY_PAGEDOWN Представляют клавишу страницы вниз.

Как обрабатывать события

Прежде чем мы начнем, давайте посмотрим на пример использования метода события. В этом примере показано, как захватить элемент DOM, на котором произошло событие.

пример

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         // Register event 'click' and associated call back.
         Event.observe(document, 'click', respondToClick);
  
         // Callback function to handle the event.
         function respondToClick(event) {
            var element = event.element();
            alert("Tag Name : " + element.tagName );
         }
      </script>
   </head>

   <body>
      <p id = "note"> Click on any part to see the result.</p>
      <p id = "para">This is paragraph</p>
      <div id = "division">This is divsion.</div>
   </body>
</html>

Вывод

Вот полный список всех методов, связанных с Event. Функции, которые вы, скорее всего, будете часто использовать, - это наблюдение , элемент и остановка .

Прототип методов событий

NOTE - Убедитесь, что у вас установлена как минимум версия 1.6 prototype.js.

S.No.	Метод и описание
1.	элемент() Возвращает элемент DOM, на котором произошло событие.
2.	продлить () Расширяет событие всеми методами, содержащимися в Event.Methods.
3.	findElement () Возвращает первый элемент DOM с заданным именем тега вверх от того, для которого произошло событие.
4.	isLeftClick () Определяет, было ли событие мыши, связанное с кнопкой, касалось «левой» (фактически основной) кнопки.
5.	наблюдать () Регистрирует обработчик событий в элементе DOM.
6.	указательX () Возвращает абсолютное горизонтальное положение для события мыши.
7.	указательY () Возвращает абсолютное вертикальное положение для события мыши.
8.	стоп() Останавливает распространение события и предотвращает запуск его действия по умолчанию.
9.	stopObserving () Отменяет регистрацию обработчика событий.
10.	unloadCache () Отменяет регистрацию всех обработчиков событий, зарегистрированных посредством наблюдения. Автоматически подключается для вас. Недоступно с версии 1.6.

Prototype предоставляет простой способ управления формами HTML. Форма Prototype - это пространство имен и модуль для всего, что связано с формами, наполненный совершенством манипулирования формой и сериализации.

Хотя он содержит методы, работающие с формами в целом, его подмодуль Form.Element имеет дело с конкретными элементами управления формой.

Вот полный список всех методов, связанных с Form Element.

Методы формы прототипа

NOTE - Убедитесь, что у вас установлена как минимум версия 1.6 prototype.js.

S.No.	Метод и описание
1.	отключить () Отключает форму в целом. Элементы управления формы будут видны, но их нельзя будет редактировать.
2.	включить() Включает полностью или частично отключенную форму.
3.	findFirstElement () Находит первый не скрытый, неотключенный элемент управления формой.
4.	focusFirstElement () Дает фокус клавиатуры первому элементу формы.
5.	getElements () Возвращает коллекцию всех элементов управления формы в форме.
6.	getInputs () Возвращает коллекцию всех элементов INPUT в форме. Используйте необязательные аргументы типа и имени, чтобы ограничить поиск по этим атрибутам.
7.	запрос() Удобный метод для сериализации и отправки формы через Ajax.Request на URL-адрес атрибута действия формы. Параметр options передается в экземпляр Ajax.Request, позволяя переопределить метод HTTP и указать дополнительные параметры.
8.	сброс() Сбрасывает форму до значений по умолчанию.
9.	сериализовать () Сериализуйте данные формы в строку, подходящую для запросов Ajax (поведение по умолчанию), или, если необязательный getHash оценивает значение true, в хэш объекта, где ключи - это имена элементов управления формы, а значения - данные.
10.	serializeElements () Сериализуйте массив элементов формы в строку, подходящую для запросов Ajax (поведение по умолчанию), или, если необязательный getHash оценивает значение true, в хэш объекта, где ключи - это имена элементов управления формы, а значения - данные.

Введение в JSON

JSON (JavaScript Object Notation) - это облегченный формат обмена данными.

JSON легко читать и писать людям.
JSON легко анализировать и генерировать на машинах.
JSON основан на подмножестве языка программирования JavaScript.
JSON широко используется API-интерфейсами во всем Интернете и является быстрой альтернативой XML в запросах Ajax.
JSON - это текстовый формат, полностью независимый от языка.

Prototype 1.5.1 и более поздняя версия, поддерживает кодирование и анализ JSON.

Кодировка JSON

Prototype предоставляет следующие методы для кодирования -

NOTE - Убедитесь, что у вас установлена как минимум версия 1.6 prototype.js.

S.No.	Метод и описание
1.	Number.toJSON () Возвращает строку JSON для заданного числа.
2.	String.toJSON () Возвращает строку JSON для заданной строки.
3.	Array.toJSON () Возвращает строку JSON для данного массива.
4.	Hash.toJSON () Возвращает строку JSON для заданного хэша.
5.	Date.toJSON () Преобразует дату в строку JSON (в соответствии с форматом ISO, используемым JSON).
6.	Object.toJSON () Возвращает строку JSON для данного объекта.

Если вы не уверены в типе данных, которые вам нужно кодировать, лучше всего использовать Object.toJSON, поэтому -

var data = {name: 'Violet', occupation: 'character', age: 25 };
Object.toJSON(data);

Это даст следующий результат -

'{"name": "Violet", "occupation": "character", "age": 25}'

Кроме того, если вы используете настраиваемые объекты, вы можете установить свой собственный метод toJSON, который будет использоваться Object.toJSON . Например -

var Person = Class.create();
Person.prototype = {
   initialize: function(name, age) {
      this.name = name;
      this.age = age;
   },  
   toJSON: function() {
      return ('My name is ' + this.name + 
         ' and I am ' + this.age + ' years old.').toJSON();
   }
};
var john = new Person('John', 49);
Object.toJSON(john);

Это даст следующий результат -

'"My name is John and I am 49 years old."'

Разбор JSON

В JavaScript анализ JSON обычно выполняется путем оценки содержимого строки JSON. Prototype вводит String.evalJSON для решения этой проблемы . Например -

var d='{ "name":"Violet","occupation":"character" }'.evalJSON();
d.name;

Это даст следующий результат -

"Violet"

Использование JSON с Ajax

Использовать JSON с Ajax очень просто. Просто вызовите String.evalJSON в свойстве responseText транспорта -

new Ajax.Request('/some_url', {
   method:'get',
   onSuccess: function(transport) {
      var json = transport.responseText.evalJSON();
   }
});

Если ваши данные поступают из ненадежного источника, обязательно очистите его -

new Ajax.Request('/some_url', {
   method:'get',
   requestHeaders: {Accept: 'application/json'},
   onSuccess: function(transport) {
      var json = transport.responseText.evalJSON(true);
   }
});

Введение в AJAX

AJAX означает Aсинхронный JavaScript и XML. AJAX - это новый метод создания лучших, быстрых и интерактивных веб-приложений с помощью XML, HTML, CSS и Java Script.

Чтобы получить полное представление об AJAX, просмотрите наше простое руководство по AJAX .

Поддержка прототипов для AJAX

Инфраструктура прототипов позволяет вам обрабатывать вызовы Ajax очень простым и увлекательным способом, который также является безопасным (кросс-браузерный). Prototype также разумно работает с кодом JavaScript, возвращаемым с сервера, и предоставляет вспомогательные классы для опроса.

Функциональность Ajax содержится в глобальном объекте Ajax . Этот объект предоставляет все необходимые методы для простой обработки запросов и ответов AJAX.

Запрос AJAX

Фактические запросы выполняются путем создания экземпляров объекта Ajax.Request () .

new Ajax.Request('/some_url', { method:'get' });

Первый параметр - это URL-адрес запроса; второй - это хеш параметров. Параметр метода относится к используемому методу HTTP; метод по умолчанию - POST.

Обратные вызовы AJAX

Запросы Ajax по умолчанию являются асинхронными, что означает, что у вас должны быть обратные вызовы, которые будут обрабатывать данные из ответа. Методы обратного вызова передаются в хэше опций при выполнении запроса -

new Ajax.Request('/some_url', {
   method:'get',
   onSuccess: function(transport) {
      var response = transport.responseText || "no response text";
      alert("Success! \n\n" + response);
   },
   onFailure: function() { alert('Something went wrong...') }
});

Здесь в хеше передаются два обратных вызова -

onSuccess
onFailure

Любой из двух вышеуказанных вызовов вызывается соответственно в зависимости от статуса ответа. Первым параметром, переданным обоим, является собственный объект xmlHttpRequest, из которого вы можете использовать его свойства responseText и responseXML соответственно.

Вы можете указать оба обратных вызова, один или ни одного - решать вам. Другие доступные обратные вызовы:

onUninitialized
onLoading
onLoaded
onInteractive
onComplete
onException

Все они соответствуют определенному состоянию транспорта xmlHttpRequest , за исключением onException, которое срабатывает при возникновении исключения при отправке других обратных вызовов.

NOTE- Обратные вызовы onUninitialized, onLoading, onLoaded и onInteractive не реализуются последовательно всеми браузерами. В общем, их лучше избегать.

Прототип методов AJAX

Объект Ajax предоставляет все необходимые методы для простой обработки запросов и ответов AJAX. Вот полный список всех методов, связанных с AJAX.

NOTE - Убедитесь, что у вас установлена как минимум версия 1.6 prototype.js.

S.No.	Метод и описание
1.	Параметры Ajax Это не метод, но подробно описываются все основные параметры, общие для всех запрашивающих AJAX и обратных вызовов.
2.	Ajax.PeriodicalUpdater () Периодически выполняет запрос AJAX и обновляет содержимое контейнера на основе текста ответа.
3.	Ajax.Request () Инициирует и обрабатывает запрос AJAX.
4.	Ajax.Responders () Репозиторий глобальных слушателей, уведомляемых о каждом шаге запросов AJAX на основе прототипов.
5.	Ajax.Response () Объект, переданный как первый аргумент всех обратных вызовов запросов Ajax.
6.	Ajax.Updater () Выполняет запрос AJAX и обновляет содержимое контейнера на основе текста ответа.

Диапазоны прототипов представляют собой интервал значений. Предпочтительный способ получить диапазон - использовать$R вспомогательная функция.

Вы можете создать большой диапазон значений, используя простой синтаксис следующим образом:

$R(1, 10).inspect();

$R('a', 'e').inspect();

Это даст следующий результат -

['1, 2, 3, 4, 5, 6, 7, 8, 9, 10']

['a', 'b', 'c', 'd', 'e']

Метод include ()

Этот метод определяет, входит ли значение в диапазон -

Синтаксис

Range.include(value);

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

Если значение включено, возвращает истинное значение, иначе - ложь.

пример

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         function showResult() {
            alert ( "Test 1 : " + $R(1, 10).include(5));
            // Returns true
   
            alert ( "Test 2 : " + $R('a', 'h').include('x'));
            // Returns flase
         }
      </script>
   </head>

   <body>
      <p>Click the button to see the result.</p>
      <br />
      <br />
      <input type = "button" value = "Result" onclick = "showResult();"/>
   </body>
</html>

Вывод

Много раз требуется выполнить функцию много раз через определенный период времени. Например, вы можете захотеть обновить экран через определенное время. Prototype предоставляет простой механизм для его реализации с использованием объекта PeriodicalExecuter .

Преимущество PeriodicalExecuter заключается в том, что он защищает вас от множественных параллельных выполнений функции обратного вызова.

Создание журнала

Конструктор принимает два аргумента -

Функция обратного вызова.
Интервал (в секундах) между казнями.

После запуска PeriodicalExecuter запускается на неопределенный срок, пока страница не будет выгружена или исполнитель не будет остановлен с помощью метода stop () .

пример

Ниже приведен пример, в котором через каждые 5 секунд будет появляться диалоговое окно, пока вы не остановите его, нажав кнопку «Отмена».

<html>
   <head>
      <title>Prototype examples</title>
      <script type = "text/javascript" src = "/javascript/prototype.js"></script>
      
      <script>
         function startExec() {
            new PeriodicalExecuter(function(pe) {
               if (!confirm('Want me to annoy you again later?'))
               pe.stop();
            }, 5);
         }
      </script>
   </head>

   <body>
      <p>Click start button to start periodic executer:</p>
      <br />
      <br />
      <input type = "button" value = "start" onclick = "startExec();"/>
   </body>
</html>

Вывод