Zip 壓縮、解壓技術在 HTML5 瀏覽器中的應用

JSZip 是一款能夠建立、讀取、修改 .zip 文件的 javaScript 工具。在 web 應用中，免不了須要從 web 服務器中獲取資源，若是能夠將全部的資源都合併到一個 .zip 文件中，這時候只須要作一次請求，這樣既減小了服務器的壓力，同時也能夠加快 web 應用的呈現速度。
今天就來探討下 JSZip 如何與 HT 拓撲應用結合。先來看看這期 Demo 的效果圖：

第一步、須要將應用對相關資源打包成 .zip 文件，

這是我要壓縮的文件列表，把響應的資源文件存放到對應的文件夾下，而後在 loadorder 文件中標明資源加載的順序，loadorder 文件內容以下：

'js/ht.js',
'js/ht-obj.js',
'js/ht-modeling.js',
'obj/equipment.mtl',
'obj/equipment.obj',
'image/equipment.jpg'

在資源加載順序中，要標明響應資源的相對於 .zip 文件的路徑，這樣方便在讀取 .zip 文件時快速找到相應的資源文件。
第二步、在 html 文件中引入 JSZip 和 JSZipUtils 庫，接下來就是請求 .zip 文件，並對 .zip 文件作解析處理。

JSZipUtils.getBinaryContent('res/ImportObj.zip', function(err, data) {
    if(err) {
        throw err; // or handle err
    }
    var zip = new JSZip(data);

    var loadorderStr = zip.file('loadorder').asText(),
            order;
    eval('order = [' + loadorderStr + ']');
    var len = order.length,
            image = {},
            mtlStr = '',
            objStr = '';
    for(var i = 0; i < len; i++) {
        var fileName = order[i];
        if(fileName.indexOf('js/') >= 0) {
            var js = document.createElement('script');
            js.innerHTML = zip.file(fileName).asText();
            document.getElementsByTagName('head')[0].appendChild(js);
        } else if(fileName.indexOf('image/') >= 0) {
            var buffer = zip.file(fileName).asArrayBuffer(),
                    str = _arrayBufferToBase64(buffer),
                    pIndex = fileName.indexOf('.'),
                    type = fileName.substr(pIndex + 1),
                    re = 'data:image/' + type + ';base64,';

            image[fileName] = re + str;
        } else if(fileName.indexOf('obj/') >= 0) {
            var str = zip.file(fileName).asText();
            if(fileName.indexOf('.mtl') > 0) {
                mtlStr = str;
            } else if(fileName.indexOf('.obj') > 0) {
                objStr = str;
            }
        }
    }

    init(objStr, mtlStr, image);
});

首先經過 JSZipUtils 獲取 .zip 文件，將獲取到的文件內容經過 new JSZip(data) 方法加載到 zip 變量中，經過 zip.file(fileName) 讀取 loadorder 文件內容，試用 eval 命令動態執行腳本，將文本內容轉換爲 js 變量 order，最後經過遍歷 order 變量，將 js 資源動態引入到頁面中。
在 .zip 文件中有包含圖片文件，JSZip 只能獲取到圖片文件的 ArrayBuffer 數據，這時須要將 ArrayBuffer 轉換爲 Base64 纔可以爲瀏覽器所識別，因此這裏定義了一個轉換函數：_arrayBufferToBase64

function _arrayBufferToBase64( buffer ) {
    var binary = '';
    var bytes = new Uint8Array( buffer );
    var len = bytes.byteLength;
    for (var i = 0; i < len; i++) {
        binary += String.fromCharCode( bytes[ i ] );
    }
    return window.btoa( binary );
}

此次的案例中，有涉及到 3D 模型數據與 HT 3D 拓撲應用的結合，在 .zip 文件中的 obj 目錄就是存放 3D 模型數據，在文件讀取中，將 3D 模型數據以文本對形勢讀取出來存放到變量中，再將數據傳遞到 init 函數中，經過 ht.Default.parseObj() 方法將 3D 模型數據加載到 HT 中。

function init(objStr, mtlStr, image) {
    dataModel = new ht.DataModel();
    g3d = new ht.graph3d.Graph3dView(dataModel);

    view = g3d.getView();
    view.className = 'main';
    document.body.appendChild(view);
    window.addEventListener('resize', function (e) {
        g3d.invalidate();
    }, false);

    g3d.setEye([0, 500, 1000]);
    g3d.setCenter([0, 200, 0]);
    g3d.setGridVisible(true);
    g3d.setGridColor('#74AADA');

    var param = {
        shape3d: 'E1',
        center: true,
        cube: true
    };

    var modelMap = ht.Default.parseObj(objStr, mtlStr, param);
    for(var model in modelMap) {
        var map = modelMap[model],
                i = map.image,
                index = i.lastIndexOf('/'),
                fileName = i.substr(index + 1),
                rawS3 = map.rawS3;
        for(var imgName in image) {
            if(imgName.indexOf(fileName) >= 0) {
                ht.Default.setImage(i, 256, 256, image[imgName]);
            }
        }
    }

    var node = new ht.Node();
    node.s({
        'shape3d': 'E1',
        'wf.visible': 'selected',
        'wf.width': 3,
        'wf.color': '#F7F691'
    });
    node.s3(param.rawS3);
    node.p3(0, param.rawS3[1]/2, 0);
    dataModel.add(node);
}

上述是生成 3D 拓撲、3D 模型引入和引用 3D 模型建立拓撲節點的代碼。其中那段 setImage 的代碼須要特別注意，爲何我要大費周張的去判斷 image 的文件名呢，那是由於在 mtl 3D 模型描述文件中有一個設置貼圖的屬性，該屬性能夠指定文件的絕對路徑，也能夠指定文件的相對路徑，由於採用 JSZip 沒法將 .zip 中的文件內容寫回到本地目錄中，因此只能將貼圖屬性對應的屬性名稱做爲 HT 中的 image 名稱設置到 HT 中，以便 HT 模型加載的時候可以獲取獲得模型所須要的圖片資源。HT 3D 拓撲的應用能夠參考《3D拓撲自動佈局之Node.js篇》。
JSZip 在壓縮或解壓數據的時候，若是出現速度較慢的狀況，能夠考慮使用 Web Worker，Web Worker的具體應用能夠參考《3D拓撲自動佈局之Web Workers篇》。