Txjs

P
Peter HigginsFreelance Developer at Joost
IT’S JUST JAVASCRIPT.
   Peter Higgins / @phiggins / #txjs / 2010-06-04
ME.
DOJO.
http://dojotoolkit.org
yay Dojo.


A Library.

5+ years testing, revision, support.

Backwards compatible APIs (to a painful degree)
IN THE END ...
  It’s just a LOT of JavaScript.
IN THE END ...
 It’s just a LOT of modular JavaScript.
IN THE END ...
 It’s just a LOT of optional JavaScript.
JAVASCRIPT IS MAGIC.
MORE THAN JUST TEH DOM
pub/sub, ftw.



ambiguous coupling

cometd
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
OO / CLASSY
dojo.declare("Thing", [inheritance, chain], {

     myProps:"override",

     aMethod:function(){

     
   this.inherited(arguments);

     }
});


new Thing();
`THIS` IS MAGIC.
.CALL / .APPLY
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
curry, bind, hitch, partial, etc



Scope/context manipulation via apply/call. Simple wrapper.

promotes code re-use / DRY
// 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();
// as bind is to hitch
var o = {

    handler:function(response){ ... },

    send:function(){

    
      dojo.xhrPost({

    
      
    url:"/the/url",

    
      
    handle: dojo.hitch(this, "method")

    
      })

    }
};
o.send();
ALSO FOR JQUERY ...
  http://higginsforpresident.net/js/static/jq.hitch.js
DUCK PUNCH
   aka: AOP
(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);
(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);
// 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”])
  ;
(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);
dojo(function(){ /* onload */});

dojo("#someId").style({ color:”red” }).onclick(fn);

dojo.style("someId", { color:”red” });

dojo.fn.myRadPlugin = function(){
  return this.forEach(...);
}
Ubiquitous Unicorn.
NATIVE PROTOTYPES
      for fun and profit.
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); });
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); });
DOJOTYPE!
http://code.google.com/p/dojotype
1:1.333333 Mapping to Dojo
Base Dojo

dojo.date

dojo.string

dojo.Color
(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);
LAME MODERN BROWSERS
        “win”.blink()
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.
new Date()


i18n

formatting

comparison

addition
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]); }
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);

   
     }

   });
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

   );
JUST JAVASCRIPT.
       Still.
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.
THANKS!
clap. or ask questions. or don’t.
@PHIGGINS
 http://higginsforpresident.net
1 of 43

Recommended

node ffi by
node ffinode ffi
node ffi偉格 高
3K views152 slides
Functional programming using underscorejs by
Functional programming using underscorejsFunctional programming using underscorejs
Functional programming using underscorejs偉格 高
1.3K views88 slides
this by
thisthis
this偉格 高
1.2K views64 slides
Javascript essential-pattern by
Javascript essential-patternJavascript essential-pattern
Javascript essential-pattern偉格 高
1.8K views66 slides
JavaScript ES6 by
JavaScript ES6JavaScript ES6
JavaScript ES6Leo Hernandez
1.4K views23 slides
Inheritance compiler support by
Inheritance compiler supportInheritance compiler support
Inheritance compiler supportSyed Zaid Irshad
74 views24 slides

More Related Content

What's hot

Groovy by
GroovyGroovy
GroovyPascal Nsue Engonga
484 views27 slides
05 pig user defined functions (udfs) by
05 pig user defined functions (udfs)05 pig user defined functions (udfs)
05 pig user defined functions (udfs)Subhas Kumar Ghosh
1.4K views15 slides
Don't do this by
Don't do thisDon't do this
Don't do thisRichard Jones
86.7K views82 slides
Naughty And Nice Bash Features by
Naughty And Nice Bash FeaturesNaughty And Nice Bash Features
Naughty And Nice Bash FeaturesNati Cohen
1.1K views45 slides
Geeks Anonymes - Le langage Go by
Geeks Anonymes - Le langage GoGeeks Anonymes - Le langage Go
Geeks Anonymes - Le langage GoGeeks Anonymes
237 views42 slides
ReUse Your (Puppet) Modules! by
ReUse Your (Puppet) Modules!ReUse Your (Puppet) Modules!
ReUse Your (Puppet) Modules!Alessandro Franceschi
992 views45 slides

