加载模块一次,需要带有示例 [英] Loading module once, requirejs with examples

查看:66
本文介绍了加载模块一次,需要带有示例的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我已经问过类似的问题: Requirejs,这意味着什么Requirejs加载每个模块一次

但是在该主题中没有人回答主要问题,因为我问错了。

I already ask similar question: Requirejs, what it means "Requirejs loads each module once"
but in that topic no one answer the main question, because i asked in wrong way.

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

So i will provide some easy examples to show on what i mean:

模块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)

So module main.js is entry point of the application which will first load dependencies "test1", "test2" and "counter". (Executing order: Executing counter, Executing test1, Executing test2, Executing main)

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

So if i understand sentence "Requirejs loads each module once" that means (for example of counter.js) code from line 1 to 9 will be executed ONLY ONCE beside fact that test1, test2 and main module have counter in their dependencies list? If that is correct, test1 is "in charge" for executing counter module? And if that is correct, after executing counter, in memory will be ONLY ONE object which will be returned from counter? When test2 load counter it will get that ONE object? (in another words test2 will not execute again code from counter neither main, they will use existing counter object)? SO, am i creating SINGLETON here?

最后所有模块都会影响计数器值(开头,计数器) = 0)通过函数(递增,获取)闭包?
当计数器对象存在于内存中时,闭包将处于活动状态?

In the end all of the modules can affect counter value (in beginning, counter = 0) through functions(increment, get) closures? Closures will be alive while counter object exist in memory?

推荐答案

我改变了你的 main.js 登录控制台

I changed your main.js to log to the console

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

此外我还有一个index.html

In addition I have an 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 然后打开我有的网络控制台

After loading index.html and then opening the web console I have

[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 



记录消息



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

Log messages

To make it more clear what happens I suggest to substitute the log messages


  • 执行计数器 - > 创建计数器AMD模块

  • 执行test1 - > 递增模块test1中的计数器

  • 执行test2 - > 递增计数器在模块test2中

  • 执行主 - > 检索模块main中的计数器值

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

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

The I get the following result in the console log

[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

这篇关于加载模块一次,需要带有示例的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