解析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();

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