2010-05-05 31 views
15

Tôi nhận thấy rằng có một vài cú pháp hơi khác nhau khi tải các tệp js một cách không đồng bộ và tôi tự hỏi liệu có sự khác biệt nào giữa hai tệp hay không. Tôi đoán họ làm việc như nhau, nhưng chỉ muốn chắc chắn rằng một phương pháp không tốt hơn phương pháp khác vì một lý do nào đó. :)Cú pháp tải tệp không đồng bộ .js

Phương pháp Một

(function() { 
    var d=document, 
    h=d.getElementsByTagName('head')[0], 
    s=d.createElement('script'); 
    s.type='text/javascript'; 
    s.src='/js/myfile.js'; 
    h.appendChild(s); 
})(); /* note ending parenthesis and curly brace */ 


Phương pháp thứ hai (Saw này trong mã của Facebook)

(function() { 
    var d=document, 
    h=d.getElementsByTagName('head')[0], 
    s=d.createElement('script'); 
    s.type='text/javascript'; 
    s.async=true; 
    s.src='/js/myfile.js'; 
    h.appendChild(s); 
}()); /* note ending parenthesis and curly brace */ 

Trả lời

15

Sự khác biệt duy nhất mà tôi nhận thấy là s.async=true; trong phương pháp Facebook .

Các asyncdefer thuộc tính là thuộc tính boolean chỉ ra như thế nào kịch bản nên được thực thi.

Có ba chế độ có thể được chọn bằng cách sử dụng các thuộc tính này. Nếu thuộc tính async có, thì tập lệnh sẽ được thực thi không đồng bộ, ngay khi có sẵn. Nếu thuộc tính async không có nhưng thuộc tính trì hoãn hiện diện, thì tập lệnh được thực thi khi trang đã phân tích xong. Nếu không có thuộc tính nào, thì tập lệnh sẽ được tìm nạp và thực hiện ngay lập tức, trước khi tác nhân người dùng tiếp tục phân tích cú pháp trang.

Nguồn và đọc thêm: Whatwg.org HTML 5: The script element

Đối với những lợi thế, bạn có thể muốn kiểm tra những gì Google đã nói vào ngày cuối cùng này:

+0

mát, cảm ơn. Chẳng phải s.asynch = true vô nghĩa trong trường hợp này, vì kịch bản được tiêm vào thẻ head? Và theo cú pháp trên dấu ngoặc đơn: (function() {...})(); vs: (function() {...}()); - những thứ đó có giống nhau không? – taber

+1

@taber: Có cú pháp ngoặc đơn đạt được cùng một mục tiêu. tức là: hàm được đánh giá dưới dạng biểu thức hàm thay vì câu lệnh hàm. Xem: http://stackoverflow.com/questions/440739/what-do-parentheses-surrounding-a-javascript-objectfunctionclass-declaration/442408#442408 và http://stackoverflow.com/questions/1634268/explain-javascripts- encapsulated-anonymous-function-syntax/1634321 # 1634321 (đặc biệt là bình luận cuối cùng). –

+0

@taber: Tôi không nghĩ rằng thực tế là nó được chèn vào trong '' tạo ra bất kỳ sự khác biệt nào. (Nhưng tôi không có tài liệu tham khảo hoặc kiểm tra để trả lại điều này). –

0

tôi chơi xung quanh với điều này và tạo ra một thư viện cho điều này bao gồm hỗ trợ cho bắn một cuộc gọi lại khi kịch bản cuối cùng tải.

Sigma.async_script_load('http://example.com/underscore-min.js', '_', function() { 
    _([1,2,3,2,3,1]).uniq(); 
}); 

https://github.com/ssoroka/sigma

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