Download as KEY, PPTX
![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](https://cdn.statically.io/img/image.slidesharecdn.com/txjs-100605140630-phpapp01/75/Txjs-11-2048.jpg)
![dojo.declare("Thing", [inheritance, chain], {
myProps:"override",
aMethod:function(){
this.inherited(arguments);
}
});
new Thing();](https://cdn.statically.io/img/image.slidesharecdn.com/txjs-100605140630-phpapp01/75/Txjs-13-2048.jpg)
![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](https://cdn.statically.io/img/image.slidesharecdn.com/txjs-100605140630-phpapp01/75/Txjs-16-2048.jpg)
![// 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”])
;](https://cdn.statically.io/img/image.slidesharecdn.com/txjs-100605140630-phpapp01/75/Txjs-24-2048.jpg)
![(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);](https://cdn.statically.io/img/image.slidesharecdn.com/txjs-100605140630-phpapp01/75/Txjs-25-2048.jpg)
![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); });](https://cdn.statically.io/img/image.slidesharecdn.com/txjs-100605140630-phpapp01/75/Txjs-29-2048.jpg)
![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); });](https://cdn.statically.io/img/image.slidesharecdn.com/txjs-100605140630-phpapp01/75/Txjs-30-2048.jpg)
![(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);](https://cdn.statically.io/img/image.slidesharecdn.com/txjs-100605140630-phpapp01/75/Txjs-33-2048.jpg)
![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]); }](https://cdn.statically.io/img/image.slidesharecdn.com/txjs-100605140630-phpapp01/75/Txjs-37-2048.jpg)
![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
);](https://cdn.statically.io/img/image.slidesharecdn.com/txjs-100605140630-phpapp01/75/Txjs-39-2048.jpg)
Txjs
- 1. IT’S JUST JAVASCRIPT. Peter Higgins / @phiggins / #txjs / 2010-06-04
- 2.
- 3.
- 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.
- 9. MORE THAN JUSTTEH DOM
- 10.
- 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.
- 13. dojo.declare("Thing", [inheritance, chain],{ myProps:"override", aMethod:function(){ this.inherited(arguments); } }); new Thing();
- 14.
- 15.
- 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 isto curry ... var foo = function(direction){ if(direction){ goleft(); }else{ goright(); } } var left = foo.curry(1), right = dojo.partial(foo, 0) ; left(); right();
- 19. // as bindis 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.
- 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.
- 32. 1:1.333333 Mapping toDojo 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.
- 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 isfun 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 askquestions. or don’t.
- 43.