使用RequireJS库加载JavaScript模块的实例教程

 更新时间:2016年06月06日 16:37:09   作者:Aaron  
RequireJS库的主旨就是一个js文件的模块加载器,可以独立于框架来进行使用,这里我们整理了使用RequireJS库加载JavaScript模块的实例教程,需要的朋友可以参考下

js通过script标签的默认加载方式是同步的,即第一个script标签内的js加载完成后,才开始加载第二个,以此类推,直至js文件全部加载完毕。且js的依赖关系必须通过script的顺序才能确保;而在js加载期间,浏览器将停止响应,这大大影响了用户体验,基于此,很多解决js以来和加载的方案出现,require js就是其中之一。

requirejs加载的模块,一般为符合AMD标准的模块,即用define定义,用ruturn返回暴露方法、变量的模块;requirejs也可以加载飞AMD标准的模块,但比较麻烦,这次不涉及。

require加载js主涉及以下方面:

  • script 标签data-main属性声明requirejs加载的入口模块,async="true"(非ie) 和defer(ie)标签表明异步加载。
  • require.config配置模块对应的路径
  • require声明依赖关系

html demo

<script src ="js/require.js" defer async="true" data-main="js/main" >

<!--给出requirejs路径,声明为异步加载,指定入口模块为

main.js(可省略.js)-->

main.js

 require.config({
   //声明模块的位置
   paths: {
     "jquery":"libs/jquery"
     "login" : "libs/login"
   }
   //或使用baseUrl指定所有模块的路径
   baseUrl: "js/libs"
 });
 //使用require加载模块,第一个参数为数组,即要加载的模块,将按数组顺序加载;第二个为回调函数,在全部加载完成后执行。
 require(['jquery','login'],function($,Login){
   alert("jquery and login module load success!");
   Login.do_login();
   //some else
 });

符合amd的login module定义

 //依赖jquery的定义
 define(['jquery'],function($){
   // some definations
  function do_login(){
    $.post('/sessions/create',{uname:$("#uname").val(),
         password:$("#password").val()},function(data){
     //some 
   });
   return {do_login:do_login};
  } 
 });

//不依赖其他模块的定义
define(function(){
 //some definations
 return {xx:xx};
});

rails没有应用js加载器,一方面是新版本的rails的asset pipe会将所有的js文件打包为一个js文件,没有多个js加载的状态,另一方面turbolink使用褒贬参半的所谓pjax技术,默认链接改为ajax方式,只获取html的bod部分,head部分不变动,使js的加载只在第一次打开网站时进行。


案例一: 加载 JavaScript 文件

 <script src="./js/require.js"></script> 
   <script> 
  require(["./js/a.js", "./js/b.js"], function() { 
       myFunctionA(); 
       myFunctionB(); 
    }); 
   </script>

require 方法里的这个字符串数组参数可以允许不同的值,当字符串是以”.js”结尾,或者以”/”开头,或者就是一个 URL 时,RequireJS 会认为用户是在直接加载一个 JavaScript 文件,否则,当字符串是类似”my/module”的时候,它会认为这是一个模块,并且会以用户配置的 baseUrl 和 paths 来加载相应的模块所在的 JavaScript 文件。配置的部分会在稍后详细介绍。

这里要指出的是,RequireJS 默认情况下并没有保证 myFunctionA 和 myFunctionB 一定是在页面加载完成以后执行的,在有需要保证页面加载以后执行脚本时,RequireJS 提供了一个独立的 domReady 模块,需要去 RequireJS 官方网站下载这个模块,它并没有包含在 RequireJS 中。有了 domReady 模块,案例一 的代码稍做修改加上对 domReady 的依赖就可以了。

案例二: 页面加载后执行 JavaScript

 <script src="./js/require.js"></script> 
   <script> 
  require(["domReady!", "./js/a.js", "./js/b.js"], function() { 
       myFunctionA(); 
       myFunctionB(); 
    }); 
   </script>

执行案例二的代码后,通过 Firebug 可以看到 RequireJS 会在当前的页面上插入为 a.js 和 b.js 分别声明了一个 < script> 标签,用于异步方式下载 JavaScript 文件。async 属性目前绝大部分浏览器已经支持,它表明了这个 < script> 标签中的 js 文件不会阻塞其他页面内容的下载。

案例三:RequireJS 插入的 < script>

 <script type="text/javascript" charset="utf-8" async="" data-requirecontext="_" 
 data-requiremodule="js/a.js" src="js/a.js"></script>

