Your SlideShare is downloading. ×
0
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Txjs
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Txjs

5,269

Published on

My "It's just JavaScript" explanation

My "It's just JavaScript" explanation

Published in: Technology
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
5,269
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
41
Comments
0
Likes
8
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. IT’S JUST JAVASCRIPT. Peter Higgins / @phiggins / #txjs / 2010-06-04
    • 2. ME.
    • 3. DOJO. http://dojotoolkit.org
    • 4. yay Dojo. A Library. 5+ years testing, revision, support. Backwards compatible APIs (to a painful degree)
    • 5. IN THE END ... It’s just a LOT of JavaScript.
    • 6. IN THE END ... It’s just a LOT of modular JavaScript.
    • 7. IN THE END ... It’s just a LOT of optional JavaScript.
    • 8. JAVASCRIPT IS MAGIC.
    • 9. MORE THAN JUST TEH DOM
    • 10. pub/sub, ftw. ambiguous coupling cometd
    • 11. dojo.subscribe("/hello/world", function(){ console.warn(arguments); }); dojo.publish("/hello/world", ["foo", "bar"]); Also availabile for jQuery: http://higginsforpresident.net/js/static/jq.pubsub.js
    • 12. OO / CLASSY
    • 13. dojo.declare("Thing", [inheritance, chain], { myProps:"override", aMethod:function(){ this.inherited(arguments); } }); new Thing();
    • 14. `THIS` IS MAGIC.
    • 15. .CALL / .APPLY
    • 16. var obj = { b:2 } var obj2 = { b:1, foo: function(num){ this.b += num; return this.b; } } obj2.foo(1); // 2 obj2.foo.call(obj, 3); // 5 obj2.foo.apply(obj, [3]); // 5
    • 17. curry, bind, hitch, partial, etc Scope/context manipulation via apply/call. Simple wrapper. promotes code re-use / DRY
    • 18. // partial is to curry ... var foo = function(direction){ if(direction){ goleft(); }else{ goright(); } } var left = foo.curry(1), right = dojo.partial(foo, 0) ; left(); right();
    • 19. // as bind is to hitch var o = { handler:function(response){ ... }, send:function(){ dojo.xhrPost({ url:"/the/url", handle: dojo.hitch(this, "method") }) } }; o.send();
    • 20. ALSO FOR JQUERY ... http://higginsforpresident.net/js/static/jq.hitch.js
    • 21. DUCK PUNCH aka: AOP
    • 22. (function(d){ var oldonload = d.addOnLoad; d.addOnLoad = d.ready = function(fn){ oldonload.call(d, d.partial(fn, d)); } // now you can use `dojo` as whatever first // arg to dojo.ready callback is: // // dojo.ready(function(d){ // d.require("foo.bar.Baz"); // }); })(dojo);
    • 23. (function(d){ var rqr = d.require; d.require = function(module){ if(d.isArray(module)){ d.forEach(module, rqr, d); }else{ rqr.apply(d, arguments); } return d; // mmm chaining. } })(dojo);
    • 24. // old api: dojo.require(“foo.Bar”); // new ducked apis: dojo.require([“foo.Bar”, “bar.Baz”]); dojo.require(“bam.Foo”).require(“omg.Really”) .require([“oh.Right”, “doit.ThisWayToo”]) ;
    • 25. (function(d){ // replace the old dojo with a function var d = dojo; dojo = function(a){ if(d.isFunction(a)){ d.ready(a); return dojo; }else{ return d.query.apply(d, arguments); } } // this is just to bother alex: dojo.fn = d.NodeList.prototype; // mix dojo back into itself. for(var i in d){ dojo[i] = d[i]; } })(dojo);
    • 26. dojo(function(){ /* onload */}); dojo("#someId").style({ color:”red” }).onclick(fn); dojo.style("someId", { color:”red” }); dojo.fn.myRadPlugin = function(){ return this.forEach(...); }
    • 27. Ubiquitous Unicorn.
    • 28. NATIVE PROTOTYPES for fun and profit.
    • 29. if(!Array.prototype.forEach){ Array.prototype.forEach = function(cb, thisObj){ thisObj = thisObj || window; for(var i = 0, l = this.length; i < l; i++){ cb.call(thisObj, ar[i], i, ar); } } } [1,2,3].forEach(function(num){ alert(num); });
    • 30. if(!Array.prototype.forEach){ Array.prototype.forEach = function(cb){ for(var i = 0, l = this.length; i < l; i++){ cb.call(ar[i], i, ar); } } } [1,2,3].forEach(function(){ alert(this); });
    • 31. DOJOTYPE! http://code.google.com/p/dojotype
    • 32. 1:1.333333 Mapping to Dojo Base Dojo dojo.date dojo.string dojo.Color
    • 33. (function(d){ var c = new d.Color(), 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(); // returns #000000 // “#000000”.toRgb(); // returns [255,255,255] })(dojo);
    • 34. LAME MODERN BROWSERS “win”.blink()
    • 35. es3ex-String! http://code.google.com/p/dojotype/source/browse/trunk/es3ex-String.js .anchor(), .link(), .fontsize, .fontcolor node.innerHTML = “click here”.link(“http://google.com”); blink(), sup(), small(), et al.
    • 36. new Date() i18n formatting comparison addition
    • 37. var dd = d.date, dp = Date.prototype, map = { "daysInMonth": [dd, "daysInMonth"], "isLeapYear": [dd, "isLeapYear"], "timezone": [dd, "getTimezoneName"], "compare": [dd, "compare"], "add": [dd, "add"], "difference": [dd, "difference"], "format": [dd.locale, "format"], "isWeekend": [dd.locale, "isWeekend"] } ; // setup all the above direct mappings var setup = function(pn, fn){ if(!dp[pn]){ var fullfn = fn[0][fn[1]]; dp[pn] = function(){ return fullfn.apply(fn[0], d._prep(this, arguments)); }; } }; for(var i in map){ setup(i, map[i]); }
    • 38. d._clobber(Date.prototype, { json: function(){ // summary: Serializes a Date object as an ISO String. Helps // when serializing a JSON string from an object containing // Date objects. return d.date.stamp.toISOString(this, { selector: 'date' }); } }); d._clobber(String.prototype, { toDate: function(options){ // summary: Convert this string into a Date object, provided it is formatted properly. return dojo.date.locale.parse(this, options); } });
    • 39. var maff = Math, np = Number.prototype; d.forEach( [ // a list of straight-up-shit-that-could-be-on-Number // that would just call Math.something(this) "abs", "acos", "asin", "atan", "atan2", "ceil", "cos", "exp", "floor", "log", "max", "min", "pow", /* "random", "round", */ "sin", "sqrt", "tan" ], function(meth){ // setup the function in place if it doesn't exist // for some reason if(!this[meth] && maff[meth]){ this[meth] = function(param){ // if we have at least one extra param, take the whole thing: return maff[meth].apply(maff, param ? d._prep(this, arguments) : [this]); }; } }, np // context );
    • 40. JUST JAVASCRIPT. Still.
    • 41. Take Away: JavaScript is fun and flexible. The DOM is the culprit. and evil. Because you can do something, doesn’t mean you should. Don’t let that stop you. Embrace the language as a whole.
    • 42. THANKS! clap. or ask questions. or don’t.
    • 43. @PHIGGINS http://higginsforpresident.net

    ×