What's hot(20)

Naughty And Nice Bash Features by Nati Cohen
Naughty And Nice Bash FeaturesNaughty And Nice Bash Features
Naughty And Nice Bash Features
Nati Cohen1.1K views
Geeks Anonymes - Le langage Go by Geeks Anonymes
Geeks Anonymes - Le langage GoGeeks Anonymes - Le langage Go
Geeks Anonymes - Le langage Go
Geeks Anonymes237 views
Python utan-stodhjul-motorsag by niklal
Python utan-stodhjul-motorsagPython utan-stodhjul-motorsag
Python utan-stodhjul-motorsag
niklal527 views
Happy Go Programming by Lin Yo-An
Happy Go ProgrammingHappy Go Programming
Happy Go Programming
Lin Yo-An5.6K views
Vim Script Programming by Lin Yo-An
Vim Script ProgrammingVim Script Programming
Vim Script Programming
Lin Yo-An5.6K views
AST Rewriting Using recast and esprima by Stephen Vance
AST Rewriting Using recast and esprimaAST Rewriting Using recast and esprima
AST Rewriting Using recast and esprima
Stephen Vance1.5K views
NativeBoost by ESUG
NativeBoostNativeBoost
NativeBoost
ESUG1.8K views
Kotlin For Android - Functions (part 3 of 7) by Gesh Markov
Kotlin For Android - Functions (part 3 of 7)Kotlin For Android - Functions (part 3 of 7)
Kotlin For Android - Functions (part 3 of 7)
Gesh Markov140 views
Apache PIG - User Defined Functions by Christoph Bauer
Apache PIG - User Defined FunctionsApache PIG - User Defined Functions
Apache PIG - User Defined Functions
Christoph Bauer12.7K views
Swiftの関数型っぽい部分 by bob_is_strange
Swiftの関数型っぽい部分Swiftの関数型っぽい部分
Swiftの関数型っぽい部分
bob_is_strange1.3K views
When RegEx is not enough by Nati Cohen
When RegEx is not enoughWhen RegEx is not enough
When RegEx is not enough
Nati Cohen378 views
Something about Golang by Anton Arhipov
Something about GolangSomething about Golang
Something about Golang
Anton Arhipov1.5K views
An Intro To ES6 by FITC
An Intro To ES6An Intro To ES6
An Intro To ES6
FITC1.6K views

Viewers also liked

Photography by
PhotographyPhotography
Photographysdstewart0411
361 views11 slides
Yui conf nov8-2010-introtoyql by
Yui conf nov8-2010-introtoyqlYui conf nov8-2010-introtoyql
Yui conf nov8-2010-introtoyqlmirekgrymuza
1K views37 slides
Contributing to YUI by
Contributing to YUIContributing to YUI
Contributing to YUIDav Glass
12.7K views161 slides
Photography by
PhotographyPhotography
Photographysdstewart0411
412 views11 slides
My bestiessss by
My bestiessssMy bestiessss
My bestiessssJoanna Lautner
495 views21 slides
YUI 3: Below the Surface by
YUI 3: Below the SurfaceYUI 3: Below the Surface
YUI 3: Below the SurfaceLuke Smith
2.4K views138 slides

Viewers also liked(8)

Similar to Txjs