使用 RequireJS 来定义 JavaScript 模块

这里的 JavaScript 模块与传统的 JavaScript 代码不一样的地方在于它无须访问全局的变量。模块化的设计使得 JavaScript 代码在需要访问”全局变量”的时候,都可以通过依赖关系,把这些”全局变量”作为参数传递到模块的实现体里,在实现中就避免了访问或者声明全局的变量或者函数,有效的避免大量而且复杂的命名空间管理。

如同 CommonJS 的 AMD 规范所述,定义 JavaScript 模块是通过 define 方法来实现的。

下面我们先来看一个简单的例子,这个例子通过定义一个 student 模块和一个 class 模块,在主程序中实现创建 student 对象并将 student 对象放到 class 中去。

案例四: student 模块,student.js

 define(function(){ 
   return { 
    createStudent: function(name, gender){ 
       return { 
         name: name, 
         gender: gender 
       }; 
    } 
   }; 
 });

案例五:class 模块,class.js

 

define(function() { 
 var allStudents = []; 
    return { 
      classID: "001", 
      department: "computer", 
      addToClass: function(student) { 
      allStudents.push(student); 
      }, 
      getClassSize: function() { 
      return allStudents.length; 
      } 
    }; 
   } 
 );

案例六: 主程序

 require(["js/student", "js/class"], function(student, clz) { 
 clz.addToClass(student.createStudent("Jack", "male")); 
 clz.addToClass(student.createStudent("Rose", "female")); 
 console.log(clz.getClassSize()); // 输出 2 
 });

student 模块和 class 模块都是独立的模块,下面我们再定义一个新的模块,这个模块依赖 student 和 class 模块,这样主程序部分的逻辑也可以包装进去了。

案例七: 依赖 student 和 class 模块的 manager 模块,manager.js

 

define(["js/student", "js/class"], function(student, clz){ 
 return { 
  addNewStudent: function(name, gender){ 
  clz.addToClass(student.createStudent(name, gender)); 
    }, 
  getMyClassSize: function(){ 
  return clz.getClassSize(); 
  } 
   }; 
 });

案例八:新的主程序

 require(["js/manager"], function(manager) { 
 manager.addNewStudent("Jack", "male"); 
 manager.addNewStudent("Rose", "female"); 
 console.log(manager.getMyClassSize());// 输出 2 
 });

通过上面的代码示例,我们已经清楚的了解了如何写一个模块,这个模块如何被使用,模块间的依赖关系如何定义。还是有一些使用技巧需要提示一下:

尽量不要提供模块的 ID,如 AMD 规范所述,这个 ID 是可选项,如果提供了,在 RequireJS 的实现中会影响模块的可迁移性,文件位置变化会导致需要手动修改该 ID。

每个 JavaScript 文件只定义一个模块,模块名称和文件路径的查找算法决定了这种方式是最优的,多个的模块和文件会被优化器进行优化。 避免模块的循环依赖,如果实在避免不了,可以模块中加上对”require”模块的依赖,在代码中直接用

require(”dependencyModuleName”)

配置 RequireJS:

前面的介绍中,我们似乎忽略了一个基本问题,模块名字是怎么来的?当我在 require 一个模块时,这个模块是如何映射到具体的 JavaScript 文件上去?这就涉及到如何配置 RequireJS。

最简化的加载 RequireJS 的方式如案例2 所示,在这种情况下,我们没有指定一个 baseUrl 和 paths 给 RequireJS,如果通过如案例10 所示方式,则 data-main 指定了一个在当前 index.html 目录并行的文件夹下的 /js/main.js 作为程序入口,而 /js 目录也将作为 baseUrl 在其他模块定义时候使用。

案例九:载入 require.js

 <script data-main="js/main" src="scripts/require.js"></script>

因此,我们前面示例中的所有模块依赖,都可以去掉”js/”,直接写 ”student”, ”class”,”manager” 等。 一种更为直接的方式显示指定 baseUrl 和 paths 就是利用 require.config 来设置这些参数。如案例十 所示。

案例十. 配置 RequireJS

 <script type="text/javascript" src="./js/require.js"></script> 
 <script type="text/javascript"> 
 require.config({ 
  baseUrl: "./js", 
  paths: { 
    "some": "some/v1"
  }, 
 waitSeconds: 10 
 }); 
 require( ["some/module", "my/module", "./js/a.js"], 
  function(someModule,  myModule) {} 
 ); 
 </script>

