解析JS模块化

一开始本身一我的写代码，实现一个点击隐藏和显示事件

function a(){
    document.getElementById('xxx').click = function(){
    }
}
a();

突然某天一位项目加多了开发，他突然写了一个函数:

function a(){
    alert('error');
}

问题发生了:
1.悲剧就发生了你写的函数就say Goodbye了，你老板就找到你了,由于你的函数被覆盖了，无模块化时候全局内容很容易被污染
2.一样，你同事也找到了你，由于他发现依赖于你事件失效了，一样，无模块化时候，代码执行顺序混乱会致使代码失效

这时候要改进总体代码了，因而你的函数代码就写成:

(function(window,undefined){
    document.getElementById('xxx').click = function(){}
})(window,undefined);

这时候你又多了一位同事，你发现：
你们都写了同一句代码:

document.getElementById('xxx').click = function(){}

这样匿名函数自执行，能够避免全局污染，可是带来一个问题，代码复用和代码冗余

因而你又改进了代码:

(function(window,undefined){
   var $ = function(){
   }
   $.prototype={
       a:function(){
           document.getElementById('xxx').click = function(){}
       }
   }
   window.$ = new $();

})(window,undefined);

$.a();

这样解决了复用的问题，可是全局污染的问题依旧存在。只能经过人为来避免了。