Require.js By Example

example.amd.js

/**                                                                                                   
 * Example Asynchronous Module Definition (AMD)                                                       
 *                                                                                                    
 *                                                                                                    
 */
define(['jquery', 'console'], function($, console) {
    "use strict";
    var my_private_var = 'This value is private';

    function my_private_method() {
        console.log("This was logged from inside the private method");
    }
    /**                                                                                               
     * Actual module begins here.                                                                     
     */
    var MyModule = {
        config: {
            foo: 'FOO',
            bar: 'BAR'
        },
        init: function(config) {
            var self = this;
            config = config || {};
            self.config = $.extend(self.config, config);
        },
        sayHello: function(name) {
            name = name || 'Unknown';
            console.log("Hello, " + String(name));
            return name;
        }
    };
    return MyModule;
});

/**                                                                                                   
 * Example of use in another module                                                                   
 */
define(['example'], function(ex) {
    var name = $('input[name="user_firstname"]').val();
    ex.sayHello(name);
});

/**                                                                                                   
 * In a template                                                                                      
 * I think this should be kept to a minimum. Instead of doing this                                    
 * for every widget, configure the ProductInfo (or other page) to                                     
 * initialize your widget.                                                                            
 */
require(['example', 'widgets/Whatever', function(ex, we) {
    we.init();

    ex.init({
        foo: we.getFoo(),
        bar: we.getBar()
    });
});

hack.amd.js

/**
 * This isn't an optimal solution, but something I've run into.
 * Suppose there's a function called `foo_bar()` that's called in the `onclick`
 * attribute of lots of elements. 
 * Objective: Move the definition of `foo_bar()` into Foo.bar(), but not
 * break everything.
 */

// Foo.js
define(function() {
    // Option 1: Just copy it into Foo's namespace
    function foo_bar() {
        console.info("Called original foo_bar function");
    }
    var Foo = {
        bar: function() {
            console.info("Called Foo.bar()");
        },
        old_bar: function() {
            return foo_bar();
        },
        oldBar: foo_bar // Or this, I guess.
    };
    return Foo;
});

// In the HTML file where foo_bar is called
var foo_bar; // Declare 'foo_bar' here.
require(['Foo'], function(foo) {
    foo.bar();
    foo.old_bar();
    
    foo_bar = foo.old_bar; // Assign it here
});
foo_bar(); // 'foo.old_bar' has been exported to this scope and works normally.

jquery.amd.js

/**
 * A minimal example of exporting a jQuery plugin to Require.js
 * Given a non-AMD jQuery plugin whose source consists of:
 *     $.widget("ui.whatever", { ... });
 */
(function( factory ) {
    if (typeof define === 'function' && define.amd) {
        define([
            'jquery' // And/or whatever other dependencies your plugin has.
        ], factory);
    } else {
        factory( jQuery );
    }
}(function( $ ) {
    /**
     * This 'return' statement makes the difference as to whether
     * the plugin is returned, or just bound to the $ variable.
     * So far, I don't see a reason NOT to return the plugin;
     * Requiring a module without a corresponding `function()` parameter
     * is confusing, I think.
     */
    return $.widget("ui.whatever", { ... });
});