ejecutar javascript antes de que dom se cargue

Question

Deseo desarrollar una clase javascript de manejo que maneje frameworks usados, entre otras cosas.

Por ejemplo:

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

Trabaja muy bien y mi clase de añadir el marco - pero si no hay ningún código jQuery en él, no funcionaría, ya que el marco se carga después del DOM está listo, por lo que un fragmento jQuery predeterminado como jQuery(document).ready(function(){}); no puede funcionar, porque 'jQuery' aún no está definido.

¿Hay alguna solución a la que pueda escribir un 'arreglo' que antes de que el resto del dom empiece a cargar todos mis métodos addFramework deben ser ejecutados?

Answer 1

se debe utilizar el proceso de carga, mientras que la creación de script etiqueta.Se puede utilizar la siguiente manera:

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

se puede aplicar de esa manera:

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

La función document.ready jQuery, básicamente, hace esto:

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

que no tiene dependencias de bibliotecas externas y que se extenderá su Javascript cuando el documento se ha cargado.

También puede ser que desee mirar a require.js

Answer 3

Puede utilizar esta pequeña biblioteca para ejecutar la escritura después de la carga: Yepnope javascript loader

También se puede descargar a través de secuencias de comandos llamada AJAX. Y en la devolución de llamada correcta, agréguela al documento y ejecute el código del script. Pero este enfoque ya se usa en la biblioteca de Yepnope.

Answer 4

¿Qué le parece usar eventos personalizados? Algo como esto:

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!'); 
     } 
    }; 
}; 

Ahora puede definir algo como esto:

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

y después de marco de carga, por ejemplo, jQuery que acaba de hacer esto:

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

(usted debe poner el código probablemente en algún lugar en el controlador XHR).

Además, si lo enciende después de DOM cargado, entonces puede olvidarse del contenedor $(document).ready(...) de jQuery.

Answer 5

Parece que tu clase tiene una dependencia jQuery, idealmente no deberías tener esa dependencia.

Sin embargo, si usted está buscando una manera fácil de cargar jQuery dinámicamente, tal vez esto ayudaría:

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); 
}