提醒：本文最後更新於 1927 天前，文中所描述的資訊可能已發生改變，請謹慎使用。

上篇文章講到如何用 JavaScript 編寫下載器，不少小夥伴看了覺得神奇。在本篇文章裡，我把之前寫的一個 JS 遊戲全部資源打成 Zip 包，用上回寫的下載器載入，再解壓到 FileSystem，最後直接執行這個遊戲。也就是說只需要一次 HTTP 請求，就可以獲得遊戲所需的全部資源。

這篇文章，我們不會從零開始實現我們的目標，除了複用上回的下載器，還會用到 github 上兩個好用的開源 JS 庫，filer.js 和 zip.js。

filer.js 是對 FileSystem API 的二次封裝，提供了更友好的介面和更多的功能； zip.js 提供瞭解壓 Zip 檔案的功能。zip.js 原始碼裡的 sjis.js 檔案是用來處理日文字元，可以去掉。這兩個庫的具體使用方法，可以直接去各自的 github 主頁檢視。

首先，我們還是通過 XHR 下載所需的 Zip 包，指定 responseType 為 arraybuffer。把下載到的資料包裝為 Uint8Array，交給 zip.js 解壓，這部分程式碼如下：

var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);

xhr.onreadystatechange = function() {
    if (this.readyState == 4) {
        if (this.response != null) {
            var result = Zip.inflate(new
 
 Uint8Array(this.response));
            console.log(result);
        }
    }
};

xhr.responseType = 'arraybuffer';
xhr.send();

這樣，Zip 包就被解壓為下面這樣格式的資料了：

ZipData 包含很多資訊，從命名來看，files 物件中應該只包含檔案，但實際上如上圖所示，「res/」這樣的目錄也混在其中，不過我們可以簡單地通過最後一個字元來過濾掉它們。每個 file 物件的 data 屬性存放的是壓縮資料，呼叫物件的 inflate() 方法會返回這個檔案的原始資料。

接下來，我們申請 FileSystem 使用許可權，遍歷 files 物件，並在 FileSystem 中按照 Zip 包內的目錄結構儲存檔案。這部分程式碼使用 filer.js 實現很簡單，filer.js 提供的 mkdir() 方法可以遞迴建立多級目錄，類似 linux 的「mkdir -p」。另外，FileSystem Api 中操作檔案都是非同步操作，為了使用方便，我們可以基於 promise 做二次封裝。這部分程式碼不貼了，可以直接看最後的 Demo。

在所有檔案都寫入完成後，我們獲得入口檔案（index.html）在 FileSystem 中的地址，直接 location 跳轉就可以執行這個遊戲了：

filer.create('index.html', false, function(file) {
    location.href = file.toURL();
});

完整的 Demo，請點選這裡觀看。

--EOF--

提醒：本文最後更新於 1927 天前，文中所描述的資訊可能已發生改變，請謹慎使用。