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

這樣解決了複用的問題，可是全局污染的問題依舊存在。只能經過人爲來避免了。