Take more from Jquery

659 views

Published on

  • Be the first to comment

  • Be the first to like this

Take more from Jquery

  1. 1. Возьми больше от jQueryPost JScriptum
  2. 2. Agenda— Это всего лишь javaScript— Почему jQuery?— Приимущества jQuery Widget factory— Обзор инфраструктуры jQuery Widget Factory
  3. 3. Это всего лишь JavaScript— “Там нечего писать”— “Элементарщина”— “Придаток к серверной части”— “Как два пальца”
  4. 4. Вот блин...— Слишком много зависимостей— Не оптимальные решения— Большое количество кода— Повторяющийся код
  5. 5. Почему jQuery?
  6. 6. Widget Factory
  7. 7. DOM-element + Widget =Компонента
  8. 8. its alive!!!
  9. 9. Translate Inlineили как нам удалось уменьшить количество кодана 30%, значительно расширив функциональностьи увеличив производительность...
  10. 10. 1. Количество кода стало меньше на 30%До рефакторинга После рефакторингаКоличество строк - 209 Количество строк - 133Вес файла – 7.3 Кб Вес файла – 5.1 Кб
  11. 11. 2. Улучшенная архитектура Edit Trigger + Translate Inline + Dialog
  12. 12. 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.});
  13. 13. 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:010. },11. dialog: {12. modal:false,13. width: 320,14. height: 170,15. id: translate-dialog16. }17.});
  14. 14. 5. Коммуникация между компонентами dialog Translate Inline edit event edit event Text for translate Edit Trigger1._onClick: function(e) {1.this.element2. e.stopImmediatePropagation(); .on(edit.editTrigger, $.proxy(this._onEdit, this));3. $(this.currentTarget).trigger(edit. + this.widgetName);4.},
  15. 15. 6. Неожиданный бонус.$(‘#statistic-area).translateInline();
  16. 16. Дополнительныепреимущества— Наследование и полиморфизм— Конструктор/Деструктор— Псевдоселектор— Private и Public методы— Механизм колбэков
  17. 17. Нет Велосипедам!
  18. 18. I WANT YOU TO USEJQUERY WIDGET FACTORY
  19. 19. Ресурсы• 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/
  20. 20. 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);}});
  21. 21. 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
  22. 22. 8. Метод “destroy”9. disable/enable10. Псевдоселектор$(‘:component-menu);11. Наследование/Полиморфизм$.widget(my.dialog, $.ui.dialog.prototype, { open: function(){ /*Your code here*/ $.ui.dialog.prototype.show.apply(this, arguments); }});12. Механизм колбэков _trigger
  23. 23. 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);

×