I'm working on an application in the browser and I would like to make sure that my code does not conflict with code from other libraries or with possible calls added by browser manufacturers in the future. In my environment I would avoid collisions by using a unique application name and placing all my classes and code in my domain like so:  package {    import com.mydomain.controls.*; // my domain    public class MyApplication {        var button:Button = new com.mydomain.Button();        button.text = Hello World;        addChild(button);    }}Or when I'm using a declarative language I would define my namespace URI and prefix like so:  <s:Application xmlns:s=http://www.default.com xmlns:abc=www.mydomain.com>   <abc:Button text=Hello world /></s:Application>But how would you do that in the browser when you're pulling in code from different libraries? Where do I define global objects and how do I make them unique? Do I do something like: window[com.mydomain.controls.MyApplication];I've seen libraries do something like: GalleryWidget = function() {       var version = 1.2.3;      var getGallery = function() { //do stuff };}But what if there is another GalleryWidget some where? Sorry if this is a beginner question. AddendumMaybe if I paste some code it will clear things up. Is there any problems with the following:window.VideoPlayer = {}; // write my class, etcwindow.myVideoPlayer = new VideoPlayer();window.submitForm = function() {}; //etcwindow.parse = function() {}JSON.parseXML = function(zml) {};document.write = function() {};UPDATE 2:I found a web page that is using Yahoo Global Objects: var $D  =  YAHOO.util.Dom;var $E  =  YAHOO.util.Event;var $A  =  YAHOO.util.Anim;var $M  =  YAHOO.util.Motion;var $EA =  YAHOO.util.Easing;var $DD =  YAHOO.util.DD;var $C  =  YAHOO.util.Connect;var $   =  $D.get;YAHOO.namespace (Smb.Asteroids.Logger);YAHOO.Smb.Asteroids.Logger = {    Log : function(e) {        if (typeof console !== 'undefined') {            console.log(e);        }    }}var $LOG = YAHOO.Smb.Asteroids.Logger.Log;    YAHOO.namespace('Smb.Asteroids');var YSA = YAHOO.Smb.Asteroids;YSA.Nav = {    isNavNorth : false,    init : function() {        // For the first visit, subscribe to the layout(template) change event        // When user changes template from the ribbon, we need to re-init this JS, based on the new templates settings.         if (YSA.Nav.isFirstVisit) {            YSA.Nav.isFirstVisit = false;            if (YSA.UiMgr) {                YSA.UiMgr.Layout.onChange.eventObj.subscribe(                    function() { YSA.Nav.init() });            }        } else {            YSA.Nav.clearSubNavStyles();        }        YSA.Nav.initNavSettings();        var navDiv = $('navigation');        if (! $D.hasClass(navDiv, 'sub_dynamic')) {            return;        }        YSA.Nav.initNavSettings();        var triggers = $D.getElementsByClassName('trigger', '', navDiv);        $E.on(triggers, 'mouseover', this.mouseOverTrigger);        $E.on(triggers, 'mouseout', this.mouseOutTrigger);        var toggles = $D.getElementsByClassName('toggle', 'a', navDiv);        $E.on(toggles, 'click', this.toggleClicked);        var triggers = $D.getElementsByClassName('mainNav', '', navDiv);        $E.on(triggers, 'mouseover', this.mouseOverMainNav);    }};$E.on(window, 'load', YSA.Nav.init, YSA.Nav, true); I've truncated a lot of the code. It is based on Yahoo YUI framework here but it looks like the page is down. Way back machine should show it. Anyway, it answers some questions I had. But I noticed that this is based on framework 2. They have framework 3 that seems to get rid of namespaces. So that leaves more questions. 
How to create a safe namespace for my application in JavaScript
object oriented;javascript;object oriented design;browser;browser compatibility