1. Возьми больше от jQuery
Post JScriptum

2. Agenda
— Это всего лишь javaScript
— Почему jQuery?
— Приимущества jQuery Widget factory
— Обзор инфраструктуры jQuery Widget
Factory

3. Это всего лишь JavaScript
— “Там нечего писать”
— “Элементарщина”
— “Придаток к серверной части”
— “Как два пальца”

4. Вот блин...
— Слишком много зависимостей
— Не оптимальные решения
— Большое количество кода
— Повторяющийся код

5. Почему jQuery?

6. Widget Factory

7. DOM-element
+
Widget
=
Компонента

8. it's alive!!!

9. Translate Inline
или как нам удалось уменьшить количество кода
на 30%, значительно расширив функциональность
и увеличив производительность...

11. 1. Количество кода стало меньше на 30%
До рефакторинга После рефакторинга
Количество строк - 209 Количество строк - 133
Вес файла – 7.3 Кб Вес файла – 5.1 Кб

12. 2. Улучшенная архитектура
Edit Trigger
+
Translate Inline
+
Dialog

13. 3. Конфигурация
1.$.widget("mage.translateInline", {
2. options: {
3. translateForm: {
4. template: /* template */,
5. data: {
6. id: 'translate-inline-form',
7. message: 'Please refresh the page.'
8. }
9. },
10. dialog: {
11. modal: true,
12. dialogClass: "dialog",
13. width: 650,
14. title: 'Translate',
15. height: 470,
16. zIndex: 2100,
17. }
18. },
19. /* Widget methods */
20.});

15. 4. Кастомизация
1.$(document).translateInline({
2. display: 'inline',
3. translateForm: {
4. template: /* new template */
5. },
6. editTrigger: {
7. template: /* new template */,
8. alt:'Translate',
9. offsetTop:0
10. },
11. dialog: {
12. modal:false,
13. width: 320,
14. height: 170,
15. id: 'translate-dialog'
16. }
17.});

17. 5. Коммуникация между компонентами
dialog
Translate Inline
edit event
edit event
Text for translate
Edit Trigger
1._onClick: function(e) {
1.this.element
2. e.stopImmediatePropagation();
.on('edit.editTrigger', $.proxy(this._onEdit, this));
3. $(this.currentTarget).trigger('edit.' + this.widgetName);
4.},

18. 6. Неожиданный бонус.
$(‘#statistic-area').translateInline();

19. Дополнительные
преимущества
— Наследование и полиморфизм
— Конструктор/Деструктор
— Псевдоселектор
— Private и Public методы
— Механизм колбэков

20. Нет Велосипедам!

21. I WANT YOU TO USE
JQUERY WIDGET FACTORY

22. Ресурсы
• http://wiki.jqueryui.com/w/page/12138135/Widget%20factory
• http://ajpiano.com/widgetfactory/
• http://bililite.com/blog/understanding-jquery-ui-widgets-a-tutorial/
• http://www.erichynds.com/jquery/tips-for-developing-jquery-ui-widgets/
• http://net.tutsplus.com/tutorials/javascript-ajax/coding-your-first-jquery-ui-
plugin/

23. 1. Декларация
$.widget('component.menu', {
options: {
type: 'horisontal',
…
},
_create: function(){…},
…
});
2. Инициализация
$('#menu-id').menu();
3. Кастомизация
$('#menu-id').menu({
type: 'vertical',
show: function(el){el.faneIn(100);}
});

24. 4. this.element
$.widget('component.menu', {
_create: function(){
this.element.on('click', function(){...});
},
…
});
5. private/public методы
$('#menu-id').menu('show', 'slow');
$('#menu-id').menu('_render');
6. Cоздание нескольких инстансов одновременно
7. Автоматический вызов метода “_create”,
“_init”
$('#menu-id').menu(); //Отработает _create и _init
$('#menu-id').menu(); //Отработает только _init

25. 8. Метод “destroy”
9. disable/enable
10. Псевдоселектор
$(‘:component-menu');
11. Наследование/Полиморфизм
$.widget('my.dialog', $.ui.dialog.prototype, {
open: function(){
/*Your code here*/
$.ui.dialog.prototype.show.apply(this, arguments);
}
});
12. Механизм колбэков _trigger

26. 13. Мгновенное реагирование на изменение опций
$.widget('my.dialog', $.ui.dialog.prototype, {
_setOption: function(key, value) {
var oldValue = this.options[key];
if (key == "className") {
this.element.toggleClass(oldValue + " " + value);
}
// Вызов базового метода _setOption
$.Widget.prototype._setOption.apply(this, arguments);
}
});
$('#dialog-id').dialog('option', 'className', 'white');