類script標籤，非同步載入，順序執行

hfhan發表於2018-12-28
非同步

主要是想實現把壓縮加密後的js檔案儲存在本地，網上找了下沒找到理想的，所以自己動手寫了一個，主要是仿照script標籤的功能，實現非同步載入，順序執行。如果本地已經有該檔案，則不重新載入，直接呼叫本地資料。

jsFile是儲存檔案資訊的陣列，其中，path是檔案路徑，name是儲存在本地的名字，active表示當前檔案是否已經執行，load表示當前檔案手已經載入完成，還要一個隱藏的content屬性，儲存檔案內容。

!function loadJS(){
    var jsFile = [
        {name:'file1',path:'js/file1.js',active:false,load:false},
        {name:'file2',path:'js/file2.js',active:false,load:false},
        {name:'file3',path:'js/file3.js',active:false,load:false},
        {name:'file4',path:'js/file4.js',active:false,load:false},
        {name:'file5',path:'js/file5.js',active:false,load:false}
    ]
    jsFile.forEach(function(item, index){
        if(localStorage['file_' + item.name]){
            item.load = true
            implementJS(item, index)
        }else{
            $.ajax({
                type:"get",
                url:item.path,
                dataType:'text',
                success:function(data){
                    item.content = data
                    item.load = true
                    implementJS(item, index)
                }
            });
        }
    })

    function implementJS(item, index){
        //如果上一個檔案已經執行了，則執行這個js檔案
        if(index == 0 || jsFile[index - 1].active){
            storageJS(item, index)
            //嘗試執行下一個js檔案
            jsFile[index + 1] && jsFile[index + 1].load && implementJS(jsFile[index + 1], index + 1)
        }
    }
    function storageJS(item, index){
            //儲存並執行js檔案
            var name = 'file_' + item.name
            localStorage[name] = item.content || localStorage[name] || ''
            //這裡要使用window.eval或者eval.call(window),否則eval裡面的變數就不是全域性變數
            window.eval(localStorage[name])
            item.active = true
    }
}()

相關文章