Use arrow keys to navigate and Ctrl/Cmd -/+ to adjust text and positioning

• Consequences
• An Example
• Unit Testing
• Types of Modules
  • Objects
  • jQuery Plugins
  • jQuery UI Widgets
• Identifying Module Boundaries

Consequences

• Better support for an immersive UI
• Support for team-oriented development
• Explicit control over application initialization
• The ability to externally configure modules
• Decoupled module interactions
• Easier troubleshooting and debugging
• Easier code base maintenance
• Easier to [unit] test

First step: Choose a library for DOM manipulation (jQuery)

A Delicious Example

Unit Testing

Assertions in QUnit:

• ok
• equal
• notEqual
• deepEqual
• notDeepEqual
• strictEqual
• notStrictEqual
• raises

 
            var ok = function ok(value, msg, results) {
                var result = value ? 'pass' : 'fail';
                $('<div class="test-result">').text(msg)
                    .addClass(result)
                    .appendTo(results);
            };
        

 
            ok(true, 'ok');
            ok('100' == 100, 'equal');
            ok('100' === 100, 'not equal');
        

Object Modules

• Creating Objects
• Defining Functions
• Understanding Context
• Immediate Functions
  • Private members
• When to use objects as modules

Object Modules

Creating Objects

            // While using the 'new'
            // keyword is possible
            var obj = new Object(); 
            
            // The object literal 
            // syntax is preferred
            var obj = {},
                t = typeof obj;
            ok(t == 'object', ':-)');
        

        // Defining properties 
        // and methods is easy
        var obj = {
            id: 44,
            innerObj: {
                prop: 'content',
                run: function(arg) {
                    return 'done';
                }
            }, // beware of the commas
            ary: [12, 
                'more', 
                {'even-more': 'items'}]
        };
    

Object Modules

Defining Functions

        // Function expression (anonymous) - preferred
        var func1 = function(args) { return 'result'; };

        // Function expression (named) - needed during recursion
        var func2 = function func2(args) { };

        // Function statement (named & hoisted) - can safely avoid
        function func3(args) { }

        // And can be passed into and out of functions
        var func4 = function(arg) { return arg; };
        var result = func4( func1 )();

    

Object Modules

Understanding Context

• Use this for the current context
• Scope is functional - not block
• Functions can be called using any context
  • Useful for things like pub/sub and events

    // Differ only in how parameters are passed
    // function.call(objContext, arg1, arg2)
    // function.apply(objContext, argArray)
    var obj = { p: 'foo' },
        func = function() { return this.p || 'default'; },
        result = func.call(obj);
    ok(result == 'foo', 'context changed');
    

Object Modules

Closures

    var count = 0,
        setupLinkHandler = function(link) {
            link.addEventListener('click', function(e) {
                this.text('Clicked ' + count + ' times');
                e.preventDefault();
            });
        };
    

So variables can live beyond their scope

Object Modules

Immediate Functions

• Pass in only global object
• Executes after parsed
• Private members are
  defined within the
  immediate function

        (function(app, $, undefined) {
            var priv1 = 'foo',
                priv2 = 'bar',
                calc = function() { 
                    return 'baz'; 
                };

            app.myObj = {
                prop: priv1 + calc(),
                memb: function() {
                    // impl
                }
            };
        }(this.app = this.app || {}, jQuery));
    

Object Modules

When to use objects as modules

• When the object isn't operating on DOM nodes
• When JavaScript provides enough functionality

Let's have a closer look at the QuickStart

jQuery Plugin Modules

• Selectors
• The Wrapped Set
• Declaring Plugins
• Merging Options
• When to use Plugins

jQuery Plugin Modules

Selectors

• Modelled after CSS selectors
• Passed to the jQuery method

    $('selector')
    'element'
    '#id'
    '.class'
    '.class1.class2'  // and
    '.class1, class2' // or
    'element decendent-element'
    '#id > child-element'
    'element[attribute]'
    'element[attribute="value"]'
    

    // And some useful extras
    'element[attribute^="val"]' 
    'element[attribute$="lue"]' 
    ':button'
    ':checked'
    ':even'
    ':nth-child(n)'

    // To increase performance
    $('selector', context)...
    wrapper.find('selector')...
    

jQuery Plugin Modules

The Wrapped Set

