Skip to content

Instantly share code, notes, and snippets.

@lsmith
Created December 23, 2009 01:02
Show Gist options
  • Save lsmith/262229 to your computer and use it in GitHub Desktop.
Save lsmith/262229 to your computer and use it in GitHub Desktop.
// 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment