Учебники

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

Сентябрь 15, 2018

Прототип — Обзор

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

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

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

Прототип —

  • Расширяет элементы DOM и встроенные типы полезными методами.

  • Имеет встроенную поддержку ООП в стиле класса, включая наследование.

  • Имеет расширенную поддержку управления событиями.

  • Имеет мощные функции Ajax.

  • Не является полной структурой разработки приложений.

  • Не предоставляет виджеты или полный набор стандартных алгоритмов или систем ввода / вывода.

Расширяет элементы DOM и встроенные типы полезными методами.

Имеет встроенную поддержку ООП в стиле класса, включая наследование.

Имеет расширенную поддержку управления событиями.

Имеет мощные функции Ajax.

Не является полной структурой разработки приложений.

Не предоставляет виджеты или полный набор стандартных алгоритмов или систем ввода / вывода.

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

Прототип распространяется в виде одного файла с именем prototype.js. Для настройки библиотеки прототипов выполните следующие шаги:

  • Перейдите на страницу загрузки (http://prototypejs.org/download/), чтобы получить последнюю версию в удобной упаковке.

  • Теперь поместите файл prototype.js в каталог вашего сайта, например, / javascript.

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

Теперь поместите файл prototype.js в каталог вашего сайта, например, / javascript.

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

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

Теперь вы можете включить скрипт 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 Utilities

Самая важная особенность 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. $ ш ()

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

8. Попробуйте это

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

Если предоставляется строка, возвращает элемент в документе с совпадающим идентификатором; в противном случае возвращает переданный элемент.

Принимает произвольное количество селекторов CSS (строк) и возвращает массив порядка документов расширенных элементов DOM, которые соответствуют любому из них.

Преобразует единственный полученный аргумент в объект Array.

Возвращает значение элемента управления формы. Это вспомогательный псевдоним Form.Element.getValue.

Преобразует объекты в перечисляемые объекты Hash, которые напоминают ассоциативные массивы.

Создает новый объект ObjectRange.

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

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

document.getElementsByClassName

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

Тем не менее, этот метод не рекомендуется в последних версиях Prototype.

Прототип — Элемент Объект

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

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

Итак, написание Element.show (‘firstDiv’); аналогично написанию $ (‘firstDiv’). show ();

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

ПРИМЕЧАНИЕ. — Убедитесь, что у вас есть как минимум версия 1.6 файла prototype.js.

S.No. Метод и описание
1. абсолютизировать ()

Превращает элемент в абсолютно позиционированный элемент без изменения его положения в макете страницы.

2. addClassName ()

Добавляет данное имя класса CSS к именам классов элемента.

3. addMethods ()

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

4. смежно ()

Находит всех братьев и сестер текущего элемента, которые соответствуют данному селектору (ам).

5. (предки)

Собирает всех предков элемента и возвращает их как массив расширенных элементов.

6. childElements ()

Собирает все дочерние элементы и возвращает их как массив расширенных элементов.

7.

имена классов ()

Устаревшее. Возвращает новый экземпляр ClassNames, объект Enumerable, используемый для чтения и записи имен классов CSS элемента.

8. cleanWhitespace ()

Удаляет все текстовые узлы элемента, которые содержат только пробелы. Возвращает элемент.

9. clonePosition ()

Клонирует положение и / или размеры источника в элемент, как определено необязательными параметрами аргумента.

10. cumulativeOffset ()

Возвращает смещения элемента из верхнего левого угла документа.

11. cumulativeScrollOffset ()

Вычисляет совокупное смещение прокрутки элемента в вложенных контейнерах прокрутки.

12. descendantOf ()

Проверяет, является ли элемент потомком предка.

13. (потомки)

Собирает всех потомков элемента и возвращает их как массив расширенных элементов.

14. вниз()

Возвращает первого потомка элемента, который соответствует cssRule. Если cssRule не предоставлен, учитываются все потомки. Если ни один потомок не соответствует этим критериям, возвращается undefined.

15. пустой ()

Проверяет, является ли элемент пустым (т. Е. Содержит только пробелы).

16. расширить ()

Расширяет элемент всеми методами, содержащимися в Element.Methods и Element.Methods.Simulated.

17. Пожар()

Запускает пользовательское событие с текущим элементом в качестве цели.

18. firstDescendant ()

Возвращает первый дочерний элемент. Это противоположно свойству firstChild DOM, которое будет возвращать любой узел.

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 clip, устанавливая значение переполнения элемента в значение «hidden». Возвращает элемент.

33. makePositioned ()

Позволяет легко создать блок, содержащий CSS, установив позицию CSS элемента на «относительный», если его начальная позиция «статическая» или «неопределенная». Возвращает элемент.

34. матч()

Проверяет, соответствует ли элемент заданному селектору CSS.

35. следующий()

Возвращает следующего элемента, который соответствует данному cssRule.

36. nextSiblings ()

Собирает все последующие элементы элемента и возвращает их в виде массива расширенных элементов.

37. наблюдать ()

Регистрирует обработчик события в элементе и возвращает элемент.

38. positionedOffset ()

Возвращает смещение элемента относительно его ближайшего предка.

39. предыдущая ()

Возвращает предыдущего родственного элемента, который соответствует данному cssRule.

40. previousSiblings ()

Собирает все предыдущие элементы элемента и возвращает их как массив расширенных элементов.

41. readAttribute ()

Возвращает значение атрибута элемента или ноль, если атрибут не был указан.

42. recursivelyCollect ()

Рекурсивно собирает элементы, отношения которых определяются свойством.

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

Добавляет, указывает или удаляет атрибуты, переданные в виде хэша или пары имя / значение.

Превращает элемент в абсолютно позиционированный элемент без изменения его положения в макете страницы.

Добавляет данное имя класса CSS к именам классов элемента.

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

Находит всех братьев и сестер текущего элемента, которые соответствуют данному селектору (ам).

Собирает всех предков элемента и возвращает их как массив расширенных элементов.

Собирает все дочерние элементы и возвращает их как массив расширенных элементов.

имена классов ()

Устаревшее. Возвращает новый экземпляр ClassNames, объект Enumerable, используемый для чтения и записи имен классов CSS элемента.

Удаляет все текстовые узлы элемента, которые содержат только пробелы. Возвращает элемент.

Клонирует положение и / или размеры источника в элемент, как определено необязательными параметрами аргумента.

Возвращает смещения элемента из верхнего левого угла документа.

Вычисляет совокупное смещение прокрутки элемента в вложенных контейнерах прокрутки.

Проверяет, является ли элемент потомком предка.

Собирает всех потомков элемента и возвращает их как массив расширенных элементов.

Возвращает первого потомка элемента, который соответствует cssRule. Если cssRule не предоставлен, учитываются все потомки. Если ни один потомок не соответствует этим критериям, возвращается undefined.

Проверяет, является ли элемент пустым (т. Е. Содержит только пробелы).

Расширяет элемент всеми методами, содержащимися в Element.Methods и Element.Methods.Simulated.

Запускает пользовательское событие с текущим элементом в качестве цели.

Возвращает первый дочерний элемент. Это противоположно свойству firstChild DOM, которое будет возвращать любой узел.

Находит вычисленную ширину и высоту элемента и возвращает их как пары ключ / значение объекта.

getElementsByClassName

Устаревшее. Извлекает всех потомков элемента, имеющих CSS-класс className, и возвращает их в виде массива расширенных элементов. Пожалуйста, используйте $$ ().

getElementsBySelector

Устаревшее. Принимает произвольное количество селекторов CSS (строк) и возвращает массив расширенных дочерних элементов, соответствующих любому из них. Пожалуйста, используйте $$ ().

Находит и возвращает вычисленную высоту элемента.

Возвращает ближайшего расположенного элемента предка. Если ничего не найдено, возвращается элемент body.

Возвращает указанное значение свойства CSS элемента. Свойство может быть указано либо в CSS, либо в верблюжьей форме.

Находит и возвращает вычисленную ширину элемента.

Проверяет, имеет ли элемент заданное имя CSS className.

Скрывает и возвращает элемент.

Возвращает атрибут id элемента, если он существует, или устанавливает и возвращает уникальный автоматически сгенерированный идентификатор.

immediateDescendants ()

Устаревшее. Собирает всех непосредственных потомков элемента (то есть потомков) и возвращает их как массив расширенных элементов. Пожалуйста, используйте childElements ().

Вставляет содержимое до, после, вверху или внизу элемента.

Возвращает отладочно-ориентированное строковое представление элемента.

Имитирует плохо поддерживаемое свойство CSS clip, устанавливая значение переполнения элемента в значение «hidden». Возвращает элемент.

Позволяет легко создать блок, содержащий CSS, установив позицию CSS элемента на «относительный», если его начальная позиция «статическая» или «неопределенная». Возвращает элемент.

Проверяет, соответствует ли элемент заданному селектору CSS.

Возвращает следующего элемента, который соответствует данному cssRule.

Собирает все последующие элементы элемента и возвращает их в виде массива расширенных элементов.

Регистрирует обработчик события в элементе и возвращает элемент.

Возвращает смещение элемента относительно его ближайшего предка.

Возвращает предыдущего родственного элемента, который соответствует данному cssRule.

Собирает все предыдущие элементы элемента и возвращает их как массив расширенных элементов.

Возвращает значение атрибута элемента или ноль, если атрибут не был указан.

Рекурсивно собирает элементы, отношения которых определяются свойством.

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

Полностью удаляет элемент из документа и возвращает его.

Удаляет CSS className элемента и возвращает элемент.

Заменяет элемент на содержимое аргумента html и возвращает удаленный элемент.

Прокручивает окно, так что элемент появляется в верхней части области просмотра. Возвращает элемент.

Принимает произвольное количество селекторов CSS (строк) и возвращает массив расширенных потомков элемента, которые соответствуют любому из них.

Устанавливает визуальную непрозрачность элемента при работе с несоответствиями в различных браузерах.

Изменяет свойства стиля CSS элемента.

Отображает и возвращает элемент.

Собирает все родственные элементы элемента и возвращает их как массив расширенных элементов.

Отменяет регистрацию обработчика и возвращает элемент.

Переключает видимость элемента.

Переключает CSS className элемента и возвращает элемент.

Устанавливает свойство CSS переполнения элемента обратно к значению, которое оно имело до применения Element.makeClipping (). Возвращает элемент.

Устанавливает элемент обратно в состояние, в котором он был до того, как к нему был применен Element.makePositioned. Возвращает элемент.

Возвращает первого предка элемента, который соответствует данному cssRule.

Заменяет содержимое элемента на предоставленный аргумент newContent и возвращает элемент.

Возвращает координаты X / Y элемента относительно области просмотра.

Возвращает логическое значение, указывающее, является ли элемент видимым.

Оборачивает элемент внутри другого, затем возвращает оболочку.

Добавляет, указывает или удаляет атрибуты, переданные в виде хэша или пары имя / значение.

Прототип — Обработка чисел

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

  • Совместимость ObjectRange, через номер # succ.

  • Рубиноподобные числовые циклы с числом # раз.

  • Простые служебные методы, такие как Number # toColorPart и Number # toPaddedString.

Совместимость ObjectRange, через номер # succ.

Рубиноподобные числовые циклы с числом # раз.

Простые служебные методы, такие как Number # toColorPart и Number # toPaddedString.

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

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

ПРИМЕЧАНИЕ. — Убедитесь, что у вас есть версия prototype.js 1.6.

S.No. Метод и описание
1. абс ()

Возвращает абсолютное значение числа.

2. CEIL ()

Возвращает наименьшее целое число, большее или равное числу.

3. этаж()

Возвращает наибольшее целое число, меньшее или равное числу.

4. круглый()

Округляет число до ближайшего целого числа.

5. Succ ()

Возвращает преемника текущего Number, как определено current + 1. Используется для того, чтобы сделать числа совместимыми с ObjectRange.

6. раз ( а )

Инкапсулирует обычный цикл [0..n] в стиле Ruby.

7. toColorPart ()

Создает двузначное шестнадцатеричное представление числа (поэтому предполагается, что оно находится в диапазоне [0..255]). Полезно для составления цветовых строк CSS.

8. toJSON ()

Возвращает строку JSON.

9. toPaddedString ()

Преобразует число в строку, дополненную нулями, так что длина строки как минимум равна длине.

Возвращает абсолютное значение числа.

Возвращает наименьшее целое число, большее или равное числу.

Возвращает наибольшее целое число, меньшее или равное числу.

Округляет число до ближайшего целого числа.

Возвращает преемника текущего Number, как определено current + 1. Используется для того, чтобы сделать числа совместимыми с ObjectRange.

Инкапсулирует обычный цикл [0..n] в стиле Ruby.

Создает двузначное шестнадцатеричное представление числа (поэтому предполагается, что оно находится в диапазоне [0..255]). Полезно для составления цветовых строк CSS.

Возвращает строку JSON.

Преобразует число в строку, дополненную нулями, так что длина строки как минимум равна длине.

Прототип — Обработка строк

Prototype расширяет объект String с помощью ряда полезных методов, начиная от тривиального до сложного.

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

Прототип Строковые Методы

ПРИМЕЧАНИЕ. — Убедитесь, что у вас есть версия prototype.js 1.6.

S.No. Метод и описание
1. пустой ()

Проверяет, является ли строка пустой, что означает, что она пустая или содержит только пробел.

2. camelize ()

Преобразует строку, разделенную тире, в эквивалент camelCase. Например, ‘foo-bar’ будет преобразован в ‘fooBar’.

3. прописные буквы ()

Прописывает первую букву строки и пресекает все остальные.

4. dasherize ()

Заменяет каждый экземпляр символа подчеркивания («_») на тире («-«).

5. пустой ()

Проверяет, является ли строка пустой.

6. EndsWith ()

Проверяет, заканчивается ли строка подстрокой.

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. к югу ()

Возвращает строку с первым числом вхождений шаблона, замененным либо обычной строкой, возвращаемым значением функции или строкой шаблона.

23. Succ ()

Используется внутри ObjectRange. Преобразует последний символ строки в следующий символ в алфавите Unicode.

24. раз ( а )

Объединяет строки раз.

25. ToArray ()

Разбивает строку посимвольно и возвращает массив с результатом.

26. toJSON ()

Возвращает строку JSON.

27. toQueryParams ()

Анализирует URI-подобную строку запроса и возвращает объект, состоящий из пар параметр / значение.

28. усечение ()

Обрезает строку до заданной длины и добавляет к ней суффикс (указывая, что это только фрагмент).

29. нижнее подчеркивание()

Преобразует верблюжью строку в серию слов, разделенных подчеркиванием («_»).

30. unescapeHTML ()

Удаляет теги и преобразует формы сущностей специальных символов HTML в их обычную форму.

31. unfilterJSON ()

Разделяет разделители комментариев вокруг ответов AJAX JSON или JavaScript. Этот метод безопасности вызывается внутри.

Проверяет, является ли строка пустой, что означает, что она пустая или содержит только пробел.

Преобразует строку, разделенную тире, в эквивалент camelCase. Например, ‘foo-bar’ будет преобразован в ‘fooBar’.

Прописывает первую букву строки и пресекает все остальные.

Заменяет каждый экземпляр символа подчеркивания («_») на тире («-«).

Проверяет, является ли строка пустой.

Проверяет, заканчивается ли строка подстрокой.

Преобразует специальные символы HTML в их эквиваленты.

Оценивает JSON в строке и возвращает полученный объект.

Оценивает содержимое любого блока скрипта, присутствующего в строке. Возвращает массив, содержащий значение, возвращаемое каждым скриптом.

Извлекает содержимое любого блока скрипта, присутствующего в строке, и возвращает их в виде массива строк.

Возвращает строку при каждом вхождении данного шаблона, замененного либо обычной строкой, возвращаемым значением функции или строкой шаблона.

Проверяет, содержит ли строка подстроку.

Возвращает отладочно-ориентированную версию строки.

Обрабатывает строку как шаблон и заполняет ее свойствами объекта.

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

Анализирует URI-подобную строку запроса и возвращает объект, состоящий из пар параметр / значение.

Позволяет выполнять итерации по каждому вхождению данного шаблона.

Проверяет, начинается ли строка с подстроки.

Удаляет все начальные и конечные пробелы из строки.

Удаляет строку из всего, что выглядит как блок сценария HTML.

Удаляет строку любого тега HTML.

Возвращает строку с первым числом вхождений шаблона, замененным либо обычной строкой, возвращаемым значением функции или строкой шаблона.

Используется внутри ObjectRange. Преобразует последний символ строки в следующий символ в алфавите Unicode.

Объединяет строки раз.

Разбивает строку посимвольно и возвращает массив с результатом.

Возвращает строку JSON.

Анализирует URI-подобную строку запроса и возвращает объект, состоящий из пар параметр / значение.

Обрезает строку до заданной длины и добавляет к ней суффикс (указывая, что это только фрагмент).

Преобразует верблюжью строку в серию слов, разделенных подчеркиванием («_»).

Удаляет теги и преобразует формы сущностей специальных символов HTML в их обычную форму.

Разделяет разделители комментариев вокруг ответов AJAX JSON или JavaScript. Этот метод безопасности вызывается внутри.

Прототип — Обработка массива

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

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

  • Он смешивается в модуле Enumerable, который уже содержит массу методов.

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

Он смешивается в модуле 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.

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

ПРИМЕЧАНИЕ. — Убедитесь, что у вас есть версия prototype.js 1.6.

S.No. Метод и описание
1. Чисто()

Очищает массив (делает его пустым).

2. Клон ()

Возвращает дубликат массива, оставляя исходный массив без изменений.

3. компактный ()

Возвращает новую версию массива без нулевых / неопределенных значений.

4. каждый ()

Перебирает массив в порядке возрастания числового индекса.

5. первый()

Возвращает первый элемент в массиве или неопределенный, если массив пуст.

6. сплющить ()

Возвращает «плоскую» (одномерную) версию массива.

7. от()

Клонирует существующий массив или создает новый из подобной массиву коллекции.

8. индекс()

Возвращает позицию первого вхождения аргумента в массиве.

9. осмотреть()

Возвращает отладочно-ориентированное строковое представление массива.

10. прошлой()

Возвращает последний элемент в массиве или не определено, если массив пуст.

11. уменьшения ()

Сокращает массивы: одноэлементные массивы превращаются в их уникальные элементы, а многоэлементные массивы возвращаются нетронутыми.

12. задний ход()

Возвращает обратную версию массива. По умолчанию напрямую переворачивает оригинал. Если для inline установлено значение false, используется клон исходного массива.

13. размер()

Возвращает размер массива.

14. ToArray ()

Это просто локальная оптимизация смешанного toArray из Enumerable.

15. toJSON ()

Возвращает строку JSON.

16. Uniq ()

Создает версию массива без дубликатов. Если дубликаты не найдены, возвращается исходный массив.

17. без()

Создает новую версию массива, которая не содержит ни одного из указанных значений.

Очищает массив (делает его пустым).

Возвращает дубликат массива, оставляя исходный массив без изменений.

Возвращает новую версию массива без нулевых / неопределенных значений.

Перебирает массив в порядке возрастания числового индекса.

Возвращает первый элемент в массиве или неопределенный, если массив пуст.

Возвращает «плоскую» (одномерную) версию массива.

Клонирует существующий массив или создает новый из подобной массиву коллекции.

Возвращает позицию первого вхождения аргумента в массиве.

Возвращает отладочно-ориентированное строковое представление массива.

Возвращает последний элемент в массиве или не определено, если массив пуст.

Сокращает массивы: одноэлементные массивы превращаются в их уникальные элементы, а многоэлементные массивы возвращаются нетронутыми.

Возвращает обратную версию массива. По умолчанию напрямую переворачивает оригинал. Если для inline установлено значение false, используется клон исходного массива.

Возвращает размер массива.

Это просто локальная оптимизация смешанного toArray из Enumerable.

Возвращает строку JSON.

Создает версию массива без дубликатов. Если дубликаты не найдены, возвращается исходный массив.

Создает новую версию массива, которая не содержит ни одного из указанных значений.

Прототип — обработка хеша

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

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

Есть два способа создать экземпляр 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');

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

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

Методы хеширования прототипов

ПРИМЕЧАНИЕ. — Убедитесь, что по крайней мере установлена ​​версия 1.6 файла prototype.js.

S.No. Метод и описание
1. Клон ()

Возвращает клон хеша.

2. каждый ()

Перебирает пары имя / значение в хэше.

3. получить()

Возвращает значение свойства хеш-ключа.

4. осмотреть()

Возвращает отладочно-ориентированное строковое представление хеша.

5. клавиши ()

Предоставляет массив ключей (то есть имен свойств) для хэша.

6. слияния ()

Объединяет объект в хеш и возвращает результат этого слияния.

7. Удалить()

Удаляет ключи из хеша и возвращает их значения. Этот метод устарел в версии 1.6.

8. задавать()

Устанавливает свойство ключа хеша в значение и возвращает значение.

9. toJSON ()

Возвращает строку JSON.

10. для объекта()

Возвращает клонированный ванильный объект.

11. toQueryString ()

Превращает хэш в представление строки запроса в кодировке URL.

12. снята с охраны ()

Удаляет свойство хеш-ключа и возвращает его значение.

13. Обновить()

Обновляет хэш парами ключ / значение объекта. Исходный хеш будет изменен.

14. ценности()

Собирает значения хэша и возвращает их в массив.

Возвращает клон хеша.

Перебирает пары имя / значение в хэше.

Возвращает значение свойства хеш-ключа.

Возвращает отладочно-ориентированное строковое представление хеша.

Предоставляет массив ключей (то есть имен свойств) для хэша.

Объединяет объект в хеш и возвращает результат этого слияния.

Удаляет ключи из хеша и возвращает их значения. Этот метод устарел в версии 1.6.

Устанавливает свойство ключа хеша в значение и возвращает значение.

Возвращает строку JSON.

Возвращает клонированный ванильный объект.

Превращает хэш в представление строки запроса в кодировке URL.

Удаляет свойство хеш-ключа и возвращает его значение.

Обновляет хэш парами ключ / значение объекта. Исходный хеш будет изменен.

Собирает значения хэша и возвращает их в массив.

Прототип — Базовый Объект

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

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

  • Если вы тот, кто хочет создавать свои собственные объекты, как это делает Prototype, или исследовать объекты, как если бы они были хешами, то поверните, чтобы расширить , ключи и значения .

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

Если вы тот, кто хочет создавать свои собственные объекты, как это делает Prototype, или исследовать объекты, как если бы они были хешами, то поверните, чтобы расширить , ключи и значения .

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

ПРИМЕЧАНИЕ. — Убедитесь, что по крайней мере установлена ​​версия 1.6 файла prototype.js.

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 имеет типовой номер, иначе false.

9. IsString ()

Возвращает true, если obj имеет тип string, иначе false.

10. isUndefined ()

Возвращает true, если obj имеет тип undefined, иначе false.

11. клавиши ()

Обрабатывает любой объект как хэш и извлекает список имен его свойств.

12. toHTML ()

Возвращает возвращаемое значение метода toHTML объекта obj, если он существует, иначе запускает объект obj через String.interpret.

13. toJSON ()

Возвращает строку JSON.

14. toQueryString ()

Превращает объект в представление строки запроса в кодировке URL.

15. ценности()

Обрабатывает любой объект как хэш и извлекает список значений его свойств.

Клонирует переданный объект, используя мелкую копию (копирует все свойства оригинала в результат).

Копирует все свойства из источника в объект назначения.

Возвращает отладочно-ориентированное строковое представление объекта.

Возвращает true, если obj является массивом, иначе false.

Возвращает true, если obj является узлом DOM типа 1, в противном случае — false.

Возвращает true, если obj имеет тип function, иначе false.

Возвращает true, если obj является экземпляром класса Hash, в противном случае — false.

Возвращает true, если obj имеет типовой номер, иначе false.

Возвращает true, если obj имеет тип string, иначе false.

Возвращает true, если obj имеет тип undefined, иначе false.

Обрабатывает любой объект как хэш и извлекает список имен его свойств.

Возвращает возвращаемое значение метода toHTML объекта obj, если он существует, иначе запускает объект obj через String.interpret.

Возвращает строку JSON.

Превращает объект в представление строки запроса в кодировке URL.

Обрабатывает любой объект как хэш и извлекает список значений его свойств.

Прототип — Шаблонирование

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

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

  • Template () — это метод конструктора, который используется для создания объекта шаблона и вызова методаvalu () для применения шаблона.

  • оценивать () — этот метод используется для применения шаблона для форматирования объекта.

Template () — это метод конструктора, который используется для создания объекта шаблона и вызова методаvalu () для применения шаблона.

оценивать () — этот метод используется для применения шаблона для форматирования объекта.

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

  • Создать шаблон — это включает в себя создание предварительно отформатированного текста. Этот текст содержит форматированное содержимое вместе со значениями # {fieldName} . Эти значения # {fieldName} будут заменены фактическими значениями, когда метод valu () будет вызван с фактическими значениями.

  • Определение фактических значений — включает в себя создание фактических значений в форме ключей и значений. Эти ключи будут отображены в шаблоне и будут заменены соответствующими значениями.

  • Сопоставление ключей и замена значений. Это последний шаг, на котором будет вызываться метод define () , и все ключи, доступные в отформатированном объекте, будут заменены определенными значениями.

Создать шаблон — это включает в себя создание предварительно отформатированного текста. Этот текст содержит форматированное содержимое вместе со значениями # {fieldName} . Эти значения # {fieldName} будут заменены фактическими значениями, когда метод valu () будет вызван с фактическими значениями.

Определение фактических значений — включает в себя создание фактических значений в форме ключей и значений. Эти ключи будут отображены в шаблоне и будут заменены соответствующими значениями.

Сопоставление ключей и замена значений. Это последний шаг, на котором будет вызываться метод define () , и все ключи, доступные в отформатированном объекте, будут заменены определенными значениями.

Example1

Шаг 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>

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

Выход

Прототип — Перечисление

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

Методы перечисления в основном используются для перечисления массивов и хэшей . Есть и другие объекты, такие как 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 / select извлекают все элементы, которые соответствуют данному предикату. И наоборот, метод reject () извлекает все элементы, которые не соответствуют предикату. В конкретном случае, когда вам нужны оба набора, вы можете избежать зацикливания дважды: просто используйте метод partition () .

Когда вам нужно вызвать один и тот же метод для всех элементов, используйте метод invoke () .

Когда вам нужно получить одно и то же свойство для всех элементов, используйте метод pluck () .

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

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

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

ПРИМЕЧАНИЕ. — Убедитесь, что у вас есть хотя бы версия 1.6 файла prototype.js.

S.No. Метод и описание
1. все()

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

2. любой()

Определяет, является ли хотя бы один элемент булево-эквивалентным true, либо напрямую, либо посредством вычислений предоставленным итератором.

3. собирать ()

Возвращает результаты применения итератора к каждому элементу. Псевдоним как карта ().

4. обнаружение ()

Находит первый элемент, для которого итератор возвращает true. С псевдонимом методом find ().

5. каждый ()

Он позволяет вам перебирать все элементы в общем виде, а затем возвращает Enumerable, тем самым позволяя вызывать цепочку.

6. eachSlice ()

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

7. Записи ()

Псевдоним для более общего метода toArray.

8. находить()

Находит первый элемент, для которого итератор возвращает true. Удобный псевдоним для обнаружения ().

9. найти все()

Возвращает все элементы, для которых итератор вернул true. С псевдонимом выберите ().

10. Grep ()

Возвращает все элементы, которые соответствуют фильтру. Если предоставляется итератор, он используется для получения возвращаемого значения для каждого выбранного элемента.

11. inGroupsOf ()

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

12. включают()

Определяет, находится ли данный объект в Enumerable или нет, на основе оператора сравнения ==. Псевдоним как член ().

13. инъекционные ()

Постепенно создает значение результата на основе последовательных результатов итератора.

14. вызова ()

Оптимизация для общего варианта использования each () или collect (): вызов одного и того же метода с одинаковыми потенциальными аргументами для всех элементов.

15. карта()

Возвращает результаты применения итератора к каждому элементу. Удобный псевдоним для collect ().

16. Максимум()

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

17. член ()

Определяет, находится ли данный объект в Enumerable или нет, на основе оператора сравнения ==. Удобный псевдоним для include ().

18. мин ()

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

19. раздел ()

Разбивает элементы на две группы: те, которые считаются истинными, и те, которые считаются ложными.

20. срывать ()

Оптимизация для общего варианта использования collect (): выбор одного и того же свойства для всех элементов. Возвращает значения свойств.

21. отвергнуть ()

Возвращает все элементы, для которых итератор возвратил false.

22. Выбрать()

Псевдоним для метода findAll ().

23. размер()

Возвращает размер перечисления.

24. Сортировать по()

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

25. ToArray ()

Возвращает представление массива перечисления. Псевдоним как записи ().

26. застежка — молния ()

Застегните молнию (подумайте о молнии на брюках) 2 + последовательности, предоставляя массив кортежей. Каждый кортеж содержит одно значение на исходную последовательность.

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

Определяет, является ли хотя бы один элемент булево-эквивалентным true, либо напрямую, либо посредством вычислений предоставленным итератором.

Возвращает результаты применения итератора к каждому элементу. Псевдоним как карта ().

Находит первый элемент, для которого итератор возвращает true. С псевдонимом методом find ().

Он позволяет вам перебирать все элементы в общем виде, а затем возвращает Enumerable, тем самым позволяя вызывать цепочку.

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

Псевдоним для более общего метода toArray.

Находит первый элемент, для которого итератор возвращает true. Удобный псевдоним для обнаружения ().

Возвращает все элементы, для которых итератор вернул true. С псевдонимом выберите ().

Возвращает все элементы, которые соответствуют фильтру. Если предоставляется итератор, он используется для получения возвращаемого значения для каждого выбранного элемента.

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

Определяет, находится ли данный объект в Enumerable или нет, на основе оператора сравнения ==. Псевдоним как член ().

Постепенно создает значение результата на основе последовательных результатов итератора.

Оптимизация для общего варианта использования each () или collect (): вызов одного и того же метода с одинаковыми потенциальными аргументами для всех элементов.

Возвращает результаты применения итератора к каждому элементу. Удобный псевдоним для collect ().

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

Определяет, находится ли данный объект в Enumerable или нет, на основе оператора сравнения ==. Удобный псевдоним для include ().

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

Разбивает элементы на две группы: те, которые считаются истинными, и те, которые считаются ложными.

Оптимизация для общего варианта использования collect (): выбор одного и того же свойства для всех элементов. Возвращает значения свойств.

Возвращает все элементы, для которых итератор возвратил false.

Псевдоним для метода findAll ().

Возвращает размер перечисления.

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

Возвращает представление массива перечисления. Псевдоним как записи ().

Застегните молнию (подумайте о молнии на брюках) 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

Представьте страницу вниз ключом.

Key_Backspace

Представляют клавишу пробела назад.

Key_Tab

Представлять вкладку ключ.

Key_Return

Представляете ключ возврата.

KEY_ESC

Представляют клавишу Esc.

Key_Left

Представляете левый ключ.

Key_Up

Представляете до ключа.

Key_Right

Представляете правильный ключ.

KEY_DOWN

Представляете вниз ключ.

Key_Delete

Представляете ключ удаления.

Key_Home

Представляют домашний ключ.

Key_End

Представляют конечный ключ.

Key_PageUp

Представлять страницу вверх ключом.

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 . Скорее всего, вы будете часто использовать функции наблюдения , элемента и остановки .

Методы событий прототипа

ПРИМЕЧАНИЕ. — Убедитесь, что у вас есть хотя бы версия 1.6 файла prototype.js.

S.No. Метод и описание
1. элемент()

Возвращает элемент DOM, для которого произошло событие.

2. расширить ()

Расширяет событие всеми методами, содержащимися в Event.Methods.

3. findElement ()

Возвращает первый элемент DOM с заданным именем тега, вверх от того, на котором произошло событие.

4. isLeftClick ()

Определяет, происходило ли событие мыши, связанное с кнопкой, относительно «левой» (основной, на самом деле) кнопки.

5. наблюдать ()

Регистрирует обработчик событий в элементе DOM.

6. pointerX ()

Возвращает абсолютную горизонтальную позицию для события мыши.

7. pointerY ()

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

8. стоп()

Останавливает распространение события и предотвращает его действие по умолчанию в конце концов.

9. stopObserving ()

Отменяет регистрацию обработчика событий.

10. unloadCache ()

Отменяет регистрацию всех обработчиков событий, зарегистрированных через наблюдатель. Автоматически подключен для вас. Недоступно с 1.6.

Возвращает элемент DOM, для которого произошло событие.

Расширяет событие всеми методами, содержащимися в Event.Methods.

Возвращает первый элемент DOM с заданным именем тега, вверх от того, на котором произошло событие.

Определяет, происходило ли событие мыши, связанное с кнопкой, относительно «левой» (основной, на самом деле) кнопки.

Регистрирует обработчик событий в элементе DOM.

Возвращает абсолютную горизонтальную позицию для события мыши.

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

Останавливает распространение события и предотвращает его действие по умолчанию в конце концов.

Отменяет регистрацию обработчика событий.

Отменяет регистрацию всех обработчиков событий, зарегистрированных через наблюдатель. Автоматически подключен для вас. Недоступно с 1.6.

Прототип — Управление формами

Prototype предоставляет простой способ управления формами HTML. Prototype’s Form — это пространство имен и модуль для всех вещей, связанных с формой, упакованных с совершенством манипулирования формой и сериализации.

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

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

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

ПРИМЕЧАНИЕ. — Убедитесь, что у вас есть хотя бы версия 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, хеш объекта, где ключи — это имена элементов управления формой, а значения — данные.

Отключает форму в целом. Элементы управления формы будут видны, но недоступны для редактирования.

Включает полностью или частично отключенную форму.

Находит первый не скрытый, не отключенный элемент управления формы.

Дает клавиатуру фокус на первый элемент формы.

Возвращает коллекцию всех элементов управления формы внутри формы.

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

Удобный метод для сериализации и отправки формы через Ajax.Request на URL-адрес атрибута действия формы. Параметр options передается экземпляру Ajax.Request, позволяя переопределить метод HTTP и указать дополнительные параметры.

Сбрасывает форму до значений по умолчанию.

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

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

Прототип и учебник JSON

Введение в JSON

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

  • JSON легко читать и писать людям.

  • JSON легко разбирается и генерируется машинами.

  • JSON основан на подмножестве языка программирования JavaScript.

  • JSON широко используется API-интерфейсами во всем Интернете и является быстрой альтернативой XML в запросах Ajax.

  • JSON — это текстовый формат, полностью независимый от языка.

JSON легко читать и писать людям.

JSON легко разбирается и генерируется машинами.

JSON основан на подмножестве языка программирования JavaScript.

JSON широко используется API-интерфейсами во всем Интернете и является быстрой альтернативой XML в запросах Ajax.

JSON — это текстовый формат, полностью независимый от языка.

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

Кодировка JSON

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

ПРИМЕЧАНИЕ. — Убедитесь, что у вас есть хотя бы версия 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 для данного объекта.

Возвращает строку JSON для данного числа.

Возвращает строку JSON для данной строки.

Возвращает строку JSON для данного массива.

Возвращает строку JSON для данного хэша.

Преобразует дату в строку JSON (в соответствии с форматом ISO, используемым JSON).

Возвращает строку 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. Прототип представляет 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

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

Для полного понимания AJAX, пожалуйста, ознакомьтесь с нашим простым AJAX Tutorial .

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

Prototype Framework позволяет вам легко и весело обрабатывать вызовы 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, который срабатывает при возникновении исключения во время отправки других обратных вызовов.

ПРИМЕЧАНИЕ. — Обратные вызовы onUninitialized, onLoading, onLoaded и onInteractive не реализованы согласованно всеми браузерами. В общем, лучше избегать их использования.

Прототип AJAX Методы

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

ПРИМЕЧАНИЕ. — Убедитесь, что у вас есть хотя бы версия 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 и обновляет содержимое контейнера на основе текста ответа.

Это не метод, но подробно описываются все основные параметры, общие для всех запросчиков AJAX и обратных вызовов.

Периодически выполняет запрос AJAX и обновляет содержимое контейнера на основе текста ответа.

Инициирует и обрабатывает AJAX-запрос.

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

Объект передается в качестве первого аргумента всех обратных вызовов Ajax-запросов.

Выполняет запрос 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

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

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

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

пример

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

59
Share: