RequireJS用法解析

1、概述
requirejs 的相关说明:

RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一。最新版本的RequireJS压缩后只有14K,堪称非常轻量。它还同时可以和其他的框架协同工作,使用RequireJS可以提升前端代码质量。

主要特点:
  • 异步加载模块
  • 按依赖顺序加载
  • 模块依赖前置

2、define 和 require

在整个require中,主要的方法为:require和define

(1)define定义模块

函数方法:

define(id?, dependencies?, factory)

总共有三个参数:id 定义的模块名字,一般在config 中会定义;dependencies为需要的依赖模块;factory为定义的模块。其中factory 为必填,另外两个为非必填项。
根据上面的参数配置可以看出,define 总共分为两种,第一种为独立模块,不依赖其他模块。第二种为非独立模块,需要依赖其他模块。
注:define定义的模块可以返回任何值,不限于对象。

独立模块

一种通过一个对象简易定义:

define({
    name: "aimee",
  	method1: function() {},
    method2: function() {}
})

*注:这样定义的对象如果被多处引用,那么引用的地方会共享这个对象的引用。
另一种通过一个函数来定义副本对象模块:

define(function () {
    //Do setup work here
    return {
	    name: "aimee",
	  	method1: function() {},
	    method2: function() {}
	}
})

这种自由度更高,可以在函数中处理其他逻辑。

非独立模块
需要引入依赖模块,在其他模块加载完,定义自己的模块,此时返回的method方法中包含模块1 和模块2的函数的调用。

define(['module1', 'module2'], function(m1, m2) {
    return {
        method: function() {
            m1.methodA();
			m2.methodB();
        }
    }
})

当定义多个时,可以通过function 函数里接受一个require默认参数来处理。

define(
    [       'dep1', 'dep2', 'dep3', 'dep4', 'dep5', 'dep6', 'dep7', 'dep8'],
    function(dep1,   dep2,   dep3,   dep4,   dep5,   dep6,   dep7,   dep8){
        ...
    }
);

可以这样写

define(
    function (require) {
        var dep1 = require('dep1'),
            dep2 = require('dep2'),
            dep3 = require('dep3'),
            dep4 = require('dep4'),
            dep5 = require('dep5'),
            dep6 = require('dep6'),
            dep7 = require('dep7'),
            dep8 = require('dep8');

            ...
    }
})
(2)require 调用模块

通过define定义模块后,可以使用require来调用模块。

require(dependencies?, factory, errorCallback)

require的参数有:dependencies 为依赖模块,非必填;factory 处理函数,必填;errorCallback 为 错误的回调,非必填;

require(
	['foo', 'bar'], 
	function ( foo, bar ) {
        foo.doSomething();
        bar.doSomething();
	}function(err){
		console.log(err)
	}
);

上述例子,在foo 和 bar 模块加载完成后,再在函数中执行foo 和 bar 的方法,如果有错误则到错误的回调函数中,并接受一个error对象作为参数。

全局error事件监听,所有没有被上面的方法捕获的错误,都会被触发这个监听函数。

requirejs.onError = function (err) {
    // ...
};

define中require异步加载

例子中,define定义了一个模块,其中foobar 需要依赖 foo 和bar 模块的方法,由于require 为异步,此时return 的结果可以通过isReady 来判断是否加载完成。

define(function ( require ) {
    var isReady = false, foobar;
 
    require(['foo', 'bar'], function (foo, bar) {
        isReady = true;
        foobar = foo() + bar();
    });
 
    return {
        isReady: isReady,
        foobar: foobar
    };
});

可以用过promise 来实现

define(function ( require ) {
    var obj;
 
    require(['foo', 'bar'], function (foo, bar) {
        isReady = true;
        obj.resolve({foobar:foo() + bar()});
    });
 
    return obj.promise()
});

上面代码返回一个promise对象,可以在该对象的then方法,指定下一步的动作。

小结
require 和 define 函数内部机制差不多,不一样的地方是 define 的回调函数需要有 return 语句返回模块对象,这样 define 定义的模块才能被其他模块引用;require 的回调函数不需要 return 语句。

3、requirejs config 配置

paths:
可以配置模块的引用路径,可以本地相对路径,也可以是外部路径,可以提供多个路径,当第一个失败时,会使用第二个路径。
简单配置如下

require.config({
    paths: {
        jquery: [
            '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js',
            'lib/jquery'
        ]
    }
});

baseUrl
baseUrl 指定了一个目录,然后requirejs基于这个目录来寻找依赖的模块。
可以通过config 来配置,也可以通过引入requirejs 文件的data-main属性定义。

shim:
用于配置在脚本/模块外面并没有使用RequireJS的函数依赖并且初始化函数。假设underscore并没有使用 RequireJS定义,但是你还是想通过RequireJS来使用它,那么你就需要在配置中把它定义为一个shim。

<script src="js/require.js" data-main="js/main.js"></script>

或者

requirejs.config({
	baseUrl: 'js'
});
4、插件

requirejs 提供多种插件,具体插件详情可以查看文档 插件类型

define([
    'backbone',
    'text!templates.html'
], function( Backbone, template ){
   // ...
});

以上为text 插件,通过在模块名前添加text!来指定插件类型,在回调函数中能够通过template来获取模板的内容,格式为字符串。

5、优化器r.js

requireJS提供一个基于node.js的命令行工具r.js,用来压缩多个js文件。它的主要作用是将多个模块文件压缩合并成一个脚本文件,以减少网页的HTTP请求数。
具体实现可以参考官方文档

参考:

官方文档api: requirejs.org
官方文档git:requirejs-git

你可能感兴趣的:(小插件)