Permalink
Browse files

Updating to jQuery 1.7 and requirejs 1.0.1, and updating docs to ment…

…ion more usage possibilities.
  • Loading branch information...
1 parent 5e6b079 commit 43d91562544ec5a14bd71d1a566d46b7635bd88c @jrburke jrburke committed Nov 4, 2011
Showing with 3,261 additions and 2,685 deletions.
  1. +70 −11 README.md
  2. +23 −10 jquery-require-sample/r.js
  3. +1,583 −1,333 jquery-require-sample/webapp/scripts/require-jquery.js
  4. +1,581 −1,327 parts/jquery.js
  5. +3 −3 parts/require.js
  6. +1 −1 parts/update.sh
View
@@ -1,24 +1,83 @@
# RequireJS + jQuery
-This project shows how [jQuery](http://jquery.com) can be used with [RequireJS](http://requirejs.org). It includes a sample project that you can use as a template to get started.
+This project shows how [jQuery](http://jquery.com) can be used with
+[RequireJS](http://requirejs.org). It includes a sample project that you can use
+as a template to get started.
-See the [Use with jQuery](http://requirejs.org/docs/jquery.html) page on the RequireJS site for more background on the sample project. The RequireJS site also has a link to [download this sample project](http://requirejs.org/docs/download.html#samplejquery).
+See the [Use with jQuery](http://requirejs.org/docs/jquery.html) page on the
+RequireJS site for more background on the sample project. The RequireJS site
+also has a link to
+[download this sample project](http://requirejs.org/docs/download.html#samplejquery).
-The sample project uses a require-jquery.js file which is a combination of three files:
+The sample project uses a require-jquery.js file which is just a simple
+combination of RequireJS and jQuery.
-* RequireJS, version 0.26.0
-* jQuery, version 1.6.4
-* [post.js](require-jquery/blob/master/parts/post.js), which just registers jQuery as a module.
+This project will be kept relatively up to date with the latest jQuery and
+RequireJS files as they are released.
-This project will be kept relatively up to date with the latest jQuery and RequireJS files as they are released.
+## Alternate Integrations
-## Alternate Integration
+With RequireJS, scripts can load in a different order than the order they are specified.
+This can cause problems for jQuery plugins that assume jQuery is already loaded.
+Using the combined RequireJS + jQUery file makes sure jQuery is in the page before
+any jQuery plugins load.
-If you do not want to bundle RequireJS with jQuery, you can load jQuery separately, not as part of the same file as RequireJS, but it has some implications when using the [RequireJS optimizer](http://requirejs.org/docs/optimization.html). See **Optimization Considerations** below.
+However, there are many use cases where it would be ideal to load jQuery with
+RequireJS, particularly if jQuery is being loaded from a Content Delivery
+Network (CDN).
+
+Here are some alternate ways to use RequireJS and jQuery together in a way that
+recognizes jQuery plugin constraints.
+
+### Wrap all scripts with define()
+
+Ideally, all the scripts you use would wrap themselves in a define() call so
+that RequireJS can understand what dependencies need to be loaded before defining
+the script's functionality.
+
+For scripts that just need jQuery, you can wrap the code in a wrapper like
+this:
+
+```javascript
+ define(['jquery'], function ($) {
+ //Script contents go here.
+ });
+```
+
+For more information on using define() to declare the codes as Asynchronous
+Module Definition (AMD) modules, see the
+[RequireJS API page](http://requirejs.org/docs/api.html).
+
+If you do not control the code in question, you can ask the code's author if
+they could optionally call define() in their code. As of jQuery 1.7, jQuery
+itself optionally calls define() if it is available. The
+[umdjs project](https://github.com/umdjs/umd) has some resources and examples
+to help code authors update their code to this pattern.
+
+### Use order plugin
+
+The [order plugin](http://requirejs.org/docs/api.html#order) can be used to load
+scripts in the order they are specified:
+
+```javascript
+ require(['order!jquery', 'order!pluginOne.jquery'], function () {
+ });
+```
+
+While this works, it does not give the same modular, encapsulated benefits when
+using define()-wrapped code.
+
+### Use priority config
+
+You can use the [priority config option](https://requirejs.org/docs/api.html#config-priority)
+to load jQuery before any other script is loaded. However, there are some
+implications when using the
+[RequireJS optimizer](http://requirejs.org/docs/optimization.html).
+See **Optimization Considerations** below.
First, an explanation on what to change in the sample project:
-### app.html
+#### app.html
* Change the script tag to load just **require.js** ([download it](http://requirejs.org/docs/download.html#requirejs) from the RequireJS site) instead of require-jquery.js
* Remove the data-main attribute
@@ -58,7 +117,7 @@ could do this:
However, you will want to download a local copy of jQuery and place it in the
project at **webapp/scripts/jquery.js** so it can be used with the optimizer.
-### Optimization Considerations
+#### Optimization Considerations
With jQuery loaded externally, before main.js is loaded, jQuery now needs to be
excluded from the built file the optimizer generates.
View
@@ -1,5 +1,5 @@
/**
- * @license r.js 1.0.0 Copyright (c) 2010-2011, The Dojo Foundation All Rights Reserved.
+ * @license r.js 1.0.1 Copyright (c) 2010-2011, The Dojo Foundation All Rights Reserved.
* Available via the MIT or new BSD license.
* see: http://github.com/jrburke/requirejs for details
*/
@@ -20,7 +20,7 @@ var requirejs, require, define;
var fileName, env, fs, vm, path, exec, rhinoContext, dir, nodeRequire,
nodeDefine, exists, reqMain, loadedOptimizedLib,
- version = '1.0.0',
+ version = '1.0.1',
jsSuffixRegExp = /\.js$/,
commandOption = '',
//Used by jslib/rhino/args.js
@@ -101,7 +101,7 @@ var requirejs, require, define;
}
/** vim: et:ts=4:sw=4:sts=4
- * @license RequireJS 1.0.0 Copyright (c) 2010-2011, The Dojo Foundation All Rights Reserved.
+ * @license RequireJS 1.0.1 Copyright (c) 2010-2011, The Dojo Foundation All Rights Reserved.
* Available via the MIT or new BSD license.
* see: http://github.com/jrburke/requirejs for details
*/
@@ -113,8 +113,8 @@ var requirejs, require, define;
(function () {
//Change this version number for each release.
- var version = "1.0.0",
- commentRegExp = /(\/\*([\s\S]*?)\*\/|\/\/(.*)$)/mg,
+ var version = "1.0.1",
+ commentRegExp = /(\/\*([\s\S]*?)\*\/|([^:]|^)\/\/(.*)$)/mg,
cjsRequireRegExp = /require\(\s*["']([^'"\s]+)["']\s*\)/g,
currDirRegExp = /^\.\//,
jsSuffixRegExp = /\.js$/,
@@ -6887,11 +6887,9 @@ define('parse', ['uglifyjs/index'], function (uglify) {
return onMatch("require", null, null, deps);
- } else if ((call[0] === 'name' && call[1] === 'define') ||
- (call[0] === 'dot' && call[1][1] === 'require' &&
- call[2] === 'def')) {
+ } else if (call[0] === 'name' && call[1] === 'define') {
- //A define or require.def call
+ //A define call
name = args[0];
deps = args[1];
//Only allow define calls that match what is expected
@@ -6907,7 +6905,9 @@ define('parse', ['uglifyjs/index'], function (uglify) {
if (((name[0] === 'string' || isArrayLiteral(name) ||
name[0] === 'function' || isObjectLiteral(name))) &&
(!deps || isArrayLiteral(deps) ||
- deps[0] === 'function' || isObjectLiteral(deps))) {
+ deps[0] === 'function' || isObjectLiteral(deps) ||
+ // allow define(['dep'], factory) pattern
+ (isArrayLiteral(name) && deps[0] === 'name' && args.length === 2))) {
//If first arg is a function, could be a commonjs wrapper,
//look inside for commonjs dependencies.
@@ -6984,6 +6984,8 @@ define('pragma', ['parse', 'logger'], function (parse, logger) {
nsWrapRegExp: /\/\*requirejs namespace: true \*\//,
apiDefRegExp: /var requirejs, require, define;/,
defineCheckRegExp: /typeof\s+define\s*===\s*["']function["']\s*&&\s*define\s*\.\s*amd/g,
+ defineJQueryRegExp: /typeof\s+define\s*===\s*["']function["']\s*&&\s*define\s*\.\s*amd\s*&&\s*define\s*\.\s*amd\s*\.\s*jQuery/g,
+ defineTernaryRegExp: /typeof\s+define\s*===\s*['"]function["']\s*&&\s*define\s*\.\s*amd\s*\?\s*define/,
removeStrict: function (contents, config) {
return config.useStrict ? contents : contents.replace(pragma.useStrictRegExp, '');
@@ -6994,7 +6996,18 @@ define('pragma', ['parse', 'logger'], function (parse, logger) {
//Namespace require/define calls
fileContents = fileContents.replace(pragma.nsRegExp, '$1' + ns + '.$2(');
+
+ //Namespace define ternary use:
+ fileContents = fileContents.replace(pragma.defineTernaryRegExp,
+ "typeof " + ns + ".define === 'function' && " + ns + ".define.amd ? " + ns + ".define");
+
+ //Namespace define jquery use:
+ fileContents = fileContents.replace(pragma.defineJQueryRegExp,
+ "typeof " + ns + ".define === 'function' && " + ns + ".define.amd && " + ns + ".define.jQuery");
+
//Namespace define checks.
+ //Do this one last, since it is a subset of the more specific
+ //checks above.
fileContents = fileContents.replace(pragma.defineCheckRegExp,
"typeof " + ns + ".define === 'function' && " + ns + ".define.amd");
Oops, something went wrong.

0 comments on commit 43d9156

Please sign in to comment.