加载模块一次,需要带有示例

时间:2013-09-29 19:14:03

标签: javascript requirejs

我已经问了类似的问题:Requirejs, what it means "Requirejs loads each module once"
但在那个话题中,没有人回答主要问题,因为我的提问方式错误。

所以我将提供一些简单的例子来说明我的意思:

模块counter.js

1:    define([], function() {
2:        console.log("Executing counter");
3:        var counter = 0;
4:   
5:        return {
6:            increment: function() { counter++; },
7:            get: function() { return counter; }
8:        };
9:    });

模块test1.js

1:    define(['counter'], function(counter) {
2:        console.log("Executing test1");
3:        counter.increment();
4:    });

模块test2.js

1:    define(['counter'], function(counter) {
2:        console.log("Executing test2");
3:        counter.increment();
4:    });

Main.js

1:    require(['test1', 'test2', 'counter'], function(test1, test2, counter) {
2:        console.log("Executing main");
3:        alert(counter.get());
4:    });

因此模块main.js是应用程序的入口点,它将首先加载依赖项“test1”,“test2”和“counter”。 (执行顺序:执行计数器,执行test1,执行test2,执行main)

因此,如果我理解句子“Requirejs加载每个模块一次”,这意味着(例如counter.js)将执行第1行到第9行的代码 ONLY ONCE 除了test1,test2和main模块在其依赖项列表中有计数器之外? 如果这是正确的, test1是“负责”执行计数器模块? 如果这是正确的,在执行计数器后,在内存中将仅一个对象将从计数器返回? 当test2加载计数器时,它将获得那个ONE对象? (换句话说,test2不会再次执行来自计数器的代码,它们将使用现有的计数器对象)? 所以,我在这里创建SINGLETON吗?

最后所有模块都可以通过函数(increment,get)闭包来影响计数器值(在开头,counter = 0)? 当计数器对象存在于内存中时,闭包将处于活动状态?

1 个答案:

答案 0 :(得分:6)

我更改了您的main.js以登录到控制台

require(['test1', 'test2', 'counter'], function(test1, test2, counter) {
        console.log("Executing main");
        console.log(counter.get());
});

另外我有一个index.html

<!DOCTYPE html>
<html>
<head>
    <title>My Counter Demo</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <script data-main="scripts/main" src="scripts/require.js"></script>
</head>
<body>
    <h1>My Counter Demo</h1>
</body>
</html>

加载index.html然后打开Web控制台后我

[22:04:09.077] "Executing counter"
[22:04:09.077] "Executing test1"
[22:04:09.077] "Executing test2"
[22:04:09.077] "Executing main"
[22:04:09.078] 2 

记录消息

为了更清楚地说明发生了什么,我建议替换日志消息

  • Executing counter - &gt; Creating the counter AMD module
  • Executing test1 - &gt; Incrementing the counter in module "test1"
  • Executing test2 - &gt; Incrementing the counter in module "test2"
  • "Executing main" - &gt; Retrieving the counter value in module "main"

我在控制台日志中获得以下结果

[22:16:46.368] file:///C:/Users/User/Documents/requirejs-counter2/css/main.css
[22:16:46.368] file:///C:/Users/User/Documents/requirejs-counter2/scripts/require.js
[22:16:46.369] file:///C:/Users/User/Documents/requirejs-counter2/scripts/main.js
[22:16:46.588] file:///C:/Users/User/Documents/requirejs-counter2/scripts/test1.js
[22:16:46.589] file:///C:/Users/User/Documents/requirejs-counter2/scripts/test2.js
[22:16:46.590] file:///C:/Users/User/Documents/requirejs-counter2/scripts/counter.js
[22:16:46.381] "Creating the counter AMD module"
[22:16:46.381] "Incrementing the counter in module "test1""
[22:16:46.381] "Incrementing the counter in module "test2""
[22:16:46.381] "Retrieving the counter value in module "main""
[22:16:46.381] 2

结论

计数器模块仅加载一次,因此只创建一次计数器对象。您可以将其视为Singleton