傻瓜看的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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,084评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,623评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,450评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,322评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,370评论 6 390
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,274评论 1 300
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,126评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,980评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,414评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,599评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,773评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,470评论 5 344
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,080评论 3 327
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,713评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,852评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,865评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,689评论 2 354

推荐阅读更多精彩内容