baseUrl指明的是所有模块的 base URL,比如”my/module”所加载的 script实际上就是 /js/my/module.js。注意,以 .js 结尾的文件加载时不会使用该 baseUrl,它们仍然会使用当前 index.html所在的相对路径来加载,所以仍然要加上”./js/”。如果 baseUrl没有指定,那么就会使用 data-main中指定的路径。

paths 中定义的路径是用于替换模块中的路径,如上例中的 some/module 具体的 JavaScript 文件路径是 /js/some/v1/module.js 。 waitSeconds 是指定最多花多长等待时间来加载一个 JavaScript 文件,用户不指定的情况下默认为 7 秒。

另外一个重要的配置是 packages,它可以指定其他符合 CommonJS AMD 规范的目录结构,由此带来了丰富的扩展性。如 Dojo、jQuery 等的模块也可以通过该配置来让 RequireJS 加载。

其他可配置的选项还包括 locale、context、deps、callback等,有兴趣的读者可以在 RequireJS 的官方网站查阅相关文档。

相关文章

  • ThinkJS中如何使用MongoDB的CURD操作

    ThinkJS中如何使用MongoDB的CURD操作

    最近因为心血来潮想要试试thinkJS操作mongoDB,去官方文档看了看,默认是只给了mysql的配置,源代码也是没有配置mongo的,只有一个官方案例,无奈只能自己学习了,下面是自己的一些学习总结,有需要的朋友们可以参考借鉴,下面来一起看看吧。
    2016-12-12
  • 浅谈轻量级js模板引擎simplite

    浅谈轻量级js模板引擎simplite

    这篇文章主要介绍了浅谈轻量级js模板引擎simplite的简介和用法的相关资料,需要的朋友可以参考下
    2015-02-02
  • 浅谈JavaScript前端开发的MVC结构与MVVM结构

    浅谈JavaScript前端开发的MVC结构与MVVM结构

    以AngularJS为代表的MVVM结构框架或库这两年来在前端界真是火到不行,大有对抗传统jQuery绑定思想的趋势,这里我们结合传统的MVC结构,来浅谈JavaScript前端开发的MVC结构与MVVM结构
    2016-06-06
  • 交互式可视化js库gojs使用介绍及技巧

    交互式可视化js库gojs使用介绍及技巧

    这篇文章主要介绍了如何使用可视化库gojs及使用时的小技巧,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2022-01-01
  • require.js深入了解 require.js特性介绍

    require.js深入了解 require.js特性介绍

    这篇文章主要介绍了require.js深入了解,require.js特性介绍,本文讲解了require.js和CommonJS的兼容、CDN回退、循环依赖、BaseUrl、JSONP等内容,需要的朋友可以参考下
    2014-09-09
  • Highcharts入门之基本属性

    Highcharts入门之基本属性

    Highcharts是一个用纯JavaScript编写的一个图表库,之前小编发了一篇介绍Highcharts的文章,那么本文将进一步的介绍Highcharts的基本属性,有需要的可以参考学习。
    2016-08-08
  • Highcharts学习之数据列

    Highcharts学习之数据列

    数据列配置是 Highcharts 最复杂也是最灵活的配置,如果说 Highcharts 是灵活多变,细节可定制的话,那么数据列配置就是这个重要特性的核心。
    2016-08-08
  • JS日程管理插件FullCalendar简单实例

    JS日程管理插件FullCalendar简单实例

    JS日程管理插件FullCalendar是一款基于jQuery的日历日程插件,适用于各种日程安排、工作计划等场景,您可以很方便的查看查看待办事项,标记重要事项以及绑定点击和拖动事件,能快速的整合到您的项目中,本文将简单介绍FullCalendar的使用
    2017-02-02
  • fullCalendar中文API官方文档

    fullCalendar中文API官方文档

    FullCalendar是一款基于jQuery的日历插件,适用于各种日程安排、工作计划等场景,本文是fullCalendar官方文档的中文版,主要介绍了fullCalendar的具体属性与方法,大家可以参考一下
    2017-02-02
  • Three.js学习之几何形状

    Three.js学习之几何形状

    本文利用实例代码详细介绍了一些Three.js中的几何形状的实现过程,包括立方体、平面与球体,有需要的朋友们可以学习下。
    2016-08-08

最新评论