RequireJS使用范例

突然想记录点前端的东西。接触RequireJS是2012年,那时候觉得这个前端的模块化概念很酷,随即也在很多项目中使用了。现在JS的模块化已经随处可见了。基本上概念没什么变化,这个库也相当的容易上手,这里就用RequireJS写一个简单的例子。

先介绍下模块化概念,目前Javascript主要的模块化规范有两种,AMD和CommonJS。CommonJS是模块同步加载,即加载完后才会执行后续的代码,如同Java的import一样,所以比较适合后端的开发,比如NodeJS的模块系统就是根据CommonJS规范实现的。前端不一样,因为会有网络延迟,所以即便有一个(远程的)JS没有加载成功,你也要确保网页不会卡在那里,所以就需要异步模块加载功能。这就引入了AMD规范,全称是”Asynchronous Module Definition”。AMD一般的模块加载方式如下:

可以看到,它把依赖待加载模块的代码,放到了回调函数中,而其他代码不会被block。现在,让我们看看RequireJS是怎么做的。

  1. 我们建立一个工程,目录结构如下
  2. requirejs
      |- js
      |    |- app
      |    |    |- app.js        // 自定义app模块
      |    |    |- math.js       // 自定义math模块
      |    |- lib
      |    |    |- require.js    // RequireJS库
      |    |- main.js            // 自定义的RequireJS入口
      |- index.html              // 首页
    

    其中,RequireJS库可从官网http://requirejs.org/docs/download.html下载。你可以选择”Minified”版本,也就是缩小化后的文件。

  1. 编写首页,引入RequireJS库
  2. 我们在页面最后加载本地的”require.js”文件(为什么我就不说了吧),同时指定”data-main”属性指向”js”目录下的”main.js”,这里就指明了RequireJS的入口文件。注意入口文件后缀名”.js”可以省去,RequireJS默认会找JS文件。

  1. 让我们先写两个模块,首先”math.js”
  2. “define”方法就是用来定义模块,该方法接受一个匿名函数,并返回一个对象。这个对象就包含了该模块对外开放的接口。本例中,”math.js”开放了”multiply”接口,实现两数相乘的功能。

    我们再写一个”app.js”

    大家注意到,这个模块的”define”方法多了一个数组参数。这个参数指明了这个”app”模块依赖于其他哪些模块,并且通过后面匿名函数的参数,将那些依赖的模块传递进来。数组里可以定义多个依赖模块名,同时后面的匿名函数也可以有多个模块参数,并与数组中定义的模块名一一对应。本例中,”app.js”依赖”math”模块,并利用”math”中的”multiply”方法,实现求平方的”power”方法。”app”模块对外开放了”power”接口。

  1. 现在让我们看下入口文件”main.js”该怎么写
  2. 代码中,”require.config()”定义了这个工程所需要的模块,并指明模块文件的具体位置。而”require()”方法就指明这个工程所依赖的模块及加载模块后所需执行的操作。”require”方法的参数同”define”方法基本一致:第一个数组参数指明所依赖的模块名称,第二个参数匿名函数传入具体的模块对象,匿名函数的参数同数组里的模块名一一对应。本例中,”require”方法会在页面上显示5的平方值,并在控制台打印出当前加载的jquery库的版本。

  1. 我们来看下运行结果
  2. 将工程放到你的web server根目录下,然后打开地址http://localhost/requirejs,有没有看到你想要的结果呢?

本例中的代码可以在这里下载

发表评论

电子邮件地址不会被公开。 必填项已用*标注