Javascript 使用iLife进行可视化控制_Javascript

Javascript 使用iLife进行可视化控制

javascript

Javascript 使用iLife进行可视化控制,javascript,Javascript,我创建了以下三个模块。问题是，仅通过使用IIFE（不使用common.js、require.js等模块库），如何以只有module2对module3可见，并且只有module1对module2可见的方式进行设计问题2。如何避免module1和module2进入全局范围，因为我只需要公开可以从html访问的mondule3 模块1.js module2.js module3.js 并使用以下html文件中的模块 <html> <head> <title>Mod

我创建了以下三个模块。问题是，仅通过使用IIFE（不使用common.js、require.js等模块库），如何以只有module2对module3可见，并且只有module1对module2可见的方式进行设计

问题2。如何避免module1和module2进入全局范围，因为我只需要公开可以从html访问的mondule3

模块1.js module2.js module3.js 并使用以下html文件中的模块

<html>
<head>
<title>Module Experiment</title>
<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="module3.js"></script>

<script>
    alert(module3.module3Msg);

</script>
</head>
<body>
<div id="display"></div>

</body>
</html>


模块实验
警报（module3.module3Msg）；

只需将对模块的引用作为参数传递给特定iife即可。将module2作为参数传递给module3，并对module1和module2执行相同的操作，但不能。您正在使用的模式要求每个模块在全局范围内放置它希望从另一个模块访问的任何内容

显示模块模式允许您限制变量，使其仅可由模块本身访问。它不允许您将变量限制到其他特定模块

您可以通过将模块的整个定义放在另一个模块末尾的

（）

中（并在参数中捕获它）来限制模块，但不能将它们保存在单独的文件中。

好的，您可以自己加载模块。您可以通过创建一个函数来使用模块加载，为您加载javascript文件，这样您的html中就不再有脚本标记（启动应用程序除外）

例如，您可以执行类似的操作，如：

<html>
<head>
<title>Module Experiment</title>
<script>
    'use strict';
    var scriptBase = './js/';
    var scriptcounter = 0;

    function require(arr, callback) {
        var requested = 0, loaded = 0;
        arr.forEach(function(script) {
            var scriptTag = document.createElement('script');
            scriptTag.id = 'myscript' + (++scriptcounter);
            requested++;
            scriptTag.addEventListener('load', function() {
                loaded++;
                if (loaded === requested) {
                    callback();
                }
            });
            scriptTag.src = scriptBase + script + '.js';
            document.head.appendChild(scriptTag);
        });
    }

    window.addEventListener('load', function() {
        require(['module1'], function() {
            require(['module2'], function() {
                require(['module3'], function() {
                    // everything loaded
                    console.log('I can call module3 here');
                    var el = document.getElementById('display');
                    el.innerHTML = module3.module3Msg;
                });
            });
        });
    });
</script>
</head>
<body>
<div id="display"></div>

</body>
</html>


模块实验
"严格使用",；
var scriptBase='./js/'；
var脚本计数器=0；
函数要求（arr、回调）{
请求的var=0，加载的var=0；
arr.forEach（函数（脚本）{
var scriptTag=document.createElement（'script'）；
scriptTag.id='myscript'+（++scriptcounter）；
请求++；
scriptTag.addEventListener（'load'，function（）{
加载++；
如果（已加载===请求）{
回调（）；
}
});
scriptTag.src=scriptBase+script+'.js'；
document.head.appendChild（scriptTag）；
});
}
addEventListener（'load'，function（））{
require（['module1']，function（））{
require（['module2']，function（））{
require（['module3']，function（））{
//装载的东西
log（'我可以在这里调用module3'）；
var el=document.getElementById（'display'）；
el.innerHTML=module3.module3Msg；
});
});
});
});

在这种情况下，require接受一个数组，并在加载脚本时调用回调。此时，您可以运行代码，也可以选择获取其他文件来完成更多工作

该函数也可以像

require（['module1'，'module2'，'module3']，function（）{…}）

那样调用，但您可能会遇到一个问题，即

module2

在

module1

之前加载，这将导致缺少引用错误，因此，这就是为什么我在上述3个不同的require语句中编写require代码的原因。（您当前的设置中仍然存在此问题。不确定第一次联机将收到什么脚本，因此您的应用程序可能会工作90%，并在其他10%的情况下出现一些难以重现的错误

你至少可以通过“定义”来让自己变得更容易您的模块在共享类中，然后根据它们的字符串id注入一些类，但我想这超出了您的问题范围。

如何？它们在不同的文件中。您必须先将该值设置为全局值，然后才能将其传递给另一个模块，此时所有模块都可以使用该值。您要求的是AMD功能，但我不想使用AMD库。为什么不呢？在所有情况下，都会涉及一些开销，无论是使用客户端AMD库、服务器端绑定器（如browserify）还是推出自己的解决方案。非常好，我喜欢你解释的方式。实际上我知道使用common或require.js来解决此问题的最佳方法，但是，我很高兴我想知道如何用纯java脚本解决这个问题。你做到了。谢谢

var module3 = (function(){
  var  module3Msg = module2.module2Msg +" - " +" This is Module 3";

  return {
    module3Msg:module3Msg
  };
})();

<html>
<head>
<title>Module Experiment</title>
<script src="module1.js"></script>
<script src="module2.js"></script>
<script src="module3.js"></script>

<script>
    alert(module3.module3Msg);

</script>
</head>
<body>
<div id="display"></div>

</body>
</html>

<html>
<head>
<title>Module Experiment</title>
<script>
    'use strict';
    var scriptBase = './js/';
    var scriptcounter = 0;

    function require(arr, callback) {
        var requested = 0, loaded = 0;
        arr.forEach(function(script) {
            var scriptTag = document.createElement('script');
            scriptTag.id = 'myscript' + (++scriptcounter);
            requested++;
            scriptTag.addEventListener('load', function() {
                loaded++;
                if (loaded === requested) {
                    callback();
                }
            });
            scriptTag.src = scriptBase + script + '.js';
            document.head.appendChild(scriptTag);
        });
    }

    window.addEventListener('load', function() {
        require(['module1'], function() {
            require(['module2'], function() {
                require(['module3'], function() {
                    // everything loaded
                    console.log('I can call module3 here');
                    var el = document.getElementById('display');
                    el.innerHTML = module3.module3Msg;
                });
            });
        });
    });
</script>
</head>
<body>
<div id="display"></div>

</body>
</html>