2012-11-30 30 views
7

Tôi đã xem các trang hướng dẫn hoặc hỏi cách dự phòng từ Zepto sang jQuery (đặc biệt là đối với IE), dưới dạng here on SO và tại đây trên Zepto.js official page.
Tôi cũng đã xem các ví dụ về cách dự phòng từ jQuery được Google lưu trữ đến một trang web địa phương jQuery, như trong Modernizr.load doc page.Làm thế nào để dự phòng từ Zepto, tới Google CDN jQuery, đến jQuery cục bộ?

Câu hỏi của tôi là, làm cách nào để kết hợp hai thứ lại với nhau? Có thể cũng không sử dụng Modernizr.load, chỉ cần sử dụng các khối <script> thích hợp?

Đây là những gì tôi đã đưa ra, nhưng có vẻ như IE không bao giờ tìm thấy phiên bản được Google lưu trữ. Ngoài ra, tôi không chắc chắn việc gán Zepto = jQuery hoạt động đúng cách.

<script> 
    document.write('<script src=' + 
     ('__proto__' in {} ? 
      'js/vendor/zepto.min' : 
      'https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min') + 
     '.js><\/script>'); 
</script> 
<script> 
    if (window.jQuery) { 
     window.Zepto = window.jQuery; /* let jQuery alias Zepto */ 
    } 
    else 
    { /* here jQuery could be rightly undefined because Zepto is loaded, 
     so this could be wrong. */ 
     document.write('<script src=' + 
      'js/vendor/jquery-1.8.0.min' + 
      '.js><\/script>'); 
    } 
</script> 
<script> 
    if (window.jQuery) { 
     window.Zepto = window.jQuery; /* let jQuery alias Zepto */ 
    } 
    else 
    { 
     /* same problem as before */ 
     console.error('Zepto nor jQuery available!'); 
    } 
</script> 

Có cách nào tốt hơn không? TA

Sửa

Sau @Ashfame câu trả lời, đây là những gì tôi đã sử dụng:

<!-- Load local Zepto.js or (as a fallback) jQuery from Google CDN or (as a fallback) local jQuery --> 
<script> 
    document.write('<script src="' + ('__proto__' in {} ? 
     'js/vendor/zepto' : 
     'http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery') + 
     '.min.js"><\/script>') 
</script> 
<script> 
    window.Zepto || window.jQuery || document.write('<script src="js/vendor/jquery-1.8.0.min.js"><\/script>'); 
</script> 

tôi không thể sử dụng URL protocol-less/kế hoạch-less của Google CDN như đối với một số lý do nó không hoạt động trên IE9 địa phương của tôi (nó chờ đợi rất nhiều, sau đó luôn rơi trở lại địa phương).

Tôi không bí danh nữa Zepto với jQuery: chỉ cần sử dụng $ trong mã JS.

Tôi dường như không gặp phải bất kỳ sự cố nào liên quan đến việc tải jQuery không đúng thứ tự w.r.t. mã phụ thuộc.

+0

Tôi cũng đã thử với '//ajax.googleapis.com/...', không có tiền tố giao thức – superjos

+0

Đã thử cũng với [đoạn mã này] (https://gist.github.com/3325940) có thể bởi người dùng @ Sébastien Grosjean - ZenCocoon: nó dường như hoạt động tốt, nhưng sau đó tôi không muốn sử dụng CDN Cloudflare, cũng như bất kỳ Zepto CDN nào khác. – superjos

+0

Cũng thử với 'Modernizr.load', nhưng bằng cách nào đó nó có vẻ hơi quá nhiều cho mục đích. Dĩ nhiên tôi có thể sai. – superjos

Trả lời

6

Vì lợi ích của cố kỹ thuật này ra, tôi sẽ cố gắng này đầu tiên:

tôi đã viết này nhanh chóng dọc theo dòng về cách HTML5 Boilerplate tải một dự phòng địa phương khi jQuery CDN là xuống.

Điều này có thể không hiệu quả, nhưng tôi không thấy bất kỳ lý do nào khiến nó không nên hoạt động ngay bây giờ. Muốn cung cấp cho nó một spin?

<script>document.write('<script src="' + ('__proto__' in {} ? 'cdn/zepto.min' : 'cdn/jquery.min') + '.js">\x3Cscript>');</script> 
<script>window.Zepto || window.jQuery || document.write('<script src="cdn/jquery.min.js">\x3C/script>')</script> 
<script>window.Zepto || window.jQuery || document.write('<script src="local/jquery.min.js">\x3C/script>')</script> 

Trường hợp duy nhất nó sẽ không xử lý tốt là khi người dùng trên trình duyệt tương thích không Zepto như IE & đồng thời jQuery CDN là xuống, sau đó nó sẽ cố gắng để tải jQuery CDN lại một lần và cuối cùng là dự phòng cho bản sao cục bộ của jQuery.


Nhưng thực tế, nếu tôi thực hiện điều này, tôi sẽ chỉ có một dự phòng duy nhất cho địa phương. Giống như thử kiểm tra xem chúng ta có thể tải Zepto hay jQuery, và trong bước tiếp theo, nếu cả hai đều không được tải, hãy tải thư viện cục bộ. Tốt hơn để có một cái gì đó làm việc tại chỗ, hơn là cố gắng để tối ưu hóa một cái gì đó mà sẽ không trở lại mà đạt được nhiều. Tối ưu hóa một cách khôn ngoan! Có thể rất có khả năng kỹ thuật số 1 ở trên sẽ có các khoang tương thích của trình duyệt chéo.


Tôi vừa phát hiện ra vấn đề này, nơi nó nói, thậm chí kỹ thuật này (đang được sử dụng & khuyến cáo của HTML5 Boilerplate & Modernizr) là không đáng tin cậy.Kiểm tra vấn đề này - document.write fallback causing jQuery to load out of order

Một giải pháp khác trong câu hỏi đó nói về thư viện Yepnope. Bạn có thể kiểm tra cách hoạt động - https://stackoverflow.com/a/12323328/551713

Cuối cùng tôi sẽ kết thúc câu trả lời này bằng cách nói rằng trừ khi bạn đang xây dựng thứ gì đó hoàn toàn sẽ là mã của bạn, như không chạy vào môi trường hoang dã với khả năng người dùng thêm nhiều nội dung hơn , đừng lo lắng về điều đó nhiều vì bạn sẽ nhanh chóng gặp phải vấn đề với các kỹ thuật như vậy, bởi vì tập lệnh khác có thể tải ra ngoài trật tự và gây ra sự cố, trong khi nếu tất cả mã của bạn, bạn có thể làm mọi thứ tải & hoạt động theo logic của bạn về những nhược điểm.

+0

Cảm ơn câu trả lời của bạn. Cuối cùng tôi đã sử dụng phiên bản của bạn, nhưng chỉ cần loại bỏ thử nghiệm kép trên Google CDN. Trong trường hợp của tôi: nếu nó hoạt động lần đầu tiên, tốt, nếu không vì lợi ích của tốc độ (mục đích chính của việc sử dụng một CDN) nó sẽ chỉ đi cho jQuery địa phương. – superjos

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