如何一起使用requireJS和jQuery? [英] How do I use requireJS and jQuery together?
问题描述
我想使用requireJS，而我正在使用jQuery. 我不想使用requireJS和jQuery的组合版本，因为我没有使用最新的jQuery版本. 对我来说，使用requireJS的最佳方法是什么?
I would like to use requireJS and I am using jQuery. I don't want to use the combined version of requireJS and jQuery since I am not using the latest jQuery version. What is the best way for me to work with requireJS?
推荐答案
那也是我的确切问题！我还必须使用较旧的jQuery，但也必须使用更多的传统" javascript库.最好的技术是什么? (如果您不介意，我可能会编辑您的问题以使其范围更广.)这是我所学到的.
That is my exact question too! I also must use an older jQuery, but also more "traditional" javascript libraries. What is the best technique to do that? (I may edit your question to make it more broad if you don't mind.) Here is what I learned.
RequireJS作者James Burke解释了RequireJS + jQuery组合文件的优点.你有两件事.
RequireJS author, James Burke, explained the advantages of the combined RequireJS + jQuery file. You get two things.
-
一个模块
jquery可用，它是jQuery对象.这是安全的:
A module,
jquery, is available, and it's the jQuery object. This is safe:
// 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基本上是经过硬编码才能首先加载.
jQuery is already loaded before any require() or define() stuff. All modules are guaranteed that jQuery is ready. You don't even need the require/order.js plugin since jQuery was basically hard-coded to load first.
对我来说，#2并不是很有帮助.大多数真实的应用程序都有许多 .js个文件，它们必须按正确的顺序加载，而这确实是错误的.一旦需要Sammy或Underscore.js，组合的RequireJS + 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.
我的解决方案是编写简单的RequireJS包装器，这些包装器使用"order"插件加载我的传统脚本.
假设我的应用具有这些组件(根据依赖性).
Suppose my app has these components (by dependency).
- 我的应用程序， greatapp
- greatapp取决于自定义的 jquery (我必须使用旧版本)
- greatapp取决于 my_sammy (SammyJS以及我必须使用的所有插件).这些必须井井有条
- My app, greatapp
- greatapp depends on a custom jquery (old version I must use)
- greatapp depends on my_sammy (SammyJS plus all its plugins I must use). These must be in order
- my_sammy取决于 jquery (SammyJS是jQuery插件)
- my_sammy取决于 sammy.js
- my_sammy取决于 sammy.json.js
- my_sammy取决于 sammy.storage.js
- my_sammy取决于 sammy.mustache.js
- my_sammy depends on jquery (SammyJS is a jQuery plugin)
- my_sammy depends on sammy.js
- my_sammy depends on sammy.json.js
- my_sammy depends on sammy.storage.js
- my_sammy depends on sammy.mustache.js
在我看来，以
.js结尾的所有内容都是传统"脚本.没有.js的所有内容都是RequireJS插件.关键是:高级内容(greatapp，my_sammy)是模块，在更深层次上，它可以回溯到传统的.js文件.In my mind, everything above that ends with
.jsis a "traditional" script. Everything without.jsis a RequireJS plugin. The key is: high-level stuff (greatapp, my_sammy) are modules, and at deeper levels, it falls back to traditional.jsfiles.这一切都从引导程序告诉RequireJS如何开始开始.
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>在
js/boot.js中，我仅放置配置以及如何启动应用程序.In
js/boot.jsI 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(); } );主要应用
在
greatapp.js中，我有一个外观正常的模块.Main Application
In
greatapp.jsI 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}; }围绕传统文件的RequireJS模块包装器
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; } );这篇关于如何一起使用requireJS和jQuery?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
