js 模塊化的一些理解和es6模塊化學習

　　模塊化

　　　　1 IIFE

　　　　2 commonjs

        　3 瀏覽器中js的模塊化　

 　　　 4 簡單理解模塊加載器的原理

　　　  5 es6

　　以前在參加百度前端技術學院作的小題目的時候，本身寫模塊的時候 都是寫成當即調用表達式（IIFE）的模式，好比單個功能的時候當時想到是不會涉及到全局變量的污染，在封裝基礎的模塊(好比裏面的表單驗證功能) 

        (function(win){
            var obj = {};
            function add() {
                console.log("add");
            }
            obj.add = add;
            win.obj = obj;

        }(window));
        obj.add();

是在當即調用表達中咱們想要的功能 綁定在一個對象上 最後綁定到window上 這樣的模式在寫功能很少的時候，的確是不錯的 可是隨着你的功能愈來愈多，就會出現必定的問題

1)window上是否是掛載太多的對象

2)模塊內部是否存在相同的變量的名字掛載window上   好比兩個模塊內部都掛載 window.obj  那麼後來加載執行的必定是會覆蓋以前的模塊的

3)依賴的解決問題 必定在作好依賴的維護  也就是本模塊需求的模塊必須在以前被加載和執行 想一想在頁面中好多js的樣子

4)在擴展上也並非很友好 每次都須要將新的功能擴展到內部的對象或者window上 存在變量的污染問題 跟2)有點類似

上面的只是個人一些淺顯的理解 對這種IIFE模式實現模塊化的一點理解

　　commonjs commonjs是JavaScript模塊化的一種規範 它爲JavaScript實現模塊化定義了一種規範 引用官網上的一句話 JavaScript:not just for browsers any more!

簡單理解就是經過commonjs,JavaScript能作的事情更多了

如何寫一個最簡單的commonjs模塊

/*模塊引用部分  引用其餘的模塊
*/

/*模塊定義部分  
*/
function add(a,b) {
    return a+b;
}
function multiple(a,b) {
    return a*b;
}
/* 模塊導出部分 導出模塊的功能
*/  
module.exports.add = add;
module.exports.multiple = multiple; 

commonjs 規範定義實現一個模塊分爲模塊引用 模塊定義 模塊標識(require()時候使用的標識)  這個是官網上一個簡單的例子 這個是例子

　　瀏覽器中的js模塊化 上面的這種方式在node中是徹底沒有問題的  可是在瀏覽器中首先出現的問題就是require module.exports 這些關鍵字在瀏覽器中不支持 也就是咱們須要模塊加載器幫咱們實現require幫咱們去加載commonjs模塊   還有一個點就是瀏覽器中的環境不一樣於服務端  require是同步的  它會等待模塊的下載和執行完畢以後在運行下面的代碼  服務器端是從本地的磁盤讀取對應的模塊 這樣的加載速度是能夠接受的 可是在瀏覽器中 就涉及到從服務端加載對應的js 這樣就會形成頁面的鎖死  這時候就出現了require.js 和sea.js 

　　簡單理解模塊加載器的原理  首先經過將加載過的對象進行緩存  在進行多個依賴加載的時候，記錄加載的數目 ，每加載一個模塊 在回調中減小數目 當全部的依賴加載完畢後執行外層的回調    參考 理解requirejs-實現一個簡答的模塊加載器

     es6  es6中推出了模塊系統  能夠參考這篇文章去學習es6的模塊化  深刻淺出ES6(十六)：模塊  這個系列的文章寫得真的不錯