Làm cách nào để tải một số lượng tập lệnh thay đổi bằng jQuery.getScript() trước khi chạy mã javascript?

Question

Tôi cần tải một số tệp nguồn javascript thay đổi trước khi chạy mã javascript phụ thuộc vào chúng. Đôi khi 1 kịch bản cần được tải, lần khác 2. Phương thức getScript() cho phép một tập lệnh được tải - làm cách nào tôi có thể sử dụng nó để tải x số lượng tập lệnh trước khi chạy mã bên trong của nó?

$.getScript("test.js", function(){ 
    // code to run after script is loaded 
});

Những gì tôi cần:

$.getScript(new Array("1.js","2.js"), function(){ 
    // code to run after all scripts are loaded 
});

Cảm ơn

Answer 1

Tôi đề nghị bạn nhìn vào LABjs

Đó là mục đích của nó là chính xác những gì.

Answer 2

Tôi đã sử dụng RequireJS khá rộng rãi và rất tốt. Tuy nhiên, điều này có thể phù hợp với bạn:

$.getScript("1.js", function(){ 
    $.getScript("2.js", function() { 
     // code to run after all scripts are loaded 
    }); 
}); 

Đó là một đoạn mã khá khó chịu và nhỏ ở đó, IMO, nhưng nếu thực sự chỉ có hai tập lệnh như vậy, có thể nó đáng giá. Logic của các bên trên cũng có thể được trích xuất thành một hàm chung, nhưng một khi bạn đi quá xa xuống con đường đó, nó có thể thông minh hơn để sử dụng RequireJS hoặc LABjs là JAAulde được đề xuất.

Answer 3

Nếu bạn đang sử dụng jquery 1.5, bạn có thể sử dụng cú pháp hoãn lại mới.

$.when(
    $.getScript("1.js"), 
    $.getScript("2.js"), 
    $.getScript("3.js") 
).then(function(){ 
    alert("all loaded"); 
}); 

Chỉ cần chuyển vào tập lệnh bạn muốn tải.

Answer 4

Một cách là liệt kê tất cả các tập lệnh của bạn trong một mảng, theo dõi số lượng tập lệnh đã tải so với số tiền bạn muốn tải. Một cái gì đó như thế này:

var toLoad = ["1.js", "2.js", "3.js"], loaded = 0; 

var onLoaded = function() { 
    loaded++; 
    if (loaded == toLoad.length) { 
     console.log('All scripts loaded!'); 
    } else { 
     console.log('Not all scripts are loaded, waiting...'); 
    } 
} 

for (var i = 0, len = toLoad.length; i < len; i++) { 
    $.getScript(toLoad[i], onLoaded); 
}  

Answer 5

Đã viết điều này tối nay, nhưng tôi hứa tôi không phải là một nhà máy. ;-) Ngoài LabJS và RequireJS, còn có Head.js chết đơn giản để sử dụng và thực hiện chính xác những gì bạn muốn.

Answer 6

nếu bạn có một vài mảng giống như tôi có làm điều này:

 configFiles: [ 'config', 'routes']; 
    controllerFiles: [ 'authenticationController' ]; 

    var cnt = (configFiles).length-1; 

    for(file in configFiles){ 

     if(cnt == file){   

      $.getScript('/app/config/'+configFiles[file]+'.js', function(){      

       for(file in controllerFiles){     

         $.getScript('/app/controllers/'+controllerFiles[file]+'.js', function(){ 
         // run app now everything is loaded 
         });       

       } 

      }); 

     }else{ 

       $.getScript('/app/config/'+configFiles[file]+'.js'); 

     }  

    } 

Answer 7

tải nhiều kịch bản bởi $ .getScript() một sau khi khác và làm công cụ sau khi tất cả các kịch bản được nạp

Working Fiddle. Kiểm tra cửa sổ Console cho đầu ra

Chúng ta có thể tạo một hàm mà chúng ta vượt qua mảng đường dẫn tệp js, hàm này sẽ thực hiện $.getScript() cho tệp js đầu tiên và phương pháp thành công. chỉ số tệp js thứ hai và thành công này sẽ gọi cùng chức năng bằng cách chuyển chỉ mục tệp thứ ba và tiếp tục cho đến khi nó tải tệp cuối cùng. Vì vậy, về cơ bản một hàm đệ quy của nó mà sẽ cung cấp một callback khi tất cả các file trong mảng đã được loaded.The mã kết thúc sẽ là đơn giản như

LoadAllScripts("yourArray",function(){ 
    alert("all scripts loaded!!"); 
}); 

Vì vậy, các mã hoàn chỉnh sẽ đi như thế này.

var LoadAllScripts = function (scriptArray, callback) { 
    SyncLoadScript({ scriptArray: scriptArray, index: 0}, function() { 
     callback(); 
    }); 
}; 

Và SyncLoadScript (core of the logic) trông giống như

var SyncLoadScript = function (scriptConfig, callback) { 
    var $this = this; 
    var script = scriptConfig.scriptArray[scriptConfig.index]; 
    if (scriptConfig.scriptArray.length > scriptConfig.index) { 
     if (script.trim().length > 0) { 
      $.getScript(script, function() { 
       console.log(script); 
       SyncLoadScript({ scriptArray: scriptConfig.scriptArray, index: ++scriptConfig.index, element: scriptConfig.element }, callback); 
      }).fail(function (jqXHR, textStatus, errorThrown) { 
       console.log(script + " failed while loading"); 
       debugger; 
       console.log("Error: "+errorThrown); 
       SyncLoadScript({ scriptArray: scriptConfig.scriptArray, index: ++scriptConfig.index, element: scriptConfig.element }, callback); 
      });   
     } 
     else { 
      console.log("invalid script src!!");   
     } 
    } 
    else { 
     callback(); 
    } 
} 

Sau đó, bạn có thể thực hiện cuộc gọi đơn giản để LoadAllScripts bằng cách thông qua hàng loạt các đường dẫn file js. như dưới đây.

LoadAllScripts(["1.js","2.js","3.js","4.js"], function() { 
    console.log("All the scripts have been loaded."); 
    //do your stuff after all the scripts are loaded. 
}); 

Lưu ý: tôi đã đưa callbacks trống cho bạn để đảm chỉnh và vượt qua xung quanh bất kỳ dữ liệu được lựa chọn. probably to hold all the failed scripts that you can passback to the main function and try to reload them again.