傻瓜看的requireJS说明书

开始记录...

1,我们的目录结构大概是这样:

Paste_Image.png

2,index.html文件内容,加载require库文件,看到data-main没有,那个就是我们整个JS逻辑的开始编写地方,data-main后面的值一般都是省略.js后缀,可以也写成main.js。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>requireJS使用说明书</title>
    <script data-main="main" src="require.js"></script>
</head>
<body>
    使用这个JS库,让模块之间加载和调用更加明确。
    1,data-main为函数入口
    2,define定义模块
    3,通过return或者exports返回
    4,require.config为配置选项
</body>
</html>

3,来瞅瞅main.js里的内容,具体看注释,需要注意的是我们的返回值,思考一下为什么是对象。

//定义配置文件
requirejs.config({
    //查找所有模块的根路径
    baseUrl: './js',
    //设置相对路径,映射到不能直接在baseUrl下找到的模块名
    paths:{
        "jquery":"lib/jquery",
        "jquery-private":"lib/jquery-private"
    },
    //为那些没有使用 define() 声明依赖项、没有设置模块值,暴露出全局变量
    shim:{
    },
    // 对于给定的相同的模块名,加载不同的模块,而不是加载相同的模块。
    map:{
        '*': { 'jquery': 'jquery-private' },
        'jquery-private': { 'jquery': 'jquery' }
    }
});

//main文件为入口,也就是我们逻辑的开始地方
require(["a","b","c","d","e","f","jquery"], function(a,b,c,d,e,f,$) {
    //a文件,返回一个对象
    var Module_A = a;
    console.log(Module_A.size);

    //b文件,返回一个函数
    var Module_B = b;
    Module_B.sayB();

    //c文件,依赖B文件,返回一个对象
    var Module_C = c;
    Module_C.sayC();

    //d文件,引入其他的cmd规范文件,然后重新拼装我们需要的
    var Module_D = d;
    Module_D();

    //e文件,引入require,然后调用其他模块
    var Module_E = e;
    console.log(Module_E.e);

    //f文件,引入exports,不通过return返回
    var Module_F = f;
    console.log(Module_F.f.F);
 //查看jQuery对象
    console.dir($)
});

4,我们把这几a,b,c,d,e,f里的JS文件内容粘出来看看

//a.js,很显然返回了一个对象,键值对。
define({
    color:"red",
    size:12
});
//b.js,定义一个匿名函数(下面还有两个),这里随便返回一个对象
define(function () {
    var B = "我是B中的一个字符串变量";
    function sayB(){
        console.log("我是B模块中的sayB方法");
    }
    return {
        B:B,
        sayB:sayB
    }
});
//c.js,引入b文件依赖,然后随便返回一个对象
define(["b"],function(b){
    var B = b;
    var C = "我是C的字符串变量";
    return {
        C:C,
        sayC:B.sayB
    } 
});
//d.js,具体看匿名函数中的参数,把其他模块弄进来在重新拼装
define(function(require,exports,module){
    var a = require("a");
    var b = require("b");
    return function(){
        console.log(b.B);
    };
});
//e.js,引入require,再调用其他define的模块
define(function(require){
    var a = require("a");
    return {
        e:a.color
    }
});
//f.js,引入exprots模块,这样我们可以不用return进行返回了
define(['exports'],function(exports){
    exports.f = {F:"我是F的字符串"};
});

5,对于那些不冲突(重名,不依赖)的库,可以通过paths(配置选项里)直接定义,左边名字:右边路径

6,对于依赖的需要在shim里进行重新暴露,eg:

shim: {
        'backbone': {
           //deps需要加载的依赖项的数组
            deps: ['underscore', 'jquery'],
           //导出名称
            exports: 'Backbone'
        },
        'underscore': {
            exports: '_'
        },
        'foo': {
            deps: ['bar'],
            exports: 'Foo',
            init: function (bar) {
                return this.Foo.noConflict();
            }
        }
    }
});

具体:http://requirejs.org/docs/api.html#config-shim

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 导语: 之前一直有听说RequireJS,但是一直都没机会去了解,只知道它是一个给js做模块化的API。最近在做R...
    wuqke阅读 41,011评论 11 78
  • RequireJs已经流行很久了,它提供了以下功能: 声明不同js文件之间的依赖 可以按需、并行、延时载入js库 ...
    小豌豆书吧阅读 3,682评论 1 1
  • 参考资料 RequireJS 中文网Javascript模块化编程(三):require.js的用法——阮一峰 前...
    BeYanJin阅读 12,034评论 2 12
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,080评论 25 709
  • 二十多岁不努力经营自己,该成长的成长,该脱贫的脱贫,却用来急着恋爱和嫁人,结果呢?三十多岁就被生活琐事、孩子房子、...
    丁菇凉阅读 1,706评论 0 2

友情链接更多精彩内容