Главная

Организация разработки веб-приложений с JQuery виджетами

2012-03-15 в 14:34, admin, рубрики: html5, jquery, widgets, метки: html5, jquery, widgets

Проблема

В настоящей статье хотел поделиться своим опытом разработки веб-приложений с использованием JQuery.
В ходе процесса написания бизнес-логики для веб-приложения возникла необходимость грамотно построить код для дальнейшего развития и рефакторинга проекта. Поскольку это был первый опыт работы в «веб-индустрии», решено было идти напролом. Спустя некторое время, стало понятно, что время на поиск необходимого фрагмента уходит гораздо больше, нежели на разработку. Далее хотелось бы предложить свое видение правильной организации и структуризации JQuery-кода.

Решение

Изучив существующие веяния моды стало понятно, что лучше всего использование паттернов. Их организация схожа с тем что встречается в других языках программирования и выглядит следующим образом:
— «конструктор» (метод позволяющий создавать или возвращать необходимый объект)
— базовый класс (структура, содержащая в базовые методы)
— наследуемый класс (структура содержащая дополнительные методы, помимо базовых).
Тем самым, можно причислить JQuery к ООП, ведь как минимум полиморфизм присутствует.
Рассмотрим опысанные выше конструкции более подробно. Во-первых рассмотрим «конструктор». Он представляет собой функцию, позволяющую создавать или получать экземпляр объекта для дальнейшей работы с ним. Следующий код демонстрирует его структуру:

$.widget = function(name, object) {
$.fn[name] = function(options) {
return this.each(function() {
var instance = $.data(this, name);//получаем объект если он был создан иначе пустой объект

if (!instance) {
instance = $.data(this, name, Object.create(object));//создание объекта
instance.(options, this);}//инициализация
});
};
};

Как видно из кода, механизм прост. Задача сводится к так называемому кэшированию объектов, доступ к которым осуществляется по ключу (name). Также при создании объекта происходит его инициализация, но данное действие не обязательно, поскольку возможно отложенная инициализация.
Теперь рассмотрим как должны выглядеть классы. Начнем с базового класса:

var BaseCl = {
init: function(options, element) {
this.options = $.extend({},this.options,options);//«склеивает» параметры options
this.element = $(element);//сохраняет ссылку на базовый объект
},

options: {
name: ''
},

func1: function(val) {
…
},
func2: function(val) {
…
}
};

Класс содержит метод init для инициализации необходимых параметров а также набор дополнительных методов и структур.
И последний класс, который является расширением базового — наследуемый:

var ChildCl = BaseCl.extend({
init: function(options, element) {
this.options = $.extend({},this.options,options);//«склеивает» параметры options
this.element = $(element);//сохраняет ссылку на базовый объект
},

options: {
name: ''
},

func3: function() {
…
},
func4: function() {
…
}
});

Как видно данный класс объекдиняется с базовым. Поскольку в определении наслудуемого класса есть определение метода инициализации — данные метод будет переопределен. Помимо этого ChildCl позволяет вызывать как методы определенные в в своем теле, так и методы наследующего класса.

На последок приведу методы, позволяющие обращаться к созданным объектам:

$.widget('child', ChildCl);

$(document).ready(function() {

//вызов так
$('#div').child({ name: 'hello world' });
var chld = $('#div').data('child');
chld.func1('');
chld.func3();

//либо
$('#div').child({name:'hell'});
$('#div').child('func1', '');

});