js_class_to_yui3_module_steps_1_thru_7.js

// Step 1. global definition
function Map(config) {
    this._init(config);
}

Map.prototype = {
    _container: null,

    _init: function (config) {
        this._container = document.getElementById(config.container);
        this._initEvents();
    },

    _initEvents: function () {
        var self = this;
        this._container.onclick = function (e) {
            self.addMarker(e.pageX, e.pageY);
        };
    },

    addMarker: function (x, y) { ... }
};

var map = new Map({ container: 'map-container' });
map.addMarker( 50, 120 );



// Step 2. Moving to a global namespace
YAHOO.widget.Map = function (config) { ... };
YAHOO.widget.Map.prototype = { ... };

var map = new YAHOO.widget.Map({ container: 'map-container' });
map.addMarker( 50, 120 );



// Step 3. Move instantiation out of global scope
(function () {
    var map = new YAHOO.widget.Map(..);
    map.addMarker( 50, 120 );
})();

-- OR
YAHOO.util.Event.onDOMReady(function () {
    // just as long as var map is done inside a function
    var map = new YAHOO.widget.Map(..);
    ...
});



// Step 4. YUI 2 + YUI 3
YUI().use('node', function (Y) {
    var map = new YAHOO.widget.map({ .. });
    ...
});



// Step 5. YUI 3, create module API in the use() callback
YUI().use('node', function (Y) {

    function Map(config) {
        this._init(config);
    }

    Map.prototype = {
        _container: null,

        _init: function (config) {
            this._container = Y.one(config.container);
            this._initEvents();
        },

        _initEvents: function () {
            var self = this;
            this._container.on('click', function (e) {
                this.addMarker(e.pageX, e.pageY);
            }, this);
        },

        addMarker: function (x, y) { ... }
    };

    var map = new Map({ container: '#map-container' });
    map.addMarker( 50, 120 );

});




// Step 6. Migrate API to the Y instance
YUI().use('node', function (Y) {

    Y.Map = function (config) {
        this._init(config);
    };

    Y.Map.prototype = {
        ...
    };

    var map = new Y.Map(...);
    map.addMarker( 50, 120 );
});



// Step 7. Extract the API into a module
YUI.add('map', function (Y) {

    Y.Map = function (config) {
        this._init(config);
    };

    Y.Map.prototype = {
        ...
    };
}, '0.0.1', { requires: ['node'] });

// note 'node' is not necessary in the module list passed to use(..)
YUI().use('map', function (Y) {

    var map = new Y.Map(..);
    map.addMarker( 50, 120 );
});



// Step 8. extract code from the page to a separate js file
(map.js)
YUI.add('map', function (Y) {

    Y.Map = function (config) {
        this._init(config);
    };

    Y.Map.prototype = {
        ...
    };
}, '0.0.1', { requires: ['node'] });

(somepage.html)
<script src="yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
<script src="map.js"></script>
<script>
YUI().use('map', function (Y) { ... });
</script>



// Step 9. remove the script from the page and let YUI load it for you
(somepage.html)
<script src="yui.yahooapis.com/3.0.0/build/yui/yui-min.js"></script>
<script>
YUI({
    modules: {
        map: {
            fullpath: 'map.js',
            requires: ['node']
        }
    }
}).use('map', function (Y) { ... });
</script>



// Step 10. Add the module to the Gallery (http://yuilibrary.com/gallery)
// and request a push to CDN, then just use() the module
<script src="yui.yahooapis.com/3.1.1/build/yui/yui-min.js"></script>
<script>
YUI().use('gallery-map', function (Y) {

  var map = new Y.Map(...);

});
</script>