Activate your free membership today | Log-in

Thursday, December 24th, 2009

Closure Lite

Category: Closure, Google

Michael Bolin formerly of Google has created Closure Lite as a way to let developers get their feet wet in the Closure library without having to go into the compiler and the like (but they should do that eventually!).

Closure Lite itself consists of the following subset of APIs:

It is build via the closure compiler itself, building from a set of goog.require() calls :)

Posted by Dion Almaer at 6:39 am
8 Comments

++---
2 rating from 42 votes

Friday, November 13th, 2009

Javascript Inheritance Patterns: Learning from Closure

Category: Closure, JavaScript

The library portion of Google's Closure not only gives us a new API to work with, but also adds another piece of mature code to the public domain, where it can be studied and scrutinized. Something we might normally have done with View Source if not for the compression techniques in effect.

A new article by Michael Bolin looks at inheritance patterns in Javascript, with a special focus on Closure. He does a thorough job of weighing up Closure's use of the pseudoclassical inheritance pattern against what Doug Crockford labels the functional pattern.

Pseudoclassical inheritance (Closure):

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. /**
  3. * @param {string} phoneNumber
  4. * @param {string=} signature
  5. * @constructor
  6. * @extends {Phone}
  7. */
  8. SmartPhone = function(phoneNumber, signature) {
  9.   Phone.call(this, phoneNumber);
  10.  
  11.   /**
  12.    * @type {string}
  13.    * @private
  14.    */
  15.   this.signature_ = signature || 'sent from ' + this.getPhoneNumber();
  16. };
  17. goog.inherits(SmartPhone, Phone);
  18.  
  19. /**
  20. * @param {string} emailAddress
  21. * @param {string} message
  22. */
  23. SmartPhone.prototype.sendEmail = function(emailAddress, message) {
  24.   // Assume sendMessage() is globally available.
  25.   sendMessage(emailAddress, message + '\n' + this.signature_);
  26. };
  27.  
  28. /** @override */
  29. SmartPhone.prototype.getDescription() = function() {
  30.   return SmartPhone.superClass_.getDescription.call(this) +
  31.       ' It can also send email messages.';
  32. };
  33.  
  34. var smartPhone = new SmartPhone('5555555', 'Adios'};
  35.  

Functional inheritance:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. var smartPhone = function(spec) {
  3.   var that = phone(spec);
  4.   spec.signature = spec.signature || "sent from " + that.getPhoneNumber();
  5.  
  6.   that.sendEmail = function(emailAddress, message) {
  7.     // Assume sendMessage() is globally available.
  8.     sendMessage(emailAddress, message + "\n" + spec.signature);
  9.   };
  10.  
  11.   var super_getDescription = that.superior("getDescription");
  12.   that.getDescription = function() {
  13.     return super_getDescription() + " It can also send email messages.";
  14.   };
  15.  
  16.   return that;
  17. };
  18.  
  19. var mySmartPhone = smartPhone({"phoneNumber": "5555555", "signature": "Adios"};
  20.  

Posted by Michael Mahemoff at 5:04 pm
2 Comments

++---
2.1 rating from 31 votes

Tuesday, November 10th, 2009

Closure Graphics Fun

Category: Closure

Stephen Thomas has been experimenting with Closure and the graphics libraries:

This does something similiar to what I do on Stark, my visual mud project [github page] that uses the Processing JS library and the HTML 5 <canvas> element, but instead of creating a draw function that is executed x amounts per seconds, you just call a draw function and assign it to a variable for future interactions. Here is the source code for this example (you can also just look at the current page's source):

PLAIN TEXT
JAVASCRIPT:
  1.  
  2.     var graphics = goog.graphics.createGraphics(200, 150);
  3.  
  4.     // define the colors for the squares and the dot
  5.     var square_fill = new goog.graphics.SolidFill('yellow');
  6.     var square_stroke = new goog.graphics.Stroke(2, 'green');
  7.     var dot_fill = new goog.graphics.SolidFill('blue');
  8.     var dot_stroke = new goog.graphics.Stroke(1, 'black');
  9.  
  10.     // the dot's initial position
  11.     var dot = {x: 1, y: 1};
  12.  
  13.     // properties   
  14.     var size = 40;
  15.     var margin = 5;
  16.     var width = size - margin;
  17.     var num_rows = 3;
  18.     var num_cols = 4;
  19.  
  20.     // draw the squares
  21.     for (var x = 0; x <num_cols; x++) {
  22.         for (var y = 0; y <num_rows; y++) {
  23.             graphics.drawRect(margin + x * size, margin + y * size, width, width, square_stroke, square_fill);
  24.         }
  25.     }
  26.  
  27.     // draw the dot
  28.     dot['graphic'] = graphics.drawEllipse(margin + dot['x'] * size + width / 2, margin + dot['y'] * size + width / 2, width / 4, width / 4, dot_stroke, dot_fill);
  29.    
  30.     // call if the dot's position changes
  31.     redraw_dot = function() {
  32.         dot['graphic'].setCenter(margin + dot['x'] * size + width / 2, margin + dot['y'] * size + width / 2);
  33.     }
  34.    
  35.     // key event handler
  36.     var key_handler = new goog.events.KeyHandler(document);
  37.     var key_event = function (e) {
  38.         if (e.keyCode == goog.events.KeyCodes.UP && dot['y']> 0) {
  39.             dot['y'] -= 1;
  40.         } else if (e.keyCode == goog.events.KeyCodes.RIGHT && dot['x'] <= num_cols - 2) {
  41.             dot['x'] += 1;
  42.         } else if (e.keyCode == goog.events.KeyCodes.DOWN && dot['y'] <= num_rows - 2) {
  43.             dot['y'] += 1;
  44.         } else if (e.keyCode == goog.events.KeyCodes.LEFT && dot['x']> 0) {
  45.             dot['x'] -= 1;
  46.         }
  47.         redraw_dot();
  48.     }
  49.    
  50.     // put everything together
  51.     goog.events.listen(key_handler, 'key', key_event);
  52.     graphics.render(document.getElementById('shapes'));
  53.  

Posted by Dion Almaer at 6:45 am
6 Comments

+----
1.4 rating from 66 votes