RequireJS简要备忘

为什么要使用require.js

1. 异步加载文件，简化依赖关系

2. 模块化开发， 一个文件就是一个模块，减少全局变量

如何使用

1. define定义模块

2. require加载模块

tips:
一般不写模块名，让自动打包来完成
requireJS以一个相对于baseUrl的地址来加载所有代码

加载机制

1. RequireJS使用head.appendChild()将每一个依赖加载为一个script标签。【意味着可以跨域访问】

2. 加载即执行

配置模块路径

1. paths-映射不放于baseUrl下的模块名

    requirejs.config({
        baseUrl: '/js',
        paths: {
            'jquery': 'lib/jquery' //模块名：模块路径
        }
    })
    
    *** 另一种方式 ***
    requirejs.config({
        baseUrl: '/js',
        paths: {
            'jquery': [
                'lib/jquery2',  //首先加载的模块
                'lib/jquery'    //第一个加载失败后的备用文件
            ]
        }
    })
   

定义模块

1. 函数式定义

    // 最佳实践：不写死模块名, 即'helper'部分
    // 依赖的模块可有可无, 即['jquery']部分
    define('helper', ['jquery'], function($){
        return{
            trim: function(str) {
                return $.trim(str);
            }
        }
    })
   

2. 定义简单的对象

    define({
        userName: '',
        name: ''，
        eamil: ''
    })
   

shim > 配置不支持AMD的模板

shim({
    'modernizr': {              //不支持AMD的模块
        deps: ['jquery'],       //依赖的模块
        exports: 'Modernizr',   //全局变量作为模块对象
        init: function($) {     //初始化函数，返回的对象代替exports作为模块对象
            return $; 
        }
    }
})

其它常用配置

1. waitSeconds

   下载js等待的时间，默认7秒；如果设置为0，则禁止等待超时。

2. urlArgs

   下载文件时间，在URL后面增加额外的query参数

更多内多参考

1. RequireJS官网：http://requirejs.org/
2. RequireJS和AMD规范：http://javascript.ruanyifeng.com/tool/requirejs.html