RequireJS 填坑

发表于 | 分类于

什么是 RequireJS — 自己 Google 去。

Start

点我去官网

刚认识用 RequireJS 之前，我还不知道前端还能这样模块化编程，尽管我是个渣，但当我第一次用上之后就回不去以前了，模块化管理你的 JS 是很有必要的，有利于前端工程的规范化管理，页面也不用写很多 link 标签和 script 标签了。

AMD

由于 RequireJS 是基于 AMD 规范的，我们需要来了解它是怎么使用的。

1
2
3
4
//hello.js
define(['jquery'],function($) {
    //$('body')
})

这是一个基于的 AMD 规范定义的模块，它接收两个参数，第一个为依赖的字符串数组，第二个为回调的函数。这个例子表明它依赖于 jquery ，RequireJS 在调用加载这个模块时会提前将 jquery 加载进来，并作为参数传进回调函数。

然而我们要怎么使用这个模块呢？

var hello = require(['hello'])

这样就可以将一个 define 模块加载进来，并且使用它。然并卵，我们还是结合实例讲解更容易让人理解。

Hello RequireJS

以往我们调用 JS 无非是使用外联标签 script 将 JS 文件引入，这样无可避免的会出现如下丑陋的场景

1
2
3
<script src="a.js" ></script>
<script src="b.js" ></script>
<script src="c.js" ></script>

可以想象，当你需要引入的 JS 文件越来越多时会是一副什么景象。正确的做法是

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html><html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hello RequireJS</title>
  <script src="require.js" ></script>
</head>
<body>
</body>
<script>
  var a = require('a')
  var b = require('b')
  var c = require('c')
</script>
</html>

怎么样？是否简洁了很多呢？然而还不够，我们希望 JS 代码尽量抽离出 HTML ，所以我们可以这样写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// main.js
define(['a', 'b', 'c'], function(a, b, c) {
})
// index.html
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8">
	<title>Hello RequireJS</title>
	<script data-main="main" src="require.js" ></script>
</head>
<body>
</body>
</html>

实在太简洁了，优美的代码总是让人愉悦，不是么？

开始使用啦

由于我们的实际项目没有这么简单，所以我们需要对 RequireJS 进行一些基础配置先看一下项目目录
project

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// main.js
require.config({
  // 所有的路径会以 baseUrl 为基础    
  baseUrl: 'static/lib',    
  // 定义模块    
  paths: {        
    app: '../js'.        
    jquery: 'jquery-3.0.0'    
  }
})
// js/hello.js
define(['jquery'], function ($) {    
	$('body').append('<p>Hello RequireJS!</p>')
})
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta content="width=device-width, initial-scale=1" name="viewport"/>
  <title>Hello RequireJS</title>
  <script src="static/require.js" ></script>
</head>
<body>
</body>
<script>
require(['static/main'], function () {
	require(['app/hello'])
})
</script>
</html>

完成啦，只需要在 HTML 页面引入 require.js ，并且依赖 main.js 全局配置文件，然后就可以尽情依赖自己的模块了！！
打开 index.html
index

非AMD模块的兼容

我们知道 jquery 有很多优秀的插件，它们都依赖于 jquery ，但是很遗憾的是有很多插件并不支持 AMD 规范，这导致我们依赖这些插件时会遇到一些错误，我们该怎么处理呢？

1
2
3
4
5
6
7
8
require.config({    
  //省略    ...    
  shim: {        
    'jquery-plugin': {
      deps: ['jquery']
    }    
  }
})

RequireJS 提供了 shim 选项为非 AMD 模块进行兼容，我们为 jquery-plugin 插件手动配置了其依赖于 jquery ，这样 RequireJS 会确保 jquery 在 jquery-plugin 之前加载！
是不是很完美呢？附上源码:
requirejs-demo