Ajaxian » Closure http://ajaxian.com Cleaning up the web with Ajax Tue, 22 May 2012 21:45:06 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Closure Lite http://ajaxian.com/archives/closure-lite http://ajaxian.com/archives/closure-lite#comments Thu, 24 Dec 2009 11:39:52 +0000 Dion Almaer http://ajaxian.com/?p=8346 Read the rest...]]> 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 :)

]]> http://ajaxian.com/archives/closure-lite/feed 5 Javascript Inheritance Patterns: Learning from Closure http://ajaxian.com/archives/javascript-inheritance-patterns-learning-from-closure http://ajaxian.com/archives/javascript-inheritance-patterns-learning-from-closure#comments Fri, 13 Nov 2009 22:04:01 +0000 Michael Mahemoff http://ajaxian.com/?p=7928 Read the rest...]]> 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.  
]]> http://ajaxian.com/archives/javascript-inheritance-patterns-learning-from-closure/feed 2 Closure Graphics Fun http://ajaxian.com/archives/closure-graphics-fun http://ajaxian.com/archives/closure-graphics-fun#comments Tue, 10 Nov 2009 11:45:34 +0000 Dion Almaer http://ajaxian.com/?p=7899 Read the rest...]]> 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.  
]]> http://ajaxian.com/archives/closure-graphics-fun/feed 5