requireJS使用

模块化编程之requirejs

requirejs的好处

  1. 声明不同js文件之间的依赖
  2. 可以按需.并行.延时载入js库(延时加载)
  3. 可以让我们的代码以模块化的方式组织
  4. 代码的管理和性能优化.提高代码的速度和质量
  5. 相对简单,不复杂

AMDCMD的区别

AMD:提前执行, 推崇依赖就近(requireJS在推广中对模块化定义的规范化产出)
CMD:延迟执行, 推崇依赖前置(SeaJS在推广过程中对模块定义的规范化产出)

不过 RequireJS 从 2.0 开始,也改成可以延迟执行(根据写法不同,处理方式不同)。CMD 推崇 as lazy as possible.

// CMD  需要A模块就requireA模块 ,需要B模块就requireB模块
define(function(require, exports, module) {
var a = require('./a')
a.doSomething()
// 此处略去 100 行
var b = require('./b') // 依赖可以就近书写
b.doSomething()
// ...
})
// AMD 默认推荐的是
define(['./a', './b'], function(a, b) { // 依赖必须一开始就写好
a.doSomething()
// 此处略去 100 行
b.doSomething()
...
})

虽然 AMD 也支持 CMD 的写法,同时还支持将 require 作为依赖项传递,但 RequireJS 的作者默认是最喜欢上面的写法,也是官方文档里默认的模块定义写法。

我们还可以使用 optimize 进行代码(JS,CSS)压缩,使用optimize代码压缩前 ,我们需要完成这些事情
1.下载r.js
2. 新建一个配置文件, 例如build.js(推荐使用这种方式),这样配置更方便, 具体配置可以自行百度.

当配置完成后,进入需要压缩的文件目录 , 运行

node tools/r.js -o tools/build.js

就开始代码压缩了, 压缩完成后, 会在当前目录生成一个www-built文件, 里面有个app.js , 这个app.js里面就是所有项目文件中的js与css代码压缩后的样子了.

分享到