Design and Control of a Cable-Driven Articulated Modular ...
JavaScript Modular e Event-Driven
-
Upload
eduardo-shiota-yasuda -
Category
Technology
-
view
11.136 -
download
0
description
Transcript of JavaScript Modular e Event-Driven
![Page 1: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/1.jpg)
JAVASCRIPT MODULARE EVENT-DRIVEN
@shiota 2013
![Page 2: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/2.jpg)
OLÁ!slideshare.net/eshiota
github.com/eshiota@shiota
![Page 3: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/3.jpg)
front-end engineer@
![Page 4: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/4.jpg)
![Page 5: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/5.jpg)
* 28/08/2013 https://github.com/search?p=1&q=stars%3A%3E1&s=stars&type=Repositories
Dos 50 repositórios maispopulares do Github, 28 repositórios são relacionados a JavaScript.
![Page 6: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/6.jpg)
JavaScript é legal!
![Page 7: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/7.jpg)
![Page 8: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/8.jpg)
Mas pode ser infernal também.
![Page 9: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/9.jpg)
![Page 10: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/10.jpg)
Ele pode ficar impossível de ser entendido ou alterado.
![Page 11: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/11.jpg)
(function(){ window.app = jQuery.extend({ init: function(){ tab = $('.tabs li > a.tab-toggle'); tabs = $('.tabs').find('> div');
if (tabs.length > 1){ tab.each(function (i){$(this).attr('href', '#content-' + ++i)}); tabs.each(function(i){$(this).attr('id', 'content-' + ++i)}); tabs.addClass('tab-inactive'); $('.tabs li:first-child a').addClass('state-active'); }
$('#initial-cash, #financing_value_vehicles, #tax, #bid-initial-cash, #bid-product-value').maskMoney({ thousands: '.', decimal: ',', allowZero: true, allowNegative: false, defaultZero: true });
/** FINANCING CALCULATOR **/ $("#financing_value_vehicles").on("blur", function(){ var price = (accounting.unformat($(this).val(), ",")) || 0;
var suggestedInitialPayment = price * 0.2;
var formattedResult = accounting.formatMoney(suggestedInitialPayment, "", "2", ".", ","); $("#initial-cash").val(formattedResult); });
$("#calculate-financing").click(function(event){ var price = (accounting.unformat($("#financing_value_vehicles").val(), ",")) || 0;
var rate = (accounting.unformat($("#tax").val(), ",") / 100) || 0;
var initialCash = (accounting.unformat($("#initial-cash").val(), ",")) || 0;
var value = (accounting.unformat($("#amount-finance").val(), ",")) || 0; var finance = price - initialCash;
var months = (accounting.unformat($("#prize_parcela").val(), ",")) || 0; var tax = parseFloat(rate);
var nominator = (Math.pow(1 + tax, months)); var denominator = ((Math.pow(1 + tax, months)) - 1);
var formattedFinance = accounting.formatMoney(finance, "", "2", ".", ","); $("amount-finance").val(formattedFinance);
var financingValue = finance*nominator*tax/denominator; var result = accounting.formatMoney(financingValue, "R$ ", "2", ".", ",");
$(".calculator_financing li.result p.value").text(result); this.button = $("#calc"); if( result != ""){ $("a.button").remove(); this.button.after("<a href='financiamento/new?vehicle_value="+price+"' class='button'>Cote Agora</a>"); };
event.preventDefault(); });
$("#initial-cash").bind("blur", function () { var price = (accounting.unformat($("#financing_value_vehicles").val(), ",")) || 0; var initialCash = (accounting.unformat($("#initial-cash").val(), ",")) || 0;
var finance = price - initialCash;
var formattedValue = accounting.formatMoney(finance, "", "2", ".", ","); $("#amount-finance").val(formattedValue); }); /** ------------ **/
/** BID CALCULATOR **/ $("input#calculate-bid").click(function(event){ var price = (accounting.unformat($("#bid-product-value").val(), ",")) || 0;
var rate = (accounting.unformat($("#bid-tax").val(), ",") / 100) || 0;
var initialCash = (accounting.unformat($("#bid-initial-cash").val(), ",")) || 0;
var value = (accounting.unformat($("#bid-amount-finance").val(), ",")) || 0; var finance = price - initialCash;
var months = (accounting.unformat($("#bid-prize_parcela").val(), ",")) || 0; var tax = parseFloat(rate);
var nominator = (Math.pow(1 + tax, months)); var denominator = ((Math.pow(1 + tax, months)) - 1);
var formattedFinance = accounting.formatMoney(finance, "", "2", ".", ","); $("#bid-amount-finance").val(formattedFinance);
var result = accounting.formatMoney(((finance*nominator*tax/denominator)), "R$ ", "2", ".", ","); $(".calculator_bid li.result p.value").text(result);
event.preventDefault(); });
$("#bid-initial-cash").bind("blur", function () { var price = (accounting.unformat($("#bid-product-value").val(), ",")) || 0; var initialCash = (accounting.unformat($("#bid-initial-cash").val(), ",")) || 0;
var finance = price - initialCash;
var formattedValue = accounting.formatMoney(finance, "", "2", ".", ","); $("#bid-amount-finance").val(formattedValue); }); /** ------------ **/
$('.state-active').each(function(i){ active_tab = $(this).attr('href') $(this).parents('section').find('div' + active_tab).addClass('tab-active') });
$('.tooltip').hide(); if ($("html").is(".lt-ie9")) { $('a').hover( function(){ $(this).siblings('.tooltip').show(); }, function(){ $(this).siblings('.tooltip').hide(); } ); } else { $('a').hover( function(){ $(this).siblings('.tooltip').fadeIn(); }, function(){ $(this).siblings('.tooltip').fadeOut(); } ); }
tab.live('click', function(event){ event.preventDefault(); link = $(this).attr('href') el = $(this).parents('.tabs')
el.find('div').removeClass('tab-active'); el.find('a').removeClass('state-active');
$(this).addClass('state-active') el.find('div' + link).addClass('tab-active');
});
$('a').unbind('click').hasClass('state-active'); $('a.state-active').unbind('click');
$("#schedule nav a").live("click", function(event){ $('#schedule nav a').removeClass('state-active') $(this).addClass('state-active') $(".window div").animate({ top: "" + ($(this).hasClass("prev") ? 0 : -210) + "px" }); event.preventDefault() });
app.advertisementNewForm(); },
advertisementNewForm: function(){ $('span.select-image').bind('click', function(){ $(this).parent('li').find('input[type="file"]').click(); });
}
}); $().ready(app.init);}).call(this);
![Page 12: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/12.jpg)
(um arquivo JS,uma função de 173 LOC,no mínimo 7 responsabilidades)
![Page 13: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/13.jpg)
Ele pode virar um CALLBACK HELL(e algumas libraries facilitam ainda mais isso)
![Page 14: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/14.jpg)
$(".submit-button").on("click", function () { $.ajax({ url : "/create", type : "POST", success : function (data) { $.each(data.created_items, function (index, value) { var item = $("<div />").text(value); $(".items-list").append(item).hide().fadeIn(400, function () { setTimeout(function () { item.fadeOut(function () { item.remove(); }); }, 1000); }); }); } });});
![Page 15: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/15.jpg)
![Page 16: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/16.jpg)
Uma estrutura modular e baseada em eventos resolve esses problemas e muito mais.
![Page 17: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/17.jpg)
DISCLAIMER #1Sem MV* frameworks
![Page 18: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/18.jpg)
DISCLAIMER #2jQuery (para encurtar os exemplos)
![Page 19: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/19.jpg)
DISCLAIMER #3Pseudo-implementações =)
![Page 20: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/20.jpg)
MÓDULOS
![Page 21: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/21.jpg)
Responsabilidade única, integrante de um sistema complexo.
![Page 22: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/22.jpg)
![Page 23: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/23.jpg)
Responsabilidades e comportamentos isolados.
![Page 24: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/24.jpg)
![Page 25: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/25.jpg)
Testáveis.
![Page 26: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/26.jpg)
![Page 27: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/27.jpg)
Extensíveis e modificáveis (até certo ponto).
![Page 28: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/28.jpg)
![Page 29: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/29.jpg)
Podem ser substituídos, ou reutilizados.
![Page 30: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/30.jpg)
![Page 31: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/31.jpg)
Nesta apresentaçãosingle entry points
namespacesmodule pattern
constructorsModule.js
mediator & pub/submixins
![Page 32: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/32.jpg)
Single entry points
![Page 33: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/33.jpg)
(function(){ window.app = jQuery.extend({ init: function(){ tab = $('.tabs li > a.tab-toggle'); tabs = $('.tabs').find('> div');
if (tabs.length > 1){ tab.each(function (i){$(this).attr('href', '#content-' + ++i)}); tabs.each(function(i){$(this).attr('id', 'content-' + ++i)}); tabs.addClass('tab-inactive'); $('.tabs li:first-child a').addClass('state-active'); }
$('#initial-cash, #financing_value_vehicles, #tax, #bid-initial-cash, #bid-product-value').maskMoney({ thousands: '.', decimal: ',', allowZero: true, allowNegative: false, defaultZero: true });
/** FINANCING CALCULATOR **/ $("#financing_value_vehicles").on("blur", function(){ var price = (accounting.unformat($(this).val(), ",")) || 0;
var suggestedInitialPayment = price * 0.2;
var formattedResult = accounting.formatMoney(suggestedInitialPayment, "", "2", ".", ","); $("#initial-cash").val(formattedResult); });
$("#calculate-financing").click(function(event){ var price = (accounting.unformat($("#financing_value_vehicles").val(), ",")) || 0;
var rate = (accounting.unformat($("#tax").val(), ",") / 100) || 0;
var initialCash = (accounting.unformat($("#initial-cash").val(), ",")) || 0;
var value = (accounting.unformat($("#amount-finance").val(), ",")) || 0; var finance = price - initialCash;
var months = (accounting.unformat($("#prize_parcela").val(), ",")) || 0; var tax = parseFloat(rate);
var nominator = (Math.pow(1 + tax, months)); var denominator = ((Math.pow(1 + tax, months)) - 1);
var formattedFinance = accounting.formatMoney(finance, "", "2", ".", ","); $("amount-finance").val(formattedFinance);
var financingValue = finance*nominator*tax/denominator; var result = accounting.formatMoney(financingValue, "R$ ", "2", ".", ",");
$(".calculator_financing li.result p.value").text(result); this.button = $("#calc"); if( result != ""){ $("a.button").remove(); this.button.after("<a href='financiamento/new?vehicle_value="+price+"' class='button'>Cote Agora</a>"); };
event.preventDefault(); });
$("#initial-cash").bind("blur", function () { var price = (accounting.unformat($("#financing_value_vehicles").val(), ",")) || 0; var initialCash = (accounting.unformat($("#initial-cash").val(), ",")) || 0;
var finance = price - initialCash;
var formattedValue = accounting.formatMoney(finance, "", "2", ".", ","); $("#amount-finance").val(formattedValue); }); /** ------------ **/
/** BID CALCULATOR **/ $("input#calculate-bid").click(function(event){ var price = (accounting.unformat($("#bid-product-value").val(), ",")) || 0;
var rate = (accounting.unformat($("#bid-tax").val(), ",") / 100) || 0;
var initialCash = (accounting.unformat($("#bid-initial-cash").val(), ",")) || 0;
var value = (accounting.unformat($("#bid-amount-finance").val(), ",")) || 0; var finance = price - initialCash;
var months = (accounting.unformat($("#bid-prize_parcela").val(), ",")) || 0; var tax = parseFloat(rate);
var nominator = (Math.pow(1 + tax, months)); var denominator = ((Math.pow(1 + tax, months)) - 1);
var formattedFinance = accounting.formatMoney(finance, "", "2", ".", ","); $("#bid-amount-finance").val(formattedFinance);
var result = accounting.formatMoney(((finance*nominator*tax/denominator)), "R$ ", "2", ".", ","); $(".calculator_bid li.result p.value").text(result);
event.preventDefault(); });
$("#bid-initial-cash").bind("blur", function () { var price = (accounting.unformat($("#bid-product-value").val(), ",")) || 0; var initialCash = (accounting.unformat($("#bid-initial-cash").val(), ",")) || 0;
var finance = price - initialCash;
var formattedValue = accounting.formatMoney(finance, "", "2", ".", ","); $("#bid-amount-finance").val(formattedValue); }); /** ------------ **/
$('.state-active').each(function(i){ active_tab = $(this).attr('href') $(this).parents('section').find('div' + active_tab).addClass('tab-active') });
$('.tooltip').hide(); if ($("html").is(".lt-ie9")) { $('a').hover( function(){ $(this).siblings('.tooltip').show(); }, function(){ $(this).siblings('.tooltip').hide(); } ); } else { $('a').hover( function(){ $(this).siblings('.tooltip').fadeIn(); }, function(){ $(this).siblings('.tooltip').fadeOut(); } ); }
tab.live('click', function(event){ event.preventDefault(); link = $(this).attr('href') el = $(this).parents('.tabs')
el.find('div').removeClass('tab-active'); el.find('a').removeClass('state-active');
$(this).addClass('state-active') el.find('div' + link).addClass('tab-active');
});
$('a').unbind('click').hasClass('state-active'); $('a.state-active').unbind('click');
$("#schedule nav a").live("click", function(event){ $('#schedule nav a').removeClass('state-active') $(this).addClass('state-active') $(".window div").animate({ top: "" + ($(this).hasClass("prev") ? 0 : -210) + "px" }); event.preventDefault() });
app.advertisementNewForm(); },
advertisementNewForm: function(){ $('span.select-image').bind('click', function(){ $(this).parent('li').find('input[type="file"]').click(); });
}
}); $().ready(app.init);}).call(this);
![Page 34: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/34.jpg)
Page load
jQuery load
jQuery plugins
application.js
![Page 35: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/35.jpg)
Sem pontos de entrada, é difícil segmentar a execução por página ou rota.
![Page 36: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/36.jpg)
Pontos únicos de entrada controlam o flow da aplicação.
![Page 37: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/37.jpg)
Page load
Vendor code
Application modules
application.js
dispatcher.js
beforeCommand controllerCommand actionCommand afterCommand
![Page 38: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/38.jpg)
Page load
Vendor code
Application modules
application.js
dispatcher.js
beforeCommand controllerCommand actionCommand afterCommand
![Page 39: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/39.jpg)
O dispatcher executa funções baseadas no controller e na action da página.
![Page 40: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/40.jpg)
<body data-dispatcher="<%= dispatcher_label %>">
![Page 41: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/41.jpg)
def dispatcher_label action_name = controller.action_name action_name.gsub!(/_/, "")
"#{controller_name}##{action_name}"end
![Page 42: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/42.jpg)
<body data-dispatcher="products#show">
![Page 43: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/43.jpg)
dispatcher.js
beforeCommand()
productsControllerCommand()
productsShowCommand()
afterCommand()
products#show
![Page 44: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/44.jpg)
Os commands não contêm lógica, apenas inicializam outros módulos.
![Page 45: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/45.jpg)
Namespaces
![Page 46: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/46.jpg)
ns("MYAPP.commands.productsShowCommand", function () { console.log("Execute code from products#show page");});
// Same as:
window.MYAPP = { commands : { productsShowCommand : function () { console.log("Execute code from products#show page"); } }};
![Page 47: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/47.jpg)
Ajuda na organização dos módulos.
![Page 48: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/48.jpg)
/javascripts /myapp /commands /productsShowCommand.js
![Page 49: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/49.jpg)
Não polui o contexto global.
![Page 50: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/50.jpg)
Module pattern
![Page 51: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/51.jpg)
ns("EDEN.modules.checkoutModule", (function () {
// Stores the module's main element var element;
// Private methods // ---------------
// Prints a silly phrase var printSillyPhrase = function () { console.log("I love sushi"); console.log(this); };
return {
// Public methods // --------------
// Inits the module init : function (el) { element = $(el);
printSillyPhrase.call(this); }
};})());
![Page 52: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/52.jpg)
Isola um comportamento e disponibiliza uma API pública.
![Page 53: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/53.jpg)
É "Singleton-like".
![Page 54: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/54.jpg)
Constructors & Prototypes
![Page 55: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/55.jpg)
ns("EDEN.forms.AddressForm", function (el) { this.element = $(el); this.init();});
$.extend(EDEN.forms.AddressForm.prototype, {
// Public methods // --------------
// Inits the instance init : function () { // Do something }
});
var shippingAddressForm = new EDEN.forms.AddressForm($("#shipping-address"));
![Page 56: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/56.jpg)
Permite múltiplas instâncias e heranças por prototype.
![Page 57: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/57.jpg)
Module.js
![Page 58: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/58.jpg)
* github.com/fnando/module
![Page 59: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/59.jpg)
Define namespaces e coloca açúcar sintático na definição de funções construtoras.
![Page 60: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/60.jpg)
ns("EDEN.forms.AddressForm", function (el) { this.element = $(el); this.init();});
$.extend(EDEN.forms.AddressForm.prototype, {
// Public methods // --------------
// Inits the instance init : function () { // Do something }
});
var shippingAddressForm = new EDEN.forms.AddressForm($("#shipping-address"));
![Page 61: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/61.jpg)
Module("EDEN.forms.AddressForm", function (AddressForm) {
AddressForm.fn.initialize = function (el) { this.element = $(el);
// Do something }
});
var shippingAddressForm = Module.run("EDEN.forms.AddressForm", $("#shipping-address"));
![Page 62: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/62.jpg)
Padroniza a criação de novos módulos.
![Page 63: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/63.jpg)
EVENTOS
![Page 64: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/64.jpg)
Pub/Sub
![Page 65: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/65.jpg)
![Page 66: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/66.jpg)
PUB (server)"Quando sair o torrent do último episódio, vou avisar pra galera."
![Page 67: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/67.jpg)
SUB (cliente piratinha)"Quando o server avisar que tem um episódio, vou começar a baixar."
![Page 68: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/68.jpg)
SUB PUB
![Page 69: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/69.jpg)
Yo, me avisa quando sair o eppy de Game of
Thrones? \o/
Blz é nóish véi
![Page 70: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/70.jpg)
AE SAIU O"THE RAINS OF
CASTAMERE" PRA BAIXAR, GALERE!
Massa, vou baixar!Acho que vai ser um
episódio feliz =D
![Page 71: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/71.jpg)
// Pirate subscribes to torrent servertorrentServer.on("new-got-episode", function (name) { this.download(name);});
// Torrent server publishes that it has a new GoT episodethis.trigger("new-got-episode", "The Rains of Castamere");
![Page 72: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/72.jpg)
Mediator
![Page 73: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/73.jpg)
Interface central de comunicação entre módulos.
![Page 74: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/74.jpg)
MEDIATOR
![Page 75: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/75.jpg)
Nenhum módulo tem conhecimento do outro.
![Page 76: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/76.jpg)
MEDIATOR
Mediator, me avisa quando sair o novo do The
Walking Dead?
Blz
![Page 77: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/77.jpg)
MEDIATOR
Mediator, me avisa quando sair o novo do
Mythbusters?
É nóish.
![Page 78: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/78.jpg)
MEDIATOR
Mediator, saiu um eppy novo de The Walking
Dead.
Subscribers, saiu um eppy novo de The
Walking Dead!
Ae, vou baixar!
![Page 79: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/79.jpg)
MEDIATOR
Mediator, saiu um eppy novo de Mythbusters.
Subscribers, saiu um eppy novo de Mythbusters!
Ae, vou baixar!
![Page 80: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/80.jpg)
// Pirate 1 subscribes to mediatormediator.on("new-twd-episode", function (name) { console.log("Downloading The Walking Dead - " + name);});
// Pirate 2 subscribes to mediatormediator.on("new-mythbusters-episode", function (name) { console.log("Downloading Mythbusters - " + name);});
// Torrent server 1 publishes on mediatormediator.trigger("new-twd-episode", "The Suicide King");
// Torrent server 2 publishes on mediatormediator.trigger("new-mythbusters-episode", "Food Fables");
![Page 81: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/81.jpg)
Todos conhecem apenas o Mediator.
![Page 82: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/82.jpg)
Mixin
![Page 83: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/83.jpg)
Module("EDEN.forms.AddressForm", function (AddressForm) {
// AddressForm now has the `on`, `off` and `trigger` methods $.extend(AddressForm.fn, EDEN.events);
AddressForm.fn.initialize = function (el) { this.element = $(el); }
});
![Page 84: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/84.jpg)
MUNDO REAL
![Page 85: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/85.jpg)
![Page 86: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/86.jpg)
![Page 87: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/87.jpg)
![Page 88: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/88.jpg)
![Page 89: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/89.jpg)
![Page 90: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/90.jpg)
![Page 91: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/91.jpg)
![Page 92: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/92.jpg)
Modularizando
![Page 93: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/93.jpg)
![Page 94: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/94.jpg)
![Page 95: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/95.jpg)
![Page 96: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/96.jpg)
![Page 97: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/97.jpg)
![Page 98: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/98.jpg)
Exemplos
![Page 99: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/99.jpg)
#1Mudança no endereço de entrega muda o endereço de cobrança
![Page 100: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/100.jpg)
![Page 101: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/101.jpg)
![Page 102: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/102.jpg)
![Page 103: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/103.jpg)
// Code inside ShippingAddressForm
_attachEvents : function () { this.element.find(".main-address-input").on("keyup paste cut change", this._onAddressModification.bind(this)); },
_onAddressModification : function (event) { EDEN.mediator.trigger("shipping-address-change", event.target.value);}
![Page 104: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/104.jpg)
![Page 105: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/105.jpg)
// Code inside BillingAddressSelector
_registerInterests : function () { EDEN.mediator.on("shipping-address-change", this.updateAddressInfo, this);}
updateAddressInfo : function (address) { this.element.find(".address-info").text(address);}
![Page 106: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/106.jpg)
#2Mudança no CEP de entrega muda frete, total e parcelas
![Page 107: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/107.jpg)
![Page 108: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/108.jpg)
![Page 109: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/109.jpg)
![Page 110: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/110.jpg)
![Page 111: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/111.jpg)
![Page 112: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/112.jpg)
// Code inside ShippingAddressForm
_registerInterests : function () { this.element.find(".cep-input").on("keyup paste cut", this._onCepModification.bind(this)); },
_onCepModification : function (event) { if (this.isCepFilled()) { EDEN.mediator.trigger("shipping-cep-change", event.target.value); } else { EDEN.mediator.trigger("shipping-cep-incomplete", event.target.value); }}
![Page 113: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/113.jpg)
![Page 114: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/114.jpg)
// Code inside checkoutModule
_registerIntests : function () { EDEN.mediator.on("shipping-cep-change", this._onShippingCepChange, this); this.shippingService.on("get-success", this._onShippingGetSuccess, this);},
_onShippingCepChange : function (cep) { this.shippingService.get(cep);}
_onShippingGetSuccess : function (data) { EDEN.mediator.trigger("shipping-rate-change", data.rate); EDEN.mediator.trigger("delivery-estimate-change", data.estimate);}
![Page 115: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/115.jpg)
![Page 116: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/116.jpg)
// Code inside purchaseInfo
_registerInterests : function () { EDEN.mediator.on("shipping-rate-change", this._onShippingRateChange, this); EDEN.mediator.on("delivery-estimate-change", this._onDeliveryEstimateChange, this);},
_onShippingRateChange : function (rate) { this.updateShippingRate(rate);},
_onDeliveryEstimateChange : function (days) { this.updateDeliveryEstimate(days);},
updateShippingRate : function (rate) { var formatter = EDEN.currency.formatter;
this.element.find(".shipping-rate").text(formatter(rate)); this.shippingRate = rate;
this.updateTotal();},
updateTotal : function () { var total = this.subtotal + this.shippingRate, formatter = EDEN.currency.formatter;
this.element.find(".total").text(formatter(total));
EDEN.mediator.trigger("cart-total-change", total);}
![Page 117: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/117.jpg)
![Page 118: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/118.jpg)
// Code inside installmentSelector
_registerInterests : function () { EDEN.mediator.on("cart-total-change", this._onCartTotalChange, this);},
_onCartTotalChange : function (total) { this.updateInstallments(total);},
updateInstallments : function (total) { // Updates the values}
![Page 119: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/119.jpg)
LIVE DEMO
![Page 120: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/120.jpg)
futuro.
![Page 121: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/121.jpg)
Sempre há espaço para melhoras.
![Page 122: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/122.jpg)
Framework MV*?
![Page 123: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/123.jpg)
Framework próprio?
![Page 124: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/124.jpg)
Melhoria nas padronizações?
![Page 125: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/125.jpg)
Sistema de eventos mais robusto?
![Page 126: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/126.jpg)
É por isso que JavaScript é legal. =)
![Page 127: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/127.jpg)
![Page 128: JavaScript Modular e Event-Driven](https://reader033.fdocuments.net/reader033/viewer/2022051323/54b3b32c4a79591d438b4574/html5/thumbnails/128.jpg)
THANKSslideshare.net/eshiota
github.com/eshiota@shiota