Статьи

Объектно-ориентированное программирование с Prototype.js

Февраль 8, 2018

Объектно-ориентированное программирование существует довольно давно и стало популярным благодаря C ++. В настоящее время даже языки веб-сценариев поддерживают эту парадигму. JavaScript не имеет истинного ОО, но позволяет вам использовать шаблон дизайна в вашем коде. Сегодня мы углубимся в использование объектно-ориентированного программирования с популярной платформой JavaScript Prototype.

Prototype позволяет легко объявлять ваши собственные объекты с помощью метода «Class.create ()»:

var sampleObject = Class.create();

Как только вы это сделаете, вы можете начать писать специфичные для вашего класса методы и свойства внутри объекта «prototype»:

sampleObject.prototype = {
}

Чтобы объявить закрытые свойства, просто укажите имя свойства, двоеточие и значение:

sampleObject.prototype = {
	linkIDs: ['mainPageLink', 'cdmScreenLink', 'adminLink', 'helpLink'],
	statusMessage: '',
	currentLinkID: 'myLink'
}

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

currentLinkID: 'myLink',

действует в то время как

currentLinkID:,

не является.

Объявление ваших собственных функций ничем не отличается. Однако прежде чем мы рассмотрим функции, есть одна функция, которая требует особого внимания: функция «initialize»:

initialize: function() {
}

Функция initialize — это то, что JavaScript вызывает автоматически при создании экземпляра вашего объекта. Если вы знакомы с ОО, эта функция является конструктором вашего объекта. Все настройки и начальные требования для использования вашего объекта должны быть сделаны здесь.

Поэтому, чтобы вернуться к обычным функциям, они объявляются в формате functionName: function () {} как в:

doSomething: function() {
}

Пока ваш объект должен выглядеть так:

var sampleObject = Class.create();
sampleObject.prototype = {
	linkIDs: ['mainPageLink', 'cdmScreenLink', 'adminLink', 'helpLink'],
	statusMessage: '',
	currentLinkID: 'myLink',
	initialize: function() {
	},
	doSomething: function() {
	}
}

Правильно, в том числе и то, что на вашей html-странице и / или в отдельном файле JavaScript ничего для вас не работает Следующий шаг в его использовании — создать экземпляр объекта следующим образом:

var sampleObjectInstance = new sampleObject();

Создание экземпляра объекта автоматически вызывает весь ваш код внутри функции «initialize». Здесь хорошая практика — обернуть создание вашего объекта в событие Windows load или dom :loaded (Prototype v1.6), например:

Event.observe(window, 'load', function() {
	var sampleObjectInstance = new sampleObject();
});

Или

document.observe("dom:loaded", function() {
	var sampleObjectInstance = new sampleObject();
});

Чтобы расширить использование свойств внутри вашего объекта, всякий раз, когда вы хотите получить доступ к свойству, например «currentLinkID», вы должны добавить к нему «this», как в:

this.statusMessage = 'Who Am I?';

Это потому, что внутри функции вашего объекта, без «this», код не знает о свойстве. То же самое относится и к использованию функции, поэтому вы не можете просто вызвать функцию «doSomething» с помощью:

doSomething();

но вместо этого, если вы должны использовать:

this.doSomething();

 

Это может быть немного сложнее, когда дело доходит до использования слушателей событий внутри вашего кода. Позвольте мне уточнить. Чтобы связать обозреватель событий, который будет вызывать функцию «doSomething», когда пользователи щелкают ссылку с идентификатором «myLink», вы обычно делаете:

$(this.currentLinkID).observe('click', this.doSomething);

Хотя это будет работать, если вы попытаетесь получить доступ к каким-либо свойствам класса (например, «statusMessage») внутри функции «doSomething», вы получите «undefined» для их значений. Это потому, что, как уже указывалось выше, функция не знает, что она принадлежит объекту, поэтому она не знает, что объект имеет свойства. Решение простое, просто добавьте .bind (this) к функции, когда она связана с событием, как в:

$(this.currentLinkID).observe('click', this.doSomething.bind(this));

Аналогичный подход необходимо применять при использовании прототипа встроенного объекта Ajax. Если вы хотите связать свои пользовательские функции с функциями onFailure, onComplete или onSuccess, вам нужно использовать функцию bindAsEventListener:

onSuccess: this.showContent.bindAsEventListener(this)

«Привязка» также должна использоваться всякий раз, когда вы используете конструкцию «каждый», как описано в Gotcha с Prototype.Bind и Arrays.

Ниже приведен полный класс:

var sampleObject = Class.create();
sampleObject.prototype = {
	linkIDs: ['mainPageLink', 'cdmScreenLink', 'adminLink', 'helpLink'],
	statusMessage: '',
	currentLinkID: 'myLink',
	initialize: function() {
		this.statusMessage = 'Who Am I?';

		$(this.currentLinkID).observe('click', this.doSomething.bind(this));
	},
	doSomething: function() {
		alert(this.statusMessage);

		new Ajax.Request(
			$(this.currentLinkID).href,
			{
			method: 'get',
			onSuccess: this.processContent.bindAsEventListener(this),
			evalScripts: true
			}
		);
	},
	processContent: function(request) {
	}
}

Event.observe(window, 'load', function() {
	var sampleObjectInstance = new sampleObject();
});

Для вызова функций sampleObject извне вы просто должны сделать:

sampleObjectInstance.doSomething();

Хотя вы можете получить доступ к его свойствам с помощью синтаксиса:

alert(sampleObjectInstance.statusMessage);

На этом завершается основное руководство по использованию объектно-ориентированного программирования с Prototype. Я что-то пропустил, чтобы вы начали?

29
Share: