前端模块化和RequireJS的用法

模块化

CommonJS 规范

引用模块：

require('./module')

定义模块：

module.exports = {}

例如：

Nodejs

AMD规范

引用模块：

require([module], callback)

定义模块：

define([module], function(module) {})

例如：

requirejs

CMD

引用模块：

定义模块：

define(function(require, exports, module) {
  var $ = require('jquery.js')
})
           

例如：

seajs

AMD和CMD区别

AMD推崇依赖前置，在定义模块的时候就要声明其依赖的模块

CMD推崇依赖就近，在用到某个模块的时候再去require

ES6

引用模块：

import module

定义模块：

export module

RequireJS的用法

• 实现js文件的异步加载，避免网页失去响应
• 管理模块之间的依赖性，便于代码的编写和维护

1. 加载RequireJS

避免加载RequireJS造成页面失去响应：

注： IE不支持

async

只支持

defer

2. 主模块

采用AMD规范定义的

require()

函数

// main.js

require(['moduleA', 'moduleB', 'moduleC'], function (moduleA, moduleB, moduleC){

　　// some code here

})
           

第一个参数是一个数组表示所依赖的模块，第二个参数是一个回调函数

3. 模块加载

使用

require.config()

方法，我们可以对模块的加载行为进行自定义。

require.config()

就写在主模块

main.js

的头部。参数就是一个对象