JavaScript模塊化思想

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

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

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

功能都是為了解決需求的。模塊化可以帶來的優(yōu)點(diǎn)有以下幾點(diǎn)：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 },

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

 }
 };

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

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

（3）現(xiàn)代。包含IIFE（立即執(zhí)行函數(shù)），放大模式，寬放大模式，輸入全局變量

　　除了IIFE，其他的三種我之前都沒有接觸過，在這里簡單談?wù)勎业睦斫狻?/p>

- IIFE（Immediately-Invoked Function Expression）

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

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

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

// counter其實(shí)是一個對象

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

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

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

- 放大模式

我對放大模式的理解就是把原函數(shù)當(dāng)作參數(shù)傳遞到IIFE中，然后給原函數(shù)添加新的擴(kuò)展方法，把擴(kuò)展后的函數(shù)返回。就實(shí)現(xiàn)了對原函數(shù)的“放大”。

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

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

- 寬放大模式

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

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

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

- 輸入全局變量

如果我們要在IIFE內(nèi)使用全局變量，最好把全局變量通過參數(shù)傳遞進(jìn)去。

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

如上所示的代碼將jQuery和YUI兩個庫的全局變量當(dāng)作參數(shù)傳入了module1。

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