• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Javascript in a fishbowl
 

Javascript in a fishbowl

on

  • 3,111 views

 

Statistics

Views

Total Views
3,111
Views on SlideShare
3,094
Embed Views
17

Actions

Likes
10
Downloads
0
Comments
0

4 Embeds 17

http://www.google.com 8
http://www.onlydoo.com 5
http://www.pulse.me 3
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Javascript in a fishbowl Javascript in a fishbowl Presentation Transcript

    • JSĒINĒŃĒFISHBOWLHOWĒTOĒFEEDĒYOURĒFISHESĒWITHOUTĒPOLLUTINGĒTHEĒWŃTER© 2013Matteo Carella
    • “Everything starts with bad water...”
    • BEFOREvar sizeWidth = $(#sizeHeader).outerWidth();var sizeWidthNoPadding = $(#sizeHeader).width();var sizeTextWidth = $(.sizeText).width();$(ul#sizesUl, ul#sizesUl li).width(sizeWidth);$(#sizeHeader).width(sizeWidthNoPadding);$(.sizeText, ul#sizesUl li span).width(sizeTextWidth);$(ul#sizesUl li span).on(click, function(){var sizeText = $(this).html();$(.sizeText).html(sizeText);});
    • OMGÂ
    • ŃFTERvar$sizeHeader = $(#sizeHeader),$sizeText = $(.sizeText),$sizesUl = $(#sizesUl),$sizesUlLi = $sizesUl.find(li),$sizesUlLiSpan = $sizesUlLi.find(span),sizeHeaderWidth = $sizeHeader.width(),sizeHeaderOuterWidth = $sizeHeader.outerWidth(),sizeTextWidth = $sizeText.width();$sizeHeader.width(sizeHeaderWidth);$sizesUl.add($sizesUlLi).width(sizeHeaderOuterWidth);$sizeText.add($sizesUlLiSpan).width(sizeTextWidth);$sizeHeader.on(click,function(){$sizesUl.slideToggle();});$sizesUlLiSpan.on(click, function(){$sizeText.html($(this).html());$sizesUlLi.removeClass(hidden);$(this).parent().addClass(hidden);});
    • Dont be a fish. Be a shark.
    • // VAR CACHINGfirst = $(#first);second = $(#second);// USE A CODING CONVENTION (HUNGARIAN NOTATION)var $first = $(#first);var $second = $(#second),var value = $first.val();
    • // SINGLE VAR PATTERN (putting at the end unassigned vars)var$first = $(#first),$second = $(#second),value = $first.val(),k = 3,cookiestring = IMUSTUSEPROMOTIONEQUALSTRUEBECAUSETHEYWONTFIXAPI,i,j,myArray = {};
    • // DONT USE DEPRECATED METHODS$first.on(click,function(){$first.css(border,1px solid red);$first.css(color,blue);});// CONDENS JAVASCRIPT$first.on(click,function(){$first.css({border:1px solid red,color:blue});});
    • // USE CHAINING$second.html(value);$second.on(click,function(){alert(hello everybody);}).fadeIn(slow).animate({height:120px},500);// KEEP THE CODE READABLE$second.html(value);$second.on(click,function(){ alert(hello everybody);}).fadeIn(slow).animate({height:120px},500);
    • SHORTCIRCUITING// badfunction initVar($myVar) {if(!$myVar) {$myVar = $(#selector);}}// betterfunction initVar($myVar) {$myVar = $myVar || $(#selector);}
    • SHORTCUTS// badif(collection.length > 0){..}// betterif(collection.length){..}
    • DETŃCHĒELEMENTSĒWHENĒDOINGĒMŃNIPULŃTIONS// badvar$container = $("#container"),$containerLi = $("#container li"),$element = null;$element = $containerLi.first();// ... do a lot of complicated things// bettervar$container = $("#container"),$containerLi = $container.find("li"),$element = null;$element = $containerLi.first().detach();// ... do a lot of complicated things$container.append($element);
    • DŃTŃĒŃTTRIBUTES// bad$(#id).data(key,value);// better (faster)$.data(#id,key,value);
    • BEĒSMŃRT// badvar$sizesUl = $(#sizesUl),$sizesUlLi = $(#sizesUl li),$sizesUlLiSpan = $(#sizesUl li span);// better (faster)var$sizesUl = $(#sizesUl),$sizesUlLi = $sizesUl.find(li),$sizesUlLiSpan = $sizesUlLi.find(span);
    • Lets talk now about global pollution.
    • GOLDENĒRULESDont introduce global variables.Dont introduce global functions (unless necessary).Make sure your code doesnt break the outside code.
    • Global vars.Global functions.Global pollution.WTF global means?
    • MEŃNSĒTHISfunction original() {console.log(original);}function fake() {original = function() { console.log(fake); }}$(document).ready(function(){original(); // logs originalfake(); // overrides originaloriginal(); // logs fake});
    • FIRSTĀJSSECONDĀJSfunction hello() {console.log("first");}$(document).ready(function(){hello();});function hello() {console.log("second");}$(document).ready(function(){hello();});
    • OURĒWEBPŃGE> second, second> first, first<script src="js/lib.jquery.js"></script><script src="js/first.js"></script><script src="js/second.js"></script><script src="js/lib.jquery.js"></script><script src="js/second.js"></script><script src="js/first.js"></script>
    • WHŃTBSĒTHEĒDIFFERENCEĒBETWEENÅfish = "nemo";var fish = "nemo";
    • EXŃMPLEĀJSvar fish = "nemo"; // global$(document).ready(function(){console.log("I am rrready.");});$(document).ready(function(){console.log("I am rrready.");var fish = "nemo"; // local});
    • Everything is attached to the global object. In the case ofthe web browser, that is the window object. In JavaScript,functions and variables are attributes of the globalobject, which we typically refer to as properties.
    • FIRSTĀJSSECONDĀJSvar hello = function() {console.log("first");}$(document).ready(function(){hello();});var hello = function() {console.log("second");}$(document).ready(function(){hello();});
    • OURĒWEBPŃGE> second, second> first, first<script src="js/lib.jquery.js"></script><script src="js/first.js"></script><script src="js/second.js"></script><script src="js/lib.jquery.js"></script><script src="js/second.js"></script><script src="js/first.js"></script>
    • SŃMEĒOUTPUTĒŃSĒBEFOREHOLY FISH!
    • FIRSTĀJSSECONDĀJS$(document).ready(function(){var hello = function() { console.log("first"); }hello();});$(document).ready(function(){var hello = function() { console.log("second"); }hello();});
    • OURĒWEBPŃGE> first, second> second, first<script src="js/lib.jquery.js"></script><script src="js/first.js"></script><script src="js/second.js"></script><script src="js/lib.jquery.js"></script><script src="js/second.js"></script><script src="js/first.js"></script>
    • ŃŃŃŃHĀFinally.
    • One useful technique to ensure that your variables andfunctions are self contained is to use an IIFE.
    • // IIFE: immediately invoked func expression(function(){// still mantain access to globals//private membersreturn{//public members}})();
    • (function(){// vars declarationvar doStuff = function(args) {// some code}return{doThings: function(arga,argb,argc) {..},otherFunction: function(args) {var output = doStuff(args);// other code}}})();
    • It keeps code to a minimum.It provides a closure which prevents naming conflicts.It’s good for encapsulation.It’s good for garbage collection.
    • So...What about this?
    • FIRSTĀJS(function(){var init = function(){console.log(first);};if (typeof $M === undefined) {$M = {};}$M.module = init;})();$(document).ready(function(){$M.module();});
    • SECONDĀJS(function(){var init = function(){console.log(second);};if (typeof $M === undefined) {$M = {};}$M.module = init;})();$(document).ready(function(){$M.module();});
    • OURĒWEBPŃGE> second, second> first, first<script src="js/lib.jquery.js"></script><script src="js/first.js"></script><script src="js/second.js"></script><script src="js/lib.jquery.js"></script><script src="js/second.js"></script><script src="js/first.js"></script>
    • OMGÂÂĒSTILLĒYOUÂÅYes, same namespace.
    • ŃĒQUICKĒRECŃP
    • // GLOBALSfunction doThings() { console.log("do things"); }var things = "things";$(document).ready(function(){// LOCALSfunction doStuff() { console.log("do stuff"); }var stuff = "stuff";});
    • So, again...What about this?
    • (function () {things = "things";function doThings() { console.log("do things"); }})();$(document).ready(function(){console.log("loaded");});
    • PLEŃSEAlways put var before any declaration.
    • HOISTINGundefined != not defined
    • $(document).ready(function () {console.log($el); // undefined (declared but unassigned)console.log($some) // reference error (not defined)if(Navigation.SUBSECTION == "index"){var $el = $(#element);}if (Navigation.SUBSECTION == "orders") {var $node = $(#node);}});
    • $(document).ready(function () {var $el, $node; // declarationif(Navigation.SUBSECTION == "index"){$el = $(#element); // assignment}if (Navigation.SUBSECTION == "orders") {$node = $(#node); // assignment}});
    • Functions are affected by hoisting too.But that is another story...
    • Questions?Ask Google :)
    • THŃNKĒYOUĀPlease, dont be an . Ask me before reusing these slides.Matteo Carella © 2013ass