requirejs 不完全指南

# requirejs 不完全指南

require.js要求，每个模块是一个单独的js文件。这样的话，如果加载多个模块，就会发出多次HTTP请求，会影响网页的加载速度。因此，require.js提供了一个优化工具，当模块部署完毕以后，可以用这个工具将多个模块合并在一个文件中，减少HTTP请求数

data-main属性的作用

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

//主播块的一般写法

//设置模块路径
require.config({　　
    //设置模块根目录
    // c: "./",

    //设置引入模块路径 默认文件后缀名为js，请在模块的相对路径这一块省略后缀名
    paths: {　　　　　　
        "aa": "aa",
　　　　 "underscore": "underscore.min",
　　　　 "backbone": "backbone.min"　　　　
    }　　
});
　
require(['aa', 'bb', 'cc'], function (aa) {　　　
   console.log(aa.aa);
   console.log(aa.a());
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

data-main属性的作用是，指定网页程序的主模块。在上例中，就是js目录下面的main.js，这个文件会第一个被require.js加载。由于require.js默认的文件后缀名是js，所以可以把main.js简写成main

require example

require.js加载的模块，采用AMD规范。也就是说，模块必须按照AMD的规定来写具体来说，就是模块必须采用特定的define()函数来定义。如果一个模块不依赖其他模块，那么可以直接定义在define()函数之中

定义方式

　　// math.js
　　define(function (){
　　　　var add = function (x,y){
　　　　　　return x+y;
　　　　};
　　　　return {
　　　　　　add: add
　　　　};
　　});

1
2
3
4
5
6
7
8
9
10

# 加载方式

(1)独立模块加载

//  写法1 
define({
    method1: function() {},
    method2: function() {},
});
//  写法2
define(function () {
    return {
        method1: function() {},
        method2: function() {},
    };
});

1
2
3
4
5
6
7
8
9
10
11
12

(2)非独立模块加载

    //写法1
　　require(['math'], function (math){
　　　　alert(math.add(1,1));
　　});

1
2
3
4

    //写法2
    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');
        }
    });

1
2
3
4
5
6
7
8
9
10
11
12
13
14

如果这个模块还依赖其他模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性

define(['myLib'], function(myLib){
　　　　function foo(){
　　　　　　myLib.doSomething();
　　　　}
　　　　return {
　　　　　　foo : foo
　　　　};
　　});

1
2
3
4
5
6
7
8

上次更新: 2023/12/18, 15:00:26

← backbone快速入门 Jenkins 从安装到自动部署h5→