dojo.Patterns by
dojo.Patternsdojo.Patterns
dojo.PatternsPeter Higgins
5.4K views65 slides
Making JavaScript Libraries More Approachable by
Making JavaScript Libraries More ApproachableMaking JavaScript Libraries More Approachable
Making JavaScript Libraries More ApproachablePamela Fox
5.1K views30 slides
ES6: The Awesome Parts by
ES6: The Awesome PartsES6: The Awesome Parts
ES6: The Awesome PartsDomenic Denicola
59.8K views41 slides
Trimming The Cruft by
Trimming The CruftTrimming The Cruft
Trimming The CruftPeter Higgins
653 views49 slides
The Beauty Of Java Script V5a by
The Beauty Of Java Script V5aThe Beauty Of Java Script V5a
The Beauty Of Java Script V5arajivmordani
899 views77 slides
2007 09 10 Fzi Training Groovy Grails V Ws by
2007 09 10 Fzi Training Groovy Grails V Ws2007 09 10 Fzi Training Groovy Grails V Ws
2007 09 10 Fzi Training Groovy Grails V Wsloffenauer
1.3K views58 slides

Similar to Txjs(20)

Making JavaScript Libraries More Approachable by Pamela Fox
Making JavaScript Libraries More ApproachableMaking JavaScript Libraries More Approachable
Making JavaScript Libraries More Approachable
Pamela Fox5.1K views
The Beauty Of Java Script V5a by rajivmordani
The Beauty Of Java Script V5aThe Beauty Of Java Script V5a
The Beauty Of Java Script V5a
rajivmordani899 views
2007 09 10 Fzi Training Groovy Grails V Ws by loffenauer
2007 09 10 Fzi Training Groovy Grails V Ws2007 09 10 Fzi Training Groovy Grails V Ws
2007 09 10 Fzi Training Groovy Grails V Ws
loffenauer1.3K views
jQuery: out with the old, in with the new by Remy Sharp
jQuery: out with the old, in with the newjQuery: out with the old, in with the new
jQuery: out with the old, in with the new
Remy Sharp1.3K views
Groovy by Zen Urban
GroovyGroovy
Groovy
Zen Urban1.1K views
Jsphp 110312161301-phpapp02 by Seri Moth
Jsphp 110312161301-phpapp02Jsphp 110312161301-phpapp02
Jsphp 110312161301-phpapp02
Seri Moth514 views
Exploring ES6 by Ximing Dai
Exploring ES6Exploring ES6
Exploring ES6
Ximing Dai300 views
Security Challenges in Node.js by Websecurify
Security Challenges in Node.jsSecurity Challenges in Node.js
Security Challenges in Node.js
Websecurify3.3K views
JavaScript - Like a Box of Chocolates by Robert Nyman
JavaScript - Like a Box of ChocolatesJavaScript - Like a Box of Chocolates
JavaScript - Like a Box of Chocolates
Robert Nyman8.1K views
JavaScript Growing Up by David Padbury
JavaScript Growing UpJavaScript Growing Up
JavaScript Growing Up
David Padbury14.1K views
Javascript & Ajax Basics by Richard Paul
Javascript & Ajax BasicsJavascript & Ajax Basics
Javascript & Ajax Basics
Richard Paul1.4K views

More from Peter Higgins

Jsconf.us.2013 by
Jsconf.us.2013Jsconf.us.2013
Jsconf.us.2013Peter Higgins
892 views56 slides
has("builds") by
has("builds")has("builds")
has("builds")Peter Higgins
609 views18 slides
has.js by
has.jshas.js
has.jsPeter Higgins
1.5K views21 slides
Just JavaScript by
Just JavaScriptJust JavaScript
Just JavaScriptPeter Higgins
670 views38 slides
Your Library Sucks, and why you should use it. by
Your Library Sucks, and why you should use it.Your Library Sucks, and why you should use it.
Your Library Sucks, and why you should use it.Peter Higgins
3.3K views38 slides
dojo.things() by
dojo.things()dojo.things()
dojo.things()Peter Higgins
1.8K views55 slides

More from Peter Higgins(7)

Recently uploaded

