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(十六)：模塊  這個系列的文章寫得真的不錯