• Like

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
2,820
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
21
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide






































Transcript

  • 1. JUST JAVASCRIPT Bazaarvoice :: 15 Nov 2010 :: Peter Higgins
  • 2. Me. Dojo Toolkit Project Lead JavaScript Engineer @joost / Adconion Blogs Infrequently :: http://higginsforpresident.net Codes @GitHub :: http://github.com/phiggins42 Twitter: @phiggins Beer Drinking Expert
  • 3. THE DOJO FOUNDATION Not a Toolkit.
  • 4. THE GOOD PARTS Not to be confused with ...
  • 5. LOVABLE, SIMPLE.
  • 6. Simple Types var num = 10, str = "str", str2 = 'str', obj = { foo: function(arg){ return arguments[0] } }, list = [1, "2", 3.0], truf = false, undef ;
  • 7. Simple Functions function bar(baz){ return baz * 2; } var foo = function(baz){ return baz * 3; } bar(2); // 4 foo(2); // 6
  • 8. Familiar Syntax nom++; nom *= 2; nom = nom + nom; // conditions if(x > y || y < z && !truhy){ /* ... */ }else if(!!that){ /* ... */ }else{ } // loops for(var i = 0; i < 10; i++){ } while(itstrue){ } // maybe never do{ }while(itstrue); // always once
  • 9. Closures, simply: (function(){ var bar = 10; function foo(baz){ return bar * baz; } })();
  • 10. The .prototype var Thing = function(a, b){ this.a = a; this.b = b; }; Thing.prototype.sum = function(){ return this.a + this.b; }; var x = new Thing(1, 2), y = new Thing(3, 4); x.sum(); // 3 y.sum(); // 7
  • 11. More .prototype if(!Array.prototype.forEach){ Array.prototype.forEach = function(cb, context){ context = context || window; for(var i = 0, l = this.length; i < l; i++){ cb.call(context, this[i], i, this); } }; } Function.prototype.bind = function(context){ var me = this; return function(){ return me.apply(context, arguments); }; };
  • 12. CONTEXT / OO
  • 13. “this” means something var obj = { count: 10, adder: function(val){ this.count += val; } } function somefunction(val){ this.count -= val; } somefunction.call(obj, 5); // obj.count == 5 somefunction.apply(obj, [5]); // obj.count == 0 // using bind: var boundfunction = somefunction.bind(obj); obj.adder(15); // obj.count == 15 boundfunction(5); // obj.count == 10
  • 14. Object Chain var obj = { foo: function(){ return this == obj; }, bar: { foo: function(){ return this == obj.bar; }, baz: { foo: function(){ return this == obj.bar.baz; } } } }; obj.foo(); obj.bar.foo(); obj.bar.baz.foo();
  • 15. Handy Object Creation dojo.provide("foo.bar.baz"); // vs. var foo = foo || {}; foo.bar = foo.bar || {}; foo.bar.baz = foo.bar.baz || {};
  • 16. MDC / es5 : Function Function.prototype.bind(context, args...) dojo.hitch, jQuery.proxy, etc. Function.prototype.curry(args...) dojo.partial
  • 17. Practical, OO, etc: dojo.declare("my.Thing", null, { cache: "", getit: function(){ dojo.xhrGet({ url: this.url, load: dojo.hitch(this, "processit") }); }, processit: function(data){ this.cache = data.toUpperCase(); } });
  • 18. “subclassing” dojo.declare("my.Thing", null, { cache: "", url:"", getit: function(){ dojo.xhrGet({ url: this.url, load: dojo.hitch(this, "processit") }); }, processit: function(data){ this.cache = data; } }); dojo.declare("my.Thinger", my.Thing, { version: "12", getit: function(){ this.url = this.url + "?v=" + this.version; this.inherited(arguments); }, processit: function(data){ this.cache = data.toUpperCase(); } });
  • 19. AOP / DUCK PUNCH
  • 20. Self Healing Language (function(){ // a version of dojo.style that warns about a missing id's var oldversion = dojo.style; dojo.style = function(node){ var n = dojo.byId(node); if(!n){ console.warn("the node with id#", node, "doesn't exist"); } oldversion.apply(dojo, arguments); } })();
  • 21. TWO CAMPS
  • 22. Native v. Library Function.prototype.times = function(n){ while(n--) this.apply(this, []); } // v. mylib.times = function(fn, n){ while(n--) fn.apply(fn, []); }
  • 23. Native, interop risk // out of spec. Will break exising/working .bind implementations Function.prototype.bind = function(context){ var me = this; return function(){ me.apply(context || window, arguments); } }
  • 24. Native, interop risk // some other lib: if(!String.prototype.trim){ String.prototype.trim = function(){ return this.replace(/ss*$/, ''); } } // my code: mylibrary.trim = String.prototype.trim ? function(str){ return str.trim(); } : function(str){ return str.replace(/^ss*/, '').replace(/ss*$/, ''); } ;
  • 25. Easy to enhance natives dojo.provide("dojotype._base.Color"); (function(d){ var c = new d.Color(), // one color instance to use for conversions setup = function(meth){ if(!this[meth]){ this[meth] = function(){ c.setColor(this); return c[meth].apply(c, arguments); }; } } ; d.forEach(["toRgb", "toRgba", "toHex"], setup, String.prototype); d.forEach(["toCss"], setup, Array.prototype); [255, 255, 255].toCss(); // "#FFF" })(dojo);
  • 26. PACKAGES, VIA DOJO
  • 27. Simple // mylib/myplugin.js dojo.provide("mylib.myplugin"); dojo.require("dojo.hash"); (function(d){ /* do something with d.hash */ })(dojo); // foo.html script: dojo.require("mylib.myplugin"); dojo.ready(function(){ /* do something knowing myplugin.js and all deps resolved */ });
  • 28. dojo.cache // simple pattern: dojo.provide("my.Thing"); dojo.require("dojo.cache"); dojo.declare("my.Thing", null, { template: dojo.cache("my.templates", "Thing.html"), constructor: function(args){ dojo.mixin(this, args); } });
  • 29. Anonymous Modules define("dojo/doit", ["dojo"], function(dojo){ dojo.doit = function(args){ dojo.mixin(this, args); } return dojo; });
  • 30. Anonymous Pattern (function(dojo){ /* dostuff */ })(dojo); (function($){ /* same stuff ... */ })(jQuery);
  • 31. EASY TO ABUSE Some things to remember.
  • 32. Cache whenever possible. // see stuff like this. a lot: $("#elem").mouseenter(function(){ $(this).addClass("over"); $(this).css("opacity", "0.5"); $(this).css("background-color", "#ededed"); var orig = this; var timer = setTimeout(function(){ $(orig).load("/tips/hovered/" + $(orig).val()); $(orig).show(); }, 500); });
  • 33. Cache whenever possible. var timer; $("#elem").mouseenter(function(){ var orig = $(this) .addClass("over") .css({ "opacity":0.5, "background-color":"#ededed" }) ; timer && clearTimeout(timer); timer = setTimeout(function(){ orig.load("/tips/hovered/" + orig.val()).show(); }, 500); });
  • 34. Be aware. var dosomething = function(name, opts){ return dojo.map(someReallyBigList, function(item){ var obj = someExpensiveFunction(name), ret = new obj(item, opts); return ret; }); }; // vs var dosomething = function(name, opts){ var obj = someExpensiveFunction(name); return dojo.map(someReallyBigList, function(item){ return new obj(item, opts); }); }
  • 35. Libraries are a crutch Learn JavaScript first Know enough to dislike parts Supplement those parts Don’t be afraid of the word `prototype` If you don’t know $.fn === $.prototype, quit (or learn)
  • 36. DOJO ALREADY DID IT. @dojodidit - Really, We probably have.
  • 37. AAAAND THANKS. #austinjs tomorrow, btw.
  • 38. Me, again: http://dante.dojotoolkit.org http://higginsforpresident.net http://twitter.com/phiggins http://github.com/phiggins42 phiggins @ irc.freenode.net