module1.js

Question

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

Q2。如何避免让module1和module2进入全局范围，因为我需要公开只能从html访问的mondule3？

module1.js

var module1 = (function(){
  var  module1Msg = "This is Module 1";

  return {
    module1Msg:module1Msg
  };
})();

module2.js

var module2 = (function(){
  var  module2Msg = module1.module1Msg +" - "+" This is Module 2";

  return {
        module2Msg:module2Msg
  };
})();

module3.js

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

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

并使用以下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>

Answer 1

嗯，你可以自己装模块。您可以通过创建一个为您加载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>

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

该函数也可以像require(['module1', 'module2', 'module3'], function() { ... })一样调用，但是您可能会遇到module2在module1之前加载的问题，这会导致缺少参考错误，因此，＆＃39;为什么我在3个不同的require语句中编写了上面的require代码。（你仍然可以在当前的设置中使用。不确定首先在线接收哪些脚本，因此可能是你的应用程序可以工作90％并且有一些难以重现其他10％的错误。

至少可以通过＆＃34;定义＆＃34;您的模块在共享类中，然后根据其字符串ID注入一些类，但我想这不属于您的问题范围。

Answer 2

你不能。您正在使用的模式要求每个模块放置它想要从全局范围中的另一个模块访问的任何内容。

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

您可以通过将整个定义放在另一个模块末尾的()中（并在参数中捕获它）来限制模块，但是您无法将它们保存在单独的文件中。 / p>

Answer 3

只需将对模块的引用作为参数传递给特定的iife。将module2作为参数传递给module3，并对module1和module2

执行相同的操作

使用IIFE进行Visibliy控制

module1.js

module2.js

module3.js

3 个答案: