Question

我想将我的JavaScript代码模块化在不同的文件中，但是希望使用像这样的原生JavaScript对象：

(function ($, _, val) {

   return {
     myTest: 'abc',
     init: function (options) {...}
   };

})(jQuery, _, 'utils/validation');

是否有可以像这样工作的脚本加载器？我已经使用了RequireJS，并且不想将我的几个文件包装在define / require中（尽管我真的很喜欢r.Optimizer的想法）。任何帮助或经验将不胜感激！

Answer 1

如果我理解您的意思，您希望在加载页面后加载单独的JavaScript文件。我有一个示例，说明如何将模块分布在多个文件上，并在以后的调用中加载该模块的其他部分。首先，可以在这里找到不同模块模式的精彩摘要：Adequately Good: Module Patterns和一个非常好的代码片段，可以在这里找到一个JavaScript加载器：Loading JS files Asynchronously

我的模块名称为myModule，在初始加载期间它有三个函数：addNumbers()，doOperations()和difNumbers()。然后，在加载文档后，我们会在tmp中存储doOperations()的答案。之后，我们要加载multiply.js脚本，以便myModule具有multNumbers()函数，因此我们使用文件的URL调用loadScript()，然后给它回调这会将乘法打印到控制台。

这是我的代码：

HTML文件

<html>
   <head>
      <title>Module Pattern</title>
      <meta charset="UTF-8">
      <script>
         var myModule = (function(my) {
            my.addNumbers = function(a, b) {
               return a + b;
            };
            return my;
         }(myModule || {}));
      </script>
      <script>
         var myModule = (function(my) {
            my.doOperations = function(a, b) {
               return{
                  c: my.addNumbers(a, b),
                  d: my.difNumbers(a, b)
               };
            };
            return my;
         }(myModule || {}));
      </script>
      <script>
         var myModule = (function(my) {
            my.difNumbers = function(a, b) {
               return a - b;
            };
            return my;
         }(myModule || {}));
      </script>
      <script>
         function loadScript(url, success) {
            var script = document.createElement("script");
            script.src = url;
            var head = document.getElementsByTagName("head")[0],
                    done = false;
            script.onload = script.onreadystatechange = function() {
               if (!done && (!this.readyState ||
                       this.readyState === "loaded" ||
                       this.readyState === "complete")) {
                  done = true;
                  success();
                  script.onload = script.onreadystatechange = null;
                  head.removeChild(script);
               }
            };
            head.appendChild(script);
         }
      </script>
      <script>
         function main() {
            var tmp = myModule.doOperations(5, 6);

            loadScript("multiply.js", function() {
               console.log(myModule.multNumbers(7, 9));
            });
            console.log(tmp.c);
            console.log(tmp.d);
         }
      </script>
   </head>
   <body onload="main();">
      <div>I do operations</div>
   </body>
</html>

<强> multiply.js

var myModule = (function(my) {
   my.multNumbers = function(a, b) {
      return a * b;
   };
   return my;
}(myModule || {}));

脚本加载器无需包装代码？

1 个答案: