thực thi javascript trước khi dom đang tải

Question

Tôi muốn phát triển một lớp javascript xử lý xử lý khung được sử dụng, trong số những thứ khác.

Ví dụ:

myClass.addFramework('jQuery'); // just an example 

Nó hoạt động tốt và lớp học của tôi thêm khuôn khổ - nhưng nếu có bất kỳ mã jQuery trong nó, nó sẽ không làm việc, vì khuôn khổ được nạp sau khi dom đã sẵn sàng, do đó, một đoạn mã jQuery mặc định như jQuery(document).ready(function(){}); không thể hoạt động, bởi vì 'jQuery' chưa được xác định.

Có giải pháp nào để tôi có thể viết 'sửa' được trước khi phần còn lại của dom bắt đầu tải tất cả các phương thức addFramework của tôi phải được thực thi không?

Answer 1

Bạn nên sử dụng các sự kiện onload trong khi tạo script thẻ.Bạn có thể sử dụng như thế này:

myClass.addFramework('jQuery', function() { 
    // do stuff after jquery loaded. 
}); 

Bạn có thể thực hiện nó như thế:

myClass.addFramework = function (name, onload) { 
    var _script = document.createElement('script'); 
    _script.onload = function() { 
     onload(); 
    } 
    _script.onreadystatechange = function() { 
     if (this.readyState == 'complete') onload(); 
    } 
    _script.src = myClass.FRAMEWORK_BASE + '/' + name + '.js'; 
    document.getElementsByTagName('head')[0].appendChild(_script); 
}; 

Answer 2

Chức năng document.ready JQuery cơ bản thực hiện điều này:

window.onload = function() 
{ 
Javascript code goes here 
} 

nào không có người phụ thuộc vào thư viện bên ngoài và sẽ chạy Javascript của bạn khi tài liệu đã được nạp.

Bạn cũng có thể muốn xem xét require.js

Answer 3

Bạn có thể sử dụng thư viện nhỏ này để thực thi kịch bản sau khi nạp: Yepnope javascript loader

Bạn cũng có thể tải về các kịch bản thông qua cuộc gọi ajax. Và trong gọi lại thành công, gắn thêm nó vào tài liệu và thực thi mã của tập lệnh. Nhưng cách tiếp cận này đã được sử dụng trong thư viện Yepnope.

Answer 4

Cách sử dụng Sự kiện tùy chỉnh? Một cái gì đó như thế này:

var CustomEvent = function() { 
    this.eventName = arguments[0]; 
    var eventAction = null; 
    this.subscribe = function(fn) { 
     eventAction = fn; // you can customize this to hold array of handlers 
    }; 
    this.fire = function(sender, eventArgs) { 
     if (eventAction != null) { 
      eventAction(sender, eventArgs); 
     } else { 
      alert('No ' + mEventName + ' handler!'); 
     } 
    }; 
}; 

Bây giờ bạn có thể xác định một cái gì đó như thế này:

var myEvent = new CustomEvent("Framework Loaded"); 
myEvent.subscribe(function(sender, eventArgs) { 
    alert('Framework loaded! Hurray!'); 
    // jQuery goes here 
}); 

và sau khung tải ví dụ jQuery bạn chỉ cần làm điều này:

myEvent.fire(null, { framework: 'jQuery' }); 

(bạn nên đặt mã có thể là một nơi nào đó trong XHR xử lý).

Ngoài ra, nếu bạn kích hoạt sau khi nạp DOM, bạn có thể quên trình bao bọc $(document).ready(...) của jQuery.

Answer 5

Có vẻ như lớp học của bạn có phụ thuộc vào jQuery, lý tưởng là bạn không nên có sự phụ thuộc đó.

Tuy nhiên nếu bạn đang tìm kiếm một cách dễ dàng để tải jQuery tự động, có thể điều này sẽ giúp:

function onReady(){ 
    // My Custom Ready state. lets go wild here. 
} 

if (typeof jQuery === undefined || jQuery.fn.jquery !== '1.7.2') { 

    var jScript = document.createElement('script'); 
    jScript.setAttribute("type", "text/javascript"); 
    jScript.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js") 

    //Run onReady() once jQuery and document have loaded 
    jScript.onload = function() { //Add on load Event delegate 
     //JQuery is Loaded!! so you can do whatever you want with it to deligate. 
     $(document).ready(onReady) 
    }; 
    jScript.onreadystatechange = function() { //Same thing but for IE 
     if (this.readyState == 'complete' || this.readyState == 'loaded')(function() { 
      //JQuery is Loaded!! so you can do whatever you want with it to deligate. 
      $(document).ready(onReady) 
     }); 
    } 

    // Append Script to the Head 
    document.getElementsByTagName("head")[0].appendChild(script_tag); 

} else { 
    // JQuery Exists so lets just use it 
    $(document).ready(onReady); 
}