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>'); }; });