Take more from Jquery
0 likes462 views
Документ рассматривает использование jQuery и его Widget Factory, подчеркивая преимущества, такие как уменьшение количества кода на 30% и улучшенная архитектура для функциональных компонентов. Обсуждаются детали конфигурации, кастомизации и взаимодействия между различными элементами, что позволяет создать более производительный продукт. Также представлены дополнительные преимущества, такие как наследование, полиморфизм и механизм колбэков.
![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');](https://image.slidesharecdn.com/take-more-from-jquery-121107094448-phpapp01/85/Take-more-from-Jquery-26-320.jpg)
Take more from Jquery
- 1. Возьми больше от jQuery Post JScriptum
- 2. Agenda — Это всего лишь javaScript — Почему jQuery? — Приимущества jQuery Widget factory — Обзор инфраструктуры jQuery Widget Factory
- 3. Это всего лишь JavaScript — “Там нечего писать” — “Элементарщина” — “Придаток к серверной части” — “Как два пальца”
- 4. Вот блин... — Слишком много зависимостей — Не оптимальные решения — Большое количество кода — Повторяющийся код
- 7. DOM-element + Widget = Компонента
- 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.},
- 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');