tải tệp js và các tệp js phụ thuộc khác một cách không đồng bộ

Question

Tôi đang tìm cách tải không đồng bộ các loại tệp javascript sau đây: tệp js "lõi" (hmm, hãy gọi nó, oh tôi không biết , "jquery!" haha), x số tệp js phụ thuộc vào tệp "lõi" js đang được tải và số tệp js không liên quan khác. Tôi có một vài ý tưởng về cách để đi về nó, nhưng không chắc chắn cách tốt nhất là gì. Tôi muốn tránh tải tập lệnh trong nội dung tài liệu.

Vì vậy, ví dụ, tôi muốn 4 file javascript sau để tải không đồng bộ, phù hợp tên:

/js/my-contact-page-js-functions.js // unrelated/independent script 
/js/jquery-1.3.2.min.js // the "core" script 
/js/jquery.color.min.js // dependent on jquery being loaded 
http://thirdparty.com/js/third-party-tracking-script.js // another unrelated/independent script 

Nhưng điều này sẽ không làm việc bởi vì nó không được bảo đảm rằng jQuery được nạp trước các plugin màu ...

(function() { 
    var a=[ 
     '/js/my-contact-page-functions.js', 
     '/js/jquery-1.4.2.min.js', '/js/jquery.color.js', 
     'http://cdn.thirdparty.com/third-party-tracking-script.js', 
    ], 
    d=document, 
    h=d.getElementsByTagName('head')[0], 
    s, 
    i, 
    l=a.length; 
    for(i=0;i<l;i++){ 
     s=d.createElement('script'); 
     s.type='text/javascript'; 
     s.async=true; 
     s.src=a[i]; 
     h.appendChild(s); 
    } 
})(); 

Bạn có thể tải jquery và plugin màu một cách không đồng bộ không? (Vì plugin màu yêu cầu jQuery tải trước.)

Phương pháp đầu tiên tôi đang xem xét là chỉ kết hợp tập lệnh plugin màu với nguồn jQuery vào một tệp.

Sau đó, một ý tưởng tôi đã được tải plugin màu như vậy:

$(window).ready(function() { 
    $.getScript("/js/jquery.color.js"); 
}); 

Bất cứ ai có bất cứ suy nghĩ về cách bạn muốn đi về điều này? Cảm ơn!

Answer 1

LabJS và RequireJS là hai lựa chọn phổ biến ngay bây giờ. Cả hai đều làm việc với jQuery nhưng có cách tiếp cận hơi khác nhau, vì vậy bạn nên xem xét cả hai.

Answer 2

Bạn có thể tận dụng YUI Loader đến register your own modules and dependencies và sau đó tải chúng.

Bạn nhận được móc hoàn chỉnh cho thành công, thất bại và thậm chí là tiến bộ, vì vậy bạn có thể móc bất kỳ hành động không đồng bộ nào bạn muốn.

Answer 3

Bạn sẽ không thể đạt được tải hoàn toàn không đồng bộ vì chính lý do bạn đề cập; phụ thuộc.

Đối với 10p của tôi, tôi sẽ thực hiện theo tuyến $ .getScript(). Về cơ bản nó chỉ là một trình bao bọc cho $ .ajax(), do đó tải các tập lệnh của bạn theo cách này sẽ cung cấp cho bạn tải không đồng bộ mà bạn đang theo dõi.

Answer 4

LABjs được tạo riêng cho vấn đề này.

<script src="lab.js"></script> 
<script> 
    $LAB 
    .script("jquery.js") 
    .wait() 
    .script("jquery.color.js") 
    .script("jquery.otherplugin.js") 
    .script("mylib.js") 
    .wait() 
    .script("unrelated1.js") 
    .script("unrelated2.js"); 
</script> 

Bạn cũng có thể đặt các kịch bản không liên quan vào $LAB chuỗi riêng của họ, nếu họ thực sự không cần phải chờ đợi cho jQuery và các kịch bản khác của bạn.

Câu hỏi mới nhất

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Các vấn đề liên quan

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.