开发学院

您的位置:首页>教程>正文

教程正文

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

输出

requirejs-shim-config.jpg

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

输出

requirejs-loading-from-cdn.jpg