jquery - mismatched - requirejs node
¿Cómo uso requireJS y jQuery juntos? (5)
Me gustaría usar requireJS y estoy usando jQuery. No quiero usar la versión combinada de requireJS y jQuery ya que no estoy usando la última versión de jQuery. ¿Cuál es la mejor manera de trabajar con requireJS?
Además de la respuesta de jhs, consulte las instrucciones más recientes en la página require-jquery github del archivo README.md. Cubre tanto el enfoque más simple de usar un archivo jquery / require.js combinado como también cómo usar un jquery.js separado.
Encontré Jason''smith''s anwer tremendamente útil, probablemente más que la documentación de RequireJS.
Sin embargo, hay una forma de optimizarlo para evitar tener solicitudes AJAX separadas para (minúsculos) módulos de declaración-definición ("require_jquery" "require_sammy"). Sospecho que r.js lo haría en la etapa de optimización, pero puedes hacerlo antes de tiempo para no luchar con Path, el sistema BaseURI.
index.html:
<html>
<head>
<script data-main="js/loader.js" src="js/require.js"></script>
</head>
</html>
loader.js:
// We are going to define( dependencies by hand, inline.
// There is one problem with that through (inferred from testing):
// Dependencies are starting to load (and execute) at the point of declaring the inline
// define, not at the point of require(
// So you may want to nest the inline-defines inside require(
// this is, in a way, short replacement for Order plug in, but allows you to use
// hand-rolled defines, which the Order plug in, apparently does not allow.
var jQueryAndShims = [''jquery'']
if(window.JSON == null){
jQueryAndShims.push(''json2'')
define(
''json2''
, [''js/libs/json2.min.js'']
, function() {
return window.JSON
}
)
}
// will start loading the second we define it.
define(
''jquery''
, [''js/libs/jquery_custom.min.js'']
, function() {
// we just pick up global jQuery here.
// If you want more than one version of jQuery in dom, read a more complicated solution discussed in
// "Registering jQuery As An Async-compatible Module" chapter of
// http://addyosmani.com/writing-modular-js/
return window.jQuery
}
)
// all inline defines for resources that don''t rely on other resources can go here.
// First level require(
// regardless of depends nesting in ''myapp'' they will all start downloading
// at the point of define( and exec whenever they want,
// async in many browsers. Actually requiring it before the nested require makes
// sure jquery had *executed and added jQuery to window object* before
// all resolved depends (jquery plugins) start firing.
require(jQueryAndShims, function($) {
// will start loading the second we define it.
define(
''sammy_and_friends''
, [''jquery'',''js/libs/jquery_pluginone.min.js'',''js/libs/jquery_plugintwo.min.js'',''js/libs/sammy.min.js'']
, function($) {
// note, all plugins are unaltered, as they are shipped by developers.
// in other words, they don''t have define(.. inside.
// since they augment global $ (window.jQuery) anyway, and ''jquery'' define above picks it up
// , we just keep on returning it.
// Sammy is attached to $ as $.sammy, so returning just Sammy makes little sense
return $
}
)
// second level require - insures that Sammy (and other jQuery plugins) - ''sammy_and_friends'' - is
// loaded before we load Sammy plugins. I normally i would inline all sammy plugins i need
// (none, since i use none of them preferring jQuery''s direct templating API
// and no other Sammy plug in is really of value. ) right into sammy.js file.
// But if you want to keep them separate:
require([''sammy_and_friends''], function() {
// will start loading the second we define it.
define(
''sammy_extended''
, [''sammy_and_friends'',''js/libs/sammy_pluginone.min.js'',''js/libs/sammy_plugintwo.min.js'']
, function($) {
// as defined above, ''sammy_and_friends'' actually returns (globall) jQuery obj to which
// Sammy is attached. So we continue to return $
return $
}
)
// will start loading the second we define it.
define(
''myapp''
, [''sammy_extended'', ''js/myapplication_v20111231.js'']
, function($, myapp_instantiator) {
// note, myapplication may, but does not have to contain RequireJS-compatible define
// that returns something. However, if it contains something like
// "$(document).ready(function() { ... " already it MAY fire before
// it''s depends - ''sammy_extended'' is fully loaded.
// Insdead i recommend that myapplication.js returns a generator
// (app-object-generating function pointer)
// that takes jQuery (with all loaded , applied plugins)
// The expectation is that before the below return is executed,
// all depends are loaded (in order of depends tree)
// You would init your app here like so:
return myapp_instantiator($)
// then "Run" the instance in require( as shown below
}
)
// Third level require - the one that actually starts our application and relies on
// dependency pyramid stat starts with jQuery + Shims, followed by jQuery plugins, Sammy,
// followed by Sammy''s plugins all coming in under ''sammy_extended''
require([''jquery'', ''myapp''], function($, myappinstance) {
$(document).ready(function() {myappinstance.Run()})
})
}) // end of Second-level require
}) // end of First-level require
finalmente, myapplication.js:
// this define is a double-wrap.
// it returns application object instantiator that takes in jQuery (when it''s available) and , then, that
// instance can be "ran" by pulling .Run() method on it.
define(function() {
// this function does only two things:
// 1. defines our application class
// 2. inits the class and returns it.
return function($) {
// 1. defining the class
var MyAppClass = function($) {
var me = this
this._sammy_application = $.sammy(function() {
this.raise_errors = true
this.debug = true
this.run_interval_every = 300
this.template_engine = null
this.element_selector = ''body''
// ..
})
this._sammy_application.route(...) // define your routes ets...
this.MyAppMethodA = function(blah){log(blah)} // extend your app with methods if you want
// ...
// this one is the one we will .Run from require( in loader.js
this.Run = function() {
me._sammy_application.run(''#/'')
}
}
// 2. returning class''s instance
return new MyAppClass($) // notice that this is INITED app, but not started (by .Run)
// .Run will be pulled by calling code when appropriate
}
})
Esta estructura (suelto reemplaza (¿se duplica?) Requiere el complemento de Orden de JS, pero) le permite podar la cantidad de archivos que necesita para AJAX, agregando más control a la definición de árbol de dependencias y de dependencia.
También hay una gran ventaja para cargar jQuery por separado (que generalmente viene a 100k): puede controlar el almacenamiento en caché en el servidor, o almacenar en caché jQuery en localStorage del navegador. Eche un vistazo al proyecto AMD-Cache aquí https://github.com/jensarps/AMD-cache luego cambie la definición (declaraciones para incluir "caché!": Y estará (para siempre :)) atascado en el navegador del usuario.
define(
''jquery''
, [''cache!js/libs/jquery_old.min.js'']
, function() {
// we just pick up global jQuery here.
// If you want more than one version of jQuery in dom, read a more complicated solution discussed in
// "Registering jQuery As An Async-compatible Module" chapter of
// http://addyosmani.com/writing-modular-js/
return window.jQuery
}
)
Nota sobre jQuery 1.7.x + Ya no se adjunta al objeto ventana, por lo que lo anterior NO funcionará con el archivo jQuery 1.7.x + sin modificar. Allí debe personalizar su jquery **. Js para incluir esto antes del cierre "}) (ventana);":
;window.jQuery=window.$=jQuery
Si tiene errores "jQuery undefined" en la consola, es un signo que la versión de jQuery que está utilizando no se está adjuntando a la ventana.
Licencia de código: dominio público.
Divulgaciones: JavaScript arriba huele a "pseudocódigo" ya que es un parafraseo (poda manual) de un código de producción mucho más detallado. El código tal como se presentó anteriormente no se garantiza que funcione y NO se probó para funcionar tal como se presentó. Auditoría, pruébalo. Los puntos y coma omitidos a propósito, ya que no son necesarios por especificación de JS y el código se ve mejor sin ellos.
Esa es mi pregunta exacta también! También debo usar una jQuery más antigua, pero también más bibliotecas javascript "tradicionales". ¿Cuál es la mejor técnica para hacer eso? (Puedo editar su pregunta para hacerlo más amplio si no le importa.) Esto es lo que aprendí.
El autor de RequireJS, James Burke, explicó las ventajas del archivo combinado RequireJS + jQuery . Tienes dos cosas.
Un módulo,
jquery, está disponible, y es el objeto jQuery. Esto es seguro// My module depends on jQuery but what if $ was overwritten? define(["jquery"], function($) { // $ is guaranteed to be jQuery now */ })jQuery ya está cargado antes de cualquier elemento
require()odefine(). Todos los módulos están garantizados de que jQuery está listo. Ni siquiera necesita el complementorequire/order.jsya que jQuery estaba básicamente codificado para cargar primero.
Para mí, el # 2 no es muy útil. La mayoría de las aplicaciones reales tienen muchos archivos .js que deben cargarse en el orden correcto: triste pero cierto. Tan pronto como necesite Sammy o Underscore.js, el archivo combinado RequireJS + jQuery no ayuda.
Mi solución es escribir envoltorios RequireJS simples que carguen mis scripts tradicionales usando el plugin de "orden".
Ejemplo
Supongamos que mi aplicación tiene estos componentes (por dependencia).
- Mi aplicación, greatapp
- greatapp depende de un jquery personalizado (versión anterior que debo usar)
- greatapp depende de my_sammy (SammyJS más todos sus complementos que debo usar). Estos deben estar en orden
- my_sammy depende de jquery (SammyJS es un plugin jQuery)
- my_sammy depende de sammy.js
- my_sammy depende de sammy.json.js
- my_sammy depende de sammy.storage.js
- my_sammy depende de sammy.mustache.js
En mi opinión, todo lo que termina con .js es un guión "tradicional". Todo sin .js es un plugin RequireJS. La clave es: las cosas de alto nivel (greatapp, my_sammy) son módulos, y en niveles más profundos, recaen en los archivos .js tradicionales.
Arranque
Todo comienza con un booter que le dice a RequireJS cómo comenzar.
<html>
<head>
<script data-main="js/boot.js" src="js/require.js"></script>
</head>
</html>
En js/boot.js puse solo la configuración y cómo iniciar la aplicación.
require( // The "paths" maps module names to actual places to fetch the file.
// I made modules with simple names (jquery, sammy) that will do the hard work.
{ paths: { jquery: "require_jquery"
, sammy : "require_sammy"
}
}
// Next is the root module to run, which depends on everything else.
, [ "greatapp" ]
// Finally, start my app in whatever way it uses.
, function(greatapp) { greatapp.start(); }
);
Aplicación principal
En greatapp.js tengo un módulo de aspecto normal.
define(["jquery", "sammy"], function($, Sammy) {
// At this point, jQuery and SammyJS are loaded successfully.
// By depending on "jquery", the "require_jquery.js" file will run; same for sammy.
// Those require_* files also pass jQuery and Sammy to here, so no more globals!
var start = function() {
$(document).ready(function() {
$("body").html("Hello world!");
})
}
return {"start":start};
}
Requerimientos de módulo RequireJS alrededor de archivos tradicionales
require_jquery.js :
define(["/custom/path/to/my/jquery.js?1.4.2"], function() {
// Raw jQuery does not return anything, so return it explicitly here.
return jQuery;
})
require_sammy.js :
// These must be in order, so use the "order!" plugin.
define([ "order!jquery"
, "order!/path/to/custom/sammy/sammy-0.6.2-min.js"
, "order!/path/to/custom/sammy/plugins/sammy.json-0.6.2-min.js"
, "order!/path/to/custom/sammy/plugins/sammy.storage-0.6.2-min.js"
, "order!/path/to/custom/sammy/plugins/sammy.mustache-0.6.2-min.js"
]
, function($) {
// Raw sammy does not return anything, so return it explicitly here.
return $.sammy;
}
);
Esta pregunta tiene al menos dos años de antigüedad ahora, pero noté que este es un problema aún con RequireJS 2.0 (require-jquery.js usa jQuery 1.8.0, pero la última versión es 1.8.2).
Si ve esta pregunta, tenga en cuenta que require-jquery.js ahora es solo require.js y jquery.js, mezclados. Puede editar require-jquery.js y reemplazar las partes de jQuery con una versión más nueva .
Actualización (30 de mayo de 2013) : ahora que RequireJS tiene rutas y shim, existe una nueva forma de importar jQuery y jQuery, y el método anterior ya no es necesario ni recommended . Aquí hay una versión abreviada del método actual:
requirejs.config({
"paths": {
"jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min"
}
});
define(["jquery"], function($) {
$(function() {
});
});
Consulte http://requirejs.org/docs/jquery.html para obtener más información.
He encontrado que el mejor enfoque es mantener jQuery fuera de mi build RequireJS.
Solo incluye jquery.min.js en tu HTML. Luego, crea un archivo jquery.js con algo como esto ...
define([], function() {
return window.$;
});