这也正是我要问的问题!我还必须使用较旧的jQuery,但也必须使用更"传统"的javascript库.要做到这一点,最好的技术是什么?(如果您不介意,我可以把您的问题修改得更宽泛一些.)这是我学到的东西.
《RequireJS》的作者詹姆斯·伯克(James Burke)解释了advantages of the combined RequireJS + jQuery file.你有两件事.
有一个模块jquery
可用,它是jQuery对象.这是安全的:
// My module depends on jQuery but what if $ was overwritten?
define(["jquery"], function($) {
// $ is guaranteed to be jQuery now */
})
jQuery已经在任何require()
或define()
个东西之前加载了.所有模块都保证jQuery已经就绪.你甚至不需要require/order.js
插件,因为jQuery基本上是先硬编码加载的.
To me, #2 isn't very helpful. Most real applications have many .js
files that must load in the right order—sad but true. As soon as you need Sammy or Underscore.js, the combined RequireJS+jQuery file doesn't help.
My solution is to write simple RequireJS wrappers that load my traditional scripts using the "order" plugin.
假设我的应用程序有这些组件(按依赖关系).
In my mind, everything above that ends with .js
is a "traditional" script. Everything without .js
is a RequireJS plugin. The key is: high-level stuff (greatapp, my_sammy) are modules, and at deeper levels, it falls back to traditional .js
files.
It all starts with a booter telling RequireJS how to start.
<html>
<head>
<script data-main="js/boot.js" src="js/require.js"></script>
</head>
</html>
In js/boot.js
I put only the config and how to start the application.
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(); }
);
In greatapp.js
I have a normal looking module.
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};
}
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;
}
);