SAP Automation Using Bar Code and FIORI.pdf by
SAP Automation Using Bar Code and FIORI.pdfSAP Automation Using Bar Code and FIORI.pdf
SAP Automation Using Bar Code and FIORI.pdfVirendra Rai, PMP
23 views38 slides
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N... by
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...James Anderson
85 views32 slides
Zero to Automated in Under a Year by
Zero to Automated in Under a YearZero to Automated in Under a Year
Zero to Automated in Under a YearNetwork Automation Forum
15 views23 slides
Voice Logger - Telephony Integration Solution at Aegis by
Voice Logger - Telephony Integration Solution at AegisVoice Logger - Telephony Integration Solution at Aegis
Voice Logger - Telephony Integration Solution at AegisNirmal Sharma
39 views1 slide
PRODUCT LISTING.pptx by
PRODUCT LISTING.pptxPRODUCT LISTING.pptx
PRODUCT LISTING.pptxangelicacueva6
14 views1 slide

Recently uploaded(20)

SAP Automation Using Bar Code and FIORI.pdf by Virendra Rai, PMP
SAP Automation Using Bar Code and FIORI.pdfSAP Automation Using Bar Code and FIORI.pdf
SAP Automation Using Bar Code and FIORI.pdf
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N... by James Anderson
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
GDG Cloud Southlake 28 Brad Taylor and Shawn Augenstein Old Problems in the N...
James Anderson85 views
Voice Logger - Telephony Integration Solution at Aegis by Nirmal Sharma
Voice Logger - Telephony Integration Solution at AegisVoice Logger - Telephony Integration Solution at Aegis
Voice Logger - Telephony Integration Solution at Aegis
Nirmal Sharma39 views
AMAZON PRODUCT RESEARCH.pdf by JerikkLaureta
AMAZON PRODUCT RESEARCH.pdfAMAZON PRODUCT RESEARCH.pdf
AMAZON PRODUCT RESEARCH.pdf
JerikkLaureta26 views
Attacking IoT Devices from a Web Perspective - Linux Day by Simone Onofri
Attacking IoT Devices from a Web Perspective - Linux Day Attacking IoT Devices from a Web Perspective - Linux Day
Attacking IoT Devices from a Web Perspective - Linux Day
Simone Onofri16 views
Transcript: The Details of Description Techniques tips and tangents on altern... by BookNet Canada
Transcript: The Details of Description Techniques tips and tangents on altern...Transcript: The Details of Description Techniques tips and tangents on altern...
Transcript: The Details of Description Techniques tips and tangents on altern...
BookNet Canada136 views
STPI OctaNE CoE Brochure.pdf by madhurjyapb
STPI OctaNE CoE Brochure.pdfSTPI OctaNE CoE Brochure.pdf
STPI OctaNE CoE Brochure.pdf
madhurjyapb14 views
Data Integrity for Banking and Financial Services by Precisely
Data Integrity for Banking and Financial ServicesData Integrity for Banking and Financial Services
Data Integrity for Banking and Financial Services
Precisely21 views
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ... by Jasper Oosterveld
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
ESPC 2023 - Protect and Govern your Sensitive Data with Microsoft Purview in ...
Business Analyst Series 2023 - Week 3 Session 5 by DianaGray10
Business Analyst Series 2023 -  Week 3 Session 5Business Analyst Series 2023 -  Week 3 Session 5
Business Analyst Series 2023 - Week 3 Session 5
DianaGray10248 views
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive by Network Automation Forum
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLiveAutomating a World-Class Technology Conference; Behind the Scenes of CiscoLive
Automating a World-Class Technology Conference; Behind the Scenes of CiscoLive

Txjs

  • 1. IT’S JUST JAVASCRIPT. Peter Higgins / @phiggins / #txjs / 2010-06-04
  • 2. ME.
  • 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.
  • 9. MORE THAN JUST TEH DOM
  • 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
  • 13. dojo.declare("Thing", [inheritance, chain], { myProps:"override", aMethod:function(){ this.inherited(arguments); } }); new Thing();
  • 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(...); }
  • 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); });
  • 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.
  • 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 );
  • 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.

Editor's Notes