1、模塊化中的模塊是指Javascript 模塊，比如一個用來格式化時間的模塊。比如在node.js中的http 模塊、fs模塊等，並且可以自己建立模塊，模塊化大致有兩種類型“：

源自nodejs的規範CommonJs

CommonJs最開始示威服務端所寫的，所以不是異步加載，舉一個簡單的例子，假如有一個math模塊

var math = require(‘math‘);
　　math.add(2,3); // 5

很明顯由於js是單線程，並且是依次加載執行的，在math沒有加載完成的時候，就會卡在這塊出現假死現象，那為什麽服務端可以這麽寫？服務端所有模塊都是放在本地硬盤，加載速度非常快。

AMD，異步加載所需的模塊，然後在回調函數中執行主邏輯。這正是我們在瀏覽器端開發所習慣了的方式，其作者親自實現了符合AMD規範的requirejs，AMD/RequireJs迅速被廣大開發者所接受。

（1）實現js文件的異步加載，避免網頁失去響應；

（2）管理模塊之間的依賴性，便於代碼的編寫和維護。

在RequireJs中同樣采用的是require來加載模塊，不同的是它具有了回調，實現了異步加載，

require([module], callback);

第一個參數數組是需要加載的模塊，後面是它們的回調。

也是上面的例子，在RequireJs中的寫法如下圖

require([‘math‘], function (math) {
　　　　math.add(2, 3);
　　});

這就避免了假死現象的發生，那麽具體怎麽用呢

首先我們下載RequireJs，在網頁底部引入RequireJs

<script src="js/require.js" defer async="true" ></script>

加入defer、 async都是為了讓其異步加載。

然後就是加載我們自己的代碼

<script src="js/require.js" data-main="js/main"></script>

其中data-main="js/main"就是加載main.js，因為是存在於script標簽中所以我們簡寫為main,main.js就是我們主模塊，是整個模塊加載的一個窗口。

在main.js中我們可以這樣寫，假定我們加載了jquery、zepto、backbone這三個模塊

　require([‘jquery‘, ‘zepto‘, ‘backbone‘], function ($,zepto, Backbone){ 　　　

　// some code here 　　
});

這樣寫明顯沒有路徑，這是因為默認和main.js是在同一級的，如果不在同一級我們可以這樣寫

　　require.config({
　　　　paths: {
　　　　　　"jquery": "js2/jquery.min",
　　　　　　"zepto": "lib/zepto.min", 　　　　　　
　　　　　　"backbone": "js2/backbone.min" 　　　
　　　　　} 　　
});

這個配置放在main.js的最上面，前面的query這些是可以自定義的，就相當於他們的名字。加載device時候直接加載就可以了。如果所需要的模塊都在同一個文件中，我們可以設置baseUrl。如下

　　require.config({
       baseUrl: "js/lib",
　　　　paths: {
　　　　　　"jquery": "jquery.min",
　　　　　　"zepto": "zepto.min", 　　　　　　
　　　　　　"backbone": "backbone.min" 　　　
　　　　　} 　　
});                

接下來就是如何編寫模塊——基於AMD規範的模塊，模塊必須采用特定的define()函數來定義。如果一個模塊不依賴其他模塊，那麽可以直接定義在define()函數之中

define(function () {
    var add=function (x,y) {
        return x+y;
    }
    return{
        add:add
    }
})

如果定義的模塊依賴於其他模塊我們要在其中引入。

define([‘jquery‘],function ($) {
    var add=function () {
        return $.test();
    }
    return{
        add:add
    }
})

這樣在加載該模塊的時候就會先加載jquery。

2、組件，組件則包含了 template、style 和 script，而它的 Script 可以由各種模塊組成。比如一個顯示時間的組件會調用上面的那個格式化時間的模塊。比較常見的比如公共的頭部，這就是一個組件，我們在使用的時候直接引用就可以了，webpack中vue頁面就是組件。

下面是知乎上的一個介紹

組件化和模塊化的價值都在於分治，web應用系統的復雜度不斷提升，兼顧開發效率和產品實際運行效率，會在開發階段運用組件化和模塊化的手段分離關註點，結合構建工具合理打包。組件化更多關註的是UI部分，你看到的一個管理界面的彈出框，頭部，內容區，確認按鈕和頁腳都可以是個組件，這些組件可以組成一個彈出框組件，跟其他組件組合又是一個新的組件。模塊化側重於功能或者數據的封裝，一組相關的組件可以定義成一個模塊，一個暴露了通用驗證方法的對象可以定義成一個模塊，一個全局的json配置文件也可以定義成一個模塊。封裝隔離來後，更重要的是解決模塊間的依賴關系。babel作為現在最火的es6轉換器，用babelify或者webpack的babel loader再或者基於task的構建系統插件都可以很方便用起來es6 modules

模塊與組件