RequireJS 整合jQuery
RequireJS jQuery
RequireJS把jQuery作为另一个依赖项，并以小写形式注册为命名模块jQuery，默认情况下，在使用AMD/RequireJS时，还使用全局函数$和jQuery注册自己。
加载jQuery
require(['jquery'], function($) {
//code here
}您可以加载多个库和自定义库以及jQuery，如下所示：
require(['custom_library_path',jquery'], function(load_library,$) {
//related code of $ and load_library
});下面演示了如何整合jQuery与Require JS。
使用Shim配置Require JS和jQuery
query使用shim配置来定义jQuery插件的依赖项，并通过声明依赖项来设置模块值。
加载jQuery
require(['jquery','jquery.myjsfile1','jquery.myjsfile2'], function($) {
$(function() {
//code here
});
});例子
下面的示例使用shim配置来定义jQuery插件的依赖关系。创建名为index.html的文件，并在其中添加以下代码：
<!DOCTYPE html> <html> <head> <title>jQuery Shim Config</title> <script data-main = "app" src = "lib/require.js"></script> </head> <body> <h2>jQuery Shim Config</h2> <p>Welcome to Tutorialspoint!!!</p> </body> </html>
创建名为app .js的js文件，并在其中添加以下代码
//You can configure loading modules from the lib directory
requirejs.config ({
"baseUrl": "lib",
"paths": {
"app": "../app"
},
"shim": {
"jquery.shim1": ["jquery"],
"jquery.shim2": ["jquery"]
}
});
//To start the application, load the main module from app folder
requirejs(["app/main"]);
Create a folder called app and load the main.js module from this folder −
define(["jquery", "jquery.shim1", "jquery.shim2"], function($) {
//loading the jquery.shim1.js and jquery.shim2.js plugins
$(function() {
$('body').shim1().shim2();
});
});创建一个名为lib的文件夹来存储require .js文件和其他js文件，如下所示：
lib/jquery.shim1.js
$.fn.shim1 = function() {
return this.append('<p>This is shim1 config...!</p>');
};
lib/jquery.shim2.js
$.fn.shim2 = function() {
return this.append('<p>This is shim2 config...!</p>');
};输出
从CDN加载jQuery
Query使用CDN ( Content Delivery Network )通过调用define ()函数来定义jQuery插件的依赖关系。
加载jQuery
define(["jquery", "jquery.load_js1", "jquery.load_js2"], function($) {
$(function() {
//code here
});
});例子
下面的示例使用CDN定义jQuery插件的依赖关系。创建名为index .html的文件，并在其中放置以下代码：
<!DOCTYPE html> <html> <head> <title>Load jQuery from a CDN</title> <script data-main = "app" src = "lib/require.js"></script> </head> <body> <h2>Load jQuery from a CDN</h2> <p>Welcome to Tutorialspoint!!!</p> </body> </html>
创建名为app .js的js文件，并在其中添加以下代码
// you can configure loading modules from the lib directory
requirejs.config ({
"baseUrl": "lib",
"paths": {
"app": "../app",
//loading jquery from CDN
"jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min"
}
});
//to start the application, load the main module from app folder
requirejs(["app/main"]);创建名为app的文件夹，并从此文件夹加载main .js模块
define(["jquery", "jquery.load_js1", "jquery.load_js2"], function($) {
//loading the jquery.load_js1.js and jquery.load_js2.js plugins
$(function() {
$('body').load_js1().load_js2();
});
});再创建一个名为lib的文件夹来存储require .js文件和其他js文件，如下所示
lib/jquery.load_js1.js
define(["jquery"], function($) {
$.fn.load_js1 = function() {
return this.append('<p>Loading from first js file!</p>');
};
});
lib/jquery.load_js2.js
define(["jquery"], function($) {
$.fn.load_js2 = function() {
return this.append('<p>Loading from second js file!</p>');
};
});输出
