前端模塊化的實現

模塊化這個概念隨着javascript的使用變得越來越重要，他使得代碼開發變得更加清晰，維護更加方便。

例如：你可以把一個頁面的彈窗看做一個模塊，而這個模塊的實現方法如下：

///pop.js
(function (document) {
    var obj = {
        show: function() {
            console.log("打開彈窗");
        },
        hide: function() {
            console.log("關閉彈窗");
        },
        removePop: function() {
            console.log("銷燬彈窗");
        }
    }
    window.pop= obj; //創建一個pop全局變量，並將obj的值賦給pop,這樣使用pop的函數就需要pop.function(),避免了變量的重複。
})(document);

如上所示，將關於彈窗的相關操作函數封裝在一個閉包當中，將整個閉包看做一個模塊，使用的時候就可以這樣使用：

<script type="text/javascript" src="pop.js"></script>
<script type="text/javascript">
    pop.show(); //打開彈窗
</script>

這樣的方法可以很好的避免變量的重複，只需要每個模塊的命名不同就可以。