Очень часто, последнее время приходится заниматься написанием плагинов под jQuery и ему подобные...
И начал как полагалось достаточно не с легкого... слайдера контента с различными визуальными эффектами.
Уперся я в ограничение, что при написании простого плагина через ф-ции, получалось глобальные переменные в общем пространстве имен документа, и немогли работать одновременно более одного слайдера на странице нормально, т.к. они "кушали" одни и те-же переменные...
Пришлось искать методы реализации ООП на JS, и вот хочу привести вам 2 примера реализации сего чуда.
1. Использование функций.Да, это конечно один из самых распространенных вариантов. Вы обозначаете функцию, и после чего создаете из нее объект используя
new, для обозначение свойств и методов используем
this.
function Car (type) {
this.type = type;
this.color = "red";
this.getInfo = getCarInfo;
}
function getCarInfo() {
return this.color + ' ' + this.type + ' car';
}
Для создания объекта, давайте объявим его используя выше описанную функцию, и изменим пару значений уже в объекте, после чего вызовем наш метод getInfo.
var car = new Car('honda');
car.color = "white";
alert(car.getInfo());
//White honda car
Но, у такой техники есть один большой минус - очень много приходится описывать лишних функций (как в нашем примере
getCarInfo), к тому же которые являются глобальными и могут в итоге конфликтовать с другими "подключаемыми модулями". Можно конечно воспользоваться no-name функциями, но вскоре можно и легко будет запутаться в большом коде...
Вот пример использования
no-name функций.
function Car (type) {
this.type = type;
this.color = "red";
this.getInfo = function(){
return this.color + ' ' + this.type + ' car';
}
}
Еще можно использовать прототипы функций... Немного предисловия... у каждого объекта или функции есть встроенный объект
_prototype_, который создается во время конструирования (создания) объекта. Тоесть это уже вложенный (не общий, не публичный) объект.
function Car (type) {
this.type = type;
this.color = "red";
}
Car.prototype.getCarInfo() {
return this.color + ' ' + this.type + ' car';
}
Вызывать или обращаться к такому методу, можно так же как и в самом начале этого пункта. (
Car.getCarInfo())
2. Создание сразу объекта. Опуская ключевое newСоздавать объекты можно двумя способами:
- car = new Object();
- car = {}
var Car = {
type: "honda",
color: "red";
getInfo: function(){
return this.color + ' ' + this.type + ' car';
}
}
В данном варианте, Вам не прийдется обозначать объект(
аля класс), он уже у Вас есть.
Car.color = "white";
alert(Car.getInfo());
Но у такого метода есть неприятные вещи... нету метода конструктора, его придется описывать, и самостоятельно вызывать.
Еще хотелось добавить немного о "видах" переменных и методах.- private variables обозначаются 'var' ключем внутри объекта, и могут быть доступными только лишь private functions и privileged methods.
- private functions обозначаются внутри конструктора объекта и могут быть доступными только лишь для privileged methods (включая конструктор объекта).
- privileged methods обозначаются с помощью this.methodName=function(){...} и могут быть доступны извне объекта.
- public properties обозначаются с помощью this.variableName и могут быть прочитаны/записаны извне объекта.
- public methods обозначаются следующим способом Classname.prototype.methodName = function(){...} и могут быть доступны извне объекта.
- prototype properties обозначаются Classname.prototype.propertyName = someValue
- static properties обозначаются так: Classname.propertyName = someValue
Замечание модератора:
Эта тема была закрыта автоматически ввиду отсутствия активности в ней на протяжении 100+ дней.
Если Вы считаете ее актуальной и хотите оставить сообщение, то воспользуйтесь кнопкой
или обратитесь к любому из модераторов.
|