Organizando o JavaScript (WebDay 2013)

Organizando o JavaScript (WebDay 2013)

Palestra apresentada no WebDay 2013

Cb5d9e9095cd41b636764a85e57ade4b?s=128

Nando Vieira

July 20, 2013
Tweet

Transcript

  1. 6.
  2. 15.

    "invite_friends" : function() { var resizeLoader = function() { $("#loader").css("width",

    $(".places").width()); $("#loader").css("height", $(".places").height()-18); } resizeLoader(); var resizeTimer; $(window).bind('resize', function() { clearTimeout(resizeTimer); resizeTimer = setTimeout(resizeLoader, 50); }); $("a[href=#automatic_invite]").click(function(e){ SomeApp.utils.stopPropagation(e); if(!$(this).parents(".tab_title:first").is(".active")) { $(".tab_title:first") .toggleClass("active"); $(".tab_title:last") .toggleClass("active"); $("#automatic") .toggleClass("hidden"); $("#manual") .toggleClass("hidden"); } }); var suffixes = { "gmail": "@gmail.com", "yahoo": "", "live": "@hotmail.com", "other": ""
  3. 21.

    E é somente assim que o seu códi o poderá

    ser testado sem dificuldades.
  4. 33.

    Pense no seu códi o como uma série de blocos

    que precisam encaixar uns nos outros.
  5. 34.
  6. 35.
  7. 36.
  8. 37.
  9. 38.
  10. 39.
  11. 46.

    javascripts application.js eden AddToRe istry.js ProductInfo.js modules UserRe istries.js addToCartModule.js

    addressListModule.js boletoModule.js cartReviewModule.js cate oryInterests.js cate oryModule.js checkoutModule.js
  12. 47.

    Lembre-se que você sempre pode concatenar e minificar o seu

    códi o antes de colocar em produção.
  13. 51.

    var Todo = { tasks: [] , addTask: function(task) {}

    , removeTask : function() {} , count : function() {} };
  14. 54.

    var Todo = (function(){ var tasks = []; // private

    variable // expose the public API return { addTask: function(task) {} , removeTask: function(task) {} , count: function() {} }; })();
  15. 58.

    Module("MyApp.MyModule", function(MyModule){ MyModule.fn.initialize = function() { // this is the

    initializer }; MyModule.fn.someFunction = function() { // fn is just shortcut for // prototype alas jQuery }; });
  16. 62.

    // boot.js $(function(){ var html = $("html") , controller =

    html.data("controller") , action = html.data("action") ; MyApp.Application(controller, action); });
  17. 65.

    module Todo { var tasks = []; // private variable

    // expose the public API export default { addTask: function(task) {} , removeTask: function(task) {} , count: function() {} }; }
  18. 66.

    module Todo { var tasks = []; // private variable

    // expose the public API export default { addTask: function(task) {} , removeTask: function(task) {} , count: function() {} }; }
  19. 69.

    // load from remote sources module $ from "http://example.org/jquery.js"; //

    Module loader API Loader.load("http://example.org/jquery.js", function($){ // do what you need });
  20. 73.
  21. 75.
  22. 77.

    $(".postbox textarea") .on("focus", function(){ $(this).closest(".postbox") .addClass("did-focus") .removeClass("is-contracted") ; }) .on("keyup",

    function(){ var lines = this.value.split(/\r?\n/); var textarea = $(this); if (lines.length >= 5) { textarea.addClass("is-taller"); } else { textarea.removeClass("is-taller"); } }) .on("blur", function(){ if (!this.value) { $(this).closest(".postbox").addClass("is-contracted"); } }) ;
  23. 78.

    $(".postbox textarea") .on("focus", function(){ $(this).closest(".postbox") .addClass("did-focus") .removeClass("is-contracted") ; }) .on("keyup",

    function(){ var lines = this.value.split(/\r?\n/); var textarea = $(this); if (lines.length >= 5) { textarea.addClass("is-taller"); } else { textarea.removeClass("is-taller"); } }) .on("blur", function(){ if (!this.value) { $(this).closest(".postbox").addClass("is-contracted"); } }) ;
  24. 79.

    $(".postbox textarea") .on("focus", function(){ $(this).closest(".postbox") .addClass("did-focus") .removeClass("is-contracted") ; }) .on("keyup",

    function(){ var lines = this.value.split(/\r?\n/); var textarea = $(this); if (lines.length >= 5) { textarea.addClass("is-taller"); } else { textarea.removeClass("is-taller"); } }) .on("blur", function(){ if (!this.value) { $(this).closest(".postbox").addClass("is-contracted"); } }) ;
  25. 80.

    $(".postbox textarea") .on("focus", function(){ $(this).closest(".postbox") .addClass("did-focus") .removeClass("is-contracted") ; }) .on("keyup",

    function(){ var lines = this.value.split(/\r?\n/); var textarea = $(this); if (lines.length >= 5) { textarea.addClass("is-taller"); } else { textarea.removeClass("is-taller"); } }) .on("blur", function(){ if (!this.value) { $(this).closest(".postbox").addClass("is-contracted"); } }) ;
  26. 82.
  27. 83.

    Module("HOWTO.Postbox", function(Postbox){ Postbox.fn.initialize = function(container) { // the initialization code

    this.addEventListeners(); }; Postbox.fn.addEventListeners = function() { this.textarea .on("focus", this.onTextareaFocus.bind(this)) .on("keyup", this.onTextareaKeyUp.bind(this)) .on("blur", this.onTextareaBlur.bind(this)) ; }; });
  28. 84.

    Module("HOWTO.Postbox", function(Postbox){ Postbox.fn.initialize = function(container) {}; Postbox.fn.addEventListeners = function() {};

    Postbox.fn.onTextareaFocus = function(event) { this.container .addClass("did-focus") .removeClass("is-contracted") ; }; });
  29. 85.

    Module("HOWTO.Postbox", function(Postbox){ Postbox.fn.initialize = function(container) {}; Postbox.fn.addEventListeners = function() {};

    Postbox.fn.onTextareaFocus = function(event) {}; var LINES = 5; Postbox.fn.onTextareaKeyUp = function(event) { var lines = event.target.value.split(/\r?\n/); if (lines.length >= LINES) { this.textarea.addClass("is-taller"); } else { this.textarea.removeClass("is-taller"); } }; });
  30. 86.

    Module("HOWTO.Postbox", function(Postbox){ Postbox.fn.initialize = function(container) {}; Postbox.fn.addEventListeners = function() {};

    Postbox.fn.onTextareaFocus = function(event) {}; Postbox.fn.onTextareaKeyUp = function(event) {}; Postbox.fn.onTextareaBlur = function(event) { if (!event.target.value) { this.container.addClass("is-contract"); } }; });
  31. 88.

    describe("HOWTO.Postbox", function() { var container, postbox, textarea; beforeEach(function() { container

    = $("<div/>") .append("<textarea class='pb-input'/>") .append("<button class='pb-button' value='Reply'/>") .appendTo("#sample") ; textarea = container.find("textarea"); postbox = HOWTO.Postbox(container); }); it("sets class when focusing box", function() { textarea.trigger("focus"); expect(container.is(".did-focus")).toBeTruthy(); }); // other specs });
  32. 94.
  33. 95.