markdown JavaScript的模块化编程

Posted 2021-05-06

# requireJs入门

## 一.基本使用

### 1.define定义模块

```JavaScript
//helper.js:

define('helper',['jquery'],function($){
  return {
    trim : function(str){
      return $.trim(str);
    }
  }
})
```

各个部分的解释：<br>
![define定义模块]()<br>

### 2.require加载模块

```JavaScript
//app.js:

require(['helper'],function(helper){
  var str = helper.trim('  amd  ');
  console.log(str);
})
```

![require加载模块]()<br>

### 3.加载文件
requirejs以一个相对于`baseUrl`的地址（也就是路径）来加载所有代码<br>

如果只是单纯在html文件中引用requirejs，那么这个路径就是html文件所在的目录；<br>
如果是使用了`data-main`这个属性，路径就是相对于`data-main`设置的属性值(注意data-main属性值可以不加.js，会默认自动添加)<br>
还有一种方法就直接在加载模块的js文件上配置`baseUrl`：<br>

```JavaScript
//app.js:

requirejs.config({
  baseUrl : '/js'
});

require(['helper'],function(helper){
  var str = helper.trim('  amd  ');
  console.log(str);
})
```

### 4.加载机制
requirejs使用`head.appendChild()`将每一个依赖加载为一个script标签<br>
这意味着模块文件可以跨域访问<br>

另外，requirejs加载后就立即执行<br>


## 二.配置模块路径

假如，各个文件的内容如下：<br>

```JavaScript
//app.js:

requirejs.config({
  baseUrl : '/js'
});

require(['helper'],function(helper){
  var str = helper.trim('  amd  ');
  console.log(str);
})



//helper.js:

define('helper',['./lib/jquery'],function($){
  return {
    trim : function(str){
      return $.trim(str);
    }
  }
});
//注意此时jquery.js的路径改变为/js/lib
```
如果这样使用，最后模块会是`undefined`的对象<br>

如果进入jQuery源代码就可以知道，源码中指定的模块名称是`jquery`，而在声明的代码中不是，所以发生了问题<nt>

![jquery模块名错误]()<br>

要解决这个问题可以使用一个`paths`参数:<br>

```javascript
//app.js
requirejs.config({
  baseUrl : '/js',
  paths : {
    'jquery' : './lib/jquery'
  }
});
//'jquery' :模块名   模块路径: './lib/jquery'
```
另外要补充的是，paths参数不一定是一个对象，还可以是一个数组，数组的第一个选项就是首选加载模块，比如可以是cdn，第二个可以是本地文件(备用)<br>


## 三.定义模块

#### 函数式定义
也就是前面的helper.js的方式<br>

#### 定义简单的对象

```javascript
define({
  user : 'xx',
  age : '18',
  sex : 'male'
})
```

## 四.配置不支持amd的库和框架

比如像modernizr、bootstrap这些。<br>

可以使用shim参数配置<br>

![shim参数]()<br>

加载不支持AMD的库，如modernizr：<br>

```javascript
shim:{
  'modernizr' : {
      exports : 'Modernizr'
  }
}
//将全局变量Modernizr导入为模块
```

加载不支持AMD的框架，比如bootstrp：<br>

```javascript
shim : {
  'bootstrap' : ['jquery']
}
//加载jQuery依赖
```

## 五.其他配置选项

### 加载不同版本的库

```javascript
map : {
  'app/api' : {
    'jquery' : './lib/jquery'
  },
  'app/api2' : {
    'jquery' : './lib/jquery2'
  }
}
```
当app/api模块里加载jQuery模块时，将加载jquery.js<br>
当app/api2模块里加载jQuery模块时，将加载jquery2.js<br>

### 超时
`waitSeconds`：下载js等待时间，默认为7秒；如果设置为0，，则禁用等待超时<br>

`urlArgs`：下载文件时，在url后面增加额外的query参数<bR>
ag: `urlArgs : '_=' + new Date().getTime()`<br>