requireJs随笔

RequireJS以一个相对于baseUrl的地址来加载所有的代码。 页面顶层<script>标签含有一个特殊的属性data-main，require.js使用它来启动脚本加载过程，（以data-main="js/main"为例）

可像如下进行配置，如果不进行配置将以data-main定义的文件js为baseUrl,在js文件下寻找加载模块（data-main如果不定义，会在index.html同级js查找）

//main.js

require.config({
    baseUrl:'js/assets',//配置baseUrl
    paths : {

//  ../返回上一级

//./以当前目录为起始（/以根目录为起始）

        'jquery' : 'jquery-1.6.1.min',//在baseUrl下的js，省略后缀.js
        'a' : 'a',
        'footable':'footable.min',
    },

    shim: {

       // 非AMD模块输出,shim成可用模块，如下配置，就可在其他模块中引用jqury模块，用$表示

        'jquery' : {
      exports : '$'

    },

        //插件形式的非AMD模块，我们经常会用到jquery插件，而且这些插件基本都不符合AMD规范，这时候就需要将插件shim'到jquery中：

    'footable' : ['jquery'],
    }
})

//define申明模块

1.简单值对：如果一个模块a仅含值对，没有任何依赖，则在define()中定义这些值对就好了：

define({name:'xm',height:153})

引入该模块时，该对象以参数形式传入回调函数

require(['a'],function(a){

console.log(a);//{name:'xm',height:153}

})

2.没有依赖的函数式定义

define(function(){

    //进行的操作

    return XX;

})

引入该模块时，同上

3.存在依赖的函数式定义

第一个参数是依赖的名称数组；第二个参数是函数

define(['a'],function(a){

    //进行的操作

    return XX;

})

4.将模块定义为一个函数：对模块的返回值类型并没有强制为一定是个object，任何函数的返回值都是允许的。

define(['a'],function(a){

    //进行的操作

    return function(params){...}

})

//引入配置

直接成会造成同步加载时，以data-main定义的文件为baseUrl,在当前文件目录中寻找引入的依赖（寻找失败）

异步加载时，require is not defined,加载失败

1.head插入<script data-main="js/main" src='js/require.js' ></script>

将<script data-main="js/main" src='js/require.js' defer async="true"></script>放到main.js后面

2.头部的script标签改为

<script src='js/require.js'></script>

<script src="js/main.js"></script>

直接贼当前页面require