• A special collection of elements
• Can treat like an array

        var wrappedElems = $('
'),
            wrappedElem = wrappedElems.first(),
            nakedElem = wrappedElems[0];
        ok(wrappedElem.css, 'wrapped');
        ok(nakedElem.css, 'wrapped');
        

jQuery Plugin Modules

Declaring Plugins

    (function ($, undefined) {
        var timer;
        $.fn.tagger = function () {
            return this.each(function () {
                var $this = $(this);
                $this
                .addClass('qs-tagged')
                .bind('mouseenter', function (evnt) {
                })
                .bind('mouseleave', function () {
                });
            });
        };
    } (jQuery));
    

jQuery Plugin Modules

Options

    (function ($, undefined) {
        $.fn.infobox = function(options){
            this.options = { 
                maxItems: 10,
                dataUrl: 'http://feeds.delicious.com/v2/json/popular/'
            };
            $.extend(this.options, options);
        };
    } (jQuery));
    

jQuery Plugin Modules

When to use Plugins

• When changing multiple elements at once
• When a function doesn't fit on another object

Let's have a closer look at the QuickStart

jQuery UI Widget Modules

• How they work
• Public & Private methods
• Lifetime Management
• Options
• Events
• When to use

jQuery UI Widget Modules

How they work

• You supply an object prototype

          (function ($, undefined) {
            $.widget('qs.infobox'), {
              displayTagLinks: function(){}
            });
          }(jQuery));
          

• Apply the widget to elements

          $('body').infobox();
          

• It will apply it to each element the widget is attached to

          $.widget = function(name, base, prototype) {
              $.widget.bridge( name, $[ namespace ][ name ] );
          };
          $.widget.bridge = function( name, object ) {
              $.fn[ name ] = function( options ) {
                  $.data( this, name, new object( options, this ) );
              };
          };
          

jQuery UI Widget Modules

Public & Private methods

• Public methods are invoked through the widget function

          $('body').infobox('displayTagLinks', args);
          

• Private methods are prepended with an underscore

          $.widget('qs.tagger'), {
              _create: function() {
                  this.element.addClass('qs-tagged');
              }
              displayTagLinks: function() { ... }
          });
          

  • This is only a convention - it can be circumvented

jQuery UI Widget Modules

Lifetime Management

• _create
  • Called when the widget is first applied
  • Typically used for adding classes, creating elements,
    applying other widgets, storing references
• _init
  • Called each time the widget method is called on an element
  • Invoked after _create
  • Can be used as a reset
  • Using this isn't very common
• destroy
  • Removes a widget from an element
  • To be called by users of the widget
  • Cleans up all namespaced events

          $.widget('qs.infobox'), {
            destroy: function() {
              // if using jQuery UI 1.8.x
              $.Widget.prototype.destroy.call(this);
              // if using jQuery UI 1.9.x
              //this._destroy();
            }
          });
          

jQuery UI Widget Modules

Options

• Merged with defaults automatically
• Represent the widget's extensibility mechanism
• Allow you to control coupling with other code

    $.widget('qs.infobox', {
        options: {
            dataUrl: '',
            maxItems: 10
        }
    });
    

    $('body').infobox({
        dataUrl: 'http://feeds.delicious.com/v2/json/popular/'
    });
    

jQuery UI Widget Modules

Events

• Expose as an option (doesn't really expose it)

        $.widget('qs.tagger', {
            options: { activated: $.noop() }
        });
        

• Attach handler through options

        $('span[data-tag]').tagger({
            activated: function (event, data) {
                infobox.infobox('displayTagLinks', event, data.name);
            }
        });
        

• Fire event using _trigger

            that._trigger('activated', event, {name: tag});
        

jQuery UI Widget Modules

When to use widgets as modules

• When the module needs an explicit interface
• When you need more control over lifetime
• When the module is storing state

Let's have a closer look at the QuickStart

Identifying Module Boundaries

• Layout
• Animations
• Data Refreshes

Summary

• Benefits of modularity
• JavaScript Objects
• jQuery Plug-ins
• jQuery UI Widgets

Questions?

Contact Info

• dons@microsoft.com
• http://blogs.msdn.com/donsmith
• @locksmithdon

• http://msdn.com/practices
• @mspnp

This presentation is online @