JavaScript模塊化思想

（1）我之前寫的JS代碼重用性很低

（2）功能分散，舉個栗子，我要獲取當前日期，也要獲取當前日期加1也就是明天的日期，之前我作為兩個獨立互不相干的函數去寫，但現在想想，其實他們都可以歸為一個日期對象的兩個方法，把它們綁定在一個對象上，作為它的兩個方法，不是更好么？

1. 首先，我們需要明白為什么要用模塊化？

功能都是為了解決需求的。模塊化可以帶來的優點有以下幾點：

（1）可維護性。舉個例子，如果我們把未使用模塊化的代碼比作油和水混合在了一起，模塊化之后的代碼就好像油和水的分層，油就是油，水就是水，這樣的代碼層次清晰，功能分明。似乎用油和水必然分層的現象來指代JS模塊化的大勢所趨也很合適。

（2）命名空間。這里需要談到JS的作用域。又涉及到了作用域鏈。如果對作用域鏈不熟悉的同學可以移步我的另一篇文章“理解JavaScript中的作用域鏈”。JS中是靠函數來區分作用域的。每個函數都有一個作用域鏈。如果我們把所有的代碼都揉到一起，代碼行數少還行，多了就難免會造成“命名空間污染”。

（3）可復用性。當我們明白了命名空間，借助命名空間我們就可以實現對模塊代碼的封裝，這樣我們就可以在任何我們需要這個功能的時候直接去引用這個功能模塊。

接下來，用我的JS代碼之路演示一下如何使代碼模塊化：

（1）原始時代：把所有的要用到的JS代碼都堆砌在該頁面的一對

這樣寫的缺點：代碼基本沒有什么復用性可以，應該還會存在和頁面隅合度太高的問題。還需要去考慮各種作用域的問題。

（2）古時代：思路就是把模塊寫成一個對象。比如我們要寫一個能控制頁面音樂播放，停止，下一首，上一首的功能。就可以封裝一個musicPlayer對象

// 將基本的方法封裝起來
 var musicPlayer = {

 var musicDom = null, //播放器對象
 var musicList = [], //存放歌曲列表

 // 初始化音樂播放器
 var init = function(){
 
 },

 // 添加一首歌曲
 var add = function(src){
 
 },

 // 根據數組下標決定播放哪一首，索引index從0開始
 var play = function(index){
 
 },

 // 暫停播放
 var stop = function(){
 
 },

 // 下一首
 var next = function(){

 },

 // 上一首
 var prev = function(){

 }
 };

這時候，就已經可以稱之為一個模塊了，在全局作用域中，我們只向window對象上綁定了一個musicPlayer對象，之后我們就可以使用musicPlayer加'.'的形式來調用里面的方法。如“musicPlayer.init();”

這種方式也有一個缺點，就是我們不能去控制我們想暴露的內容，并且在外部可以改寫musicPlayer對象的內部方法和變量。

（3）現代。包含IIFE（立即執行函數），放大模式，寬放大模式，輸入全局變量

　　除了IIFE，其他的三種我之前都沒有接觸過，在這里簡單談談我的理解。

- IIFE（Immediately-Invoked Function Expression）

// 創建一個立即執行的匿名函數
// 該函數返回一個對象，包含你要暴露的屬性
// 如下代碼如果不使用立即執行函數，就會多一個屬性i
// 如果有了屬性i，我們就能調用counter.i改變i的值
// 對我們來說這種不確定的因素越少越好

var counter = (function(){
 var i = 0;

 return {
 get: function(){
 return i;
 },
 set: function( val ){
 i = val;
 },
 increment: function() {
 return ++i;
 }
 };
}());

// counter其實是一個對象

counter.get(); // 0
counter.set( 3 );
counter.increment(); // 4
counter.increment(); // 5

counter.i; // undefined i并不是counter的屬性
i; // ReferenceError: i is not defined (函數內部的是局部變量)

從以上的代碼可以看出，counter中其中并沒有i這個屬性，它只有return 中暴露出來的內容。這樣我們就對i實現了私有。

- 放大模式

我對放大模式的理解就是把原函數當作參數傳遞到IIFE中，然后給原函數添加新的擴展方法，把擴展后的函數返回。就實現了對原函數的“放大”。

var module1 = (function (mod){
 　　mod.m3 = function () {
　　　　//...
 　　};
 　　return mod;
 })(module1);

在這個例子中，就給module1添加了一個新的方法m3并返回。

- 寬放大模式

寬放大模式就是在放大模式的基礎上新增了一個特性：IIFE的參數可以是空對象。

 var module1 = ( function (mod){
 　　//...
 　　return mod;
 })(window.module1 || {});

IIFE傳入的參數：如果window.module1有定義，就傳入該參數，如果為undefined就傳入一個空對象。

- 輸入全局變量

如果我們要在IIFE內使用全局變量，最好把全局變量通過參數傳遞進去。

 var module1 = (function ($, YAHOO) {
　　//...
 })(jQuery, YAHOO);

如上所示的代碼將jQuery和YUI兩個庫的全局變量當作參數傳入了module1。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com