1

我想在 JS 中实现模块模式。我在谷歌上关注了一些帖子并开始编写自己的帖子。这是我想要达到的目标

mns - will be the name space for my lib
math - will be one of the sub-module in mns

我希望所有这些模块都在单独的文件中。

这是 mns.js 文件代码（仅用于命名空间，其中没有函数）

    var mns = (function () {
         return {};
     })();

这是 math.js 代码（我希望它作为 mns 的子模块）

    var submodule = (function (mns) {
    var math =  (function(){
    var counter = 0;
    var incrementCounter = function () {
      return counter++;
    }
    var resetCounter = function () {
    alert( "counter value prior to reset: " + counter );
      counter = 0;
    }
   })();
  mns.math = math;
  return mns;
 })(mns || {});

我期待 application.js 会像下面这样调用

    mns.math.incrementCounter();
    mns.math.resetCounter();

现在，Cannot read property of undefined调用 incrementCounter 和 resetCounter 时出现错误。请指导我。

4

4 回答 4

1

一切看起来都不错，除了math模块：

var math =  (function(){
    var counter = 0;
    var incrementCounter = function () {
      return counter++;
    }
    var resetCounter = function () {
    alert( "counter value prior to reset: " + counter );
      counter = 0;
    }
   })();

为了使用incrementCounter，resetCounter您必须将它们返回到一个对象中（所以这math将被设置为某些东西）。

像这样的东西应该工作：

var math =  (function(){
    var counter = 0;
    var incrementCounter = function () {
      return counter++;
    }
    var resetCounter = function () {
    alert( "counter value prior to reset: " + counter );
      counter = 0;
    }
    return {
        incrememtCounter: incrememtCounter,
        resetCounter: resetCounter
    }
   })();
于 2015-07-17T10:26:59.823 回答
0

以下是方法，我实现了。请提出更好的方法

mns.js 文件

 var mns = {};

数学.js 文件

    mns.math =  (function(){
    var counter = 0;
    var incrementCounter = function () {
      return counter++;
    };
    var resetCounter = function () {
    alert( "counter value prior to reset: " + counter );
      counter = 0;
    };

    return{
        incrementCounter : incrementCounter,
        resetCounter : resetCounter
    }
   })();
于 2015-07-17T13:10:19.097 回答
0

与其处理创建闭包的语义，我建议使用Browserify为您处理模块模式。这允许您将所有内容分成多个文件，并使用文件名作为模块的标识符。它有助于减少样板代码的数量并使代码更易于理解。它还模仿了 NodeJS 模块化的 CommonJS 语法，这也很好。

于 2015-07-22T06:34:42.030 回答
0

我想你要找的是这个...

// mns.js
(function(window) {

    var mns = function() {
        // your private code here...
        return {
            // public module interface...
        }
    }();

    window.mns = mns;

})(window);


// math.js
(function(mns) {

    var math = function() {
        // your private code here...
        return {
            // public module interface...
        }
    }();

    mns.math = math;

})(window.mns);

在您的 HTML 页面中，您需要先加载 mns 文件，然后再加载数学文件。或者，也许您可​​以使用一些工具来连接这些文件并加载一个独特的缩小文件，如 mns.min.js。对我来说，Gulp.js 是一个很棒的工具。就像我说的那样，使用 Gulp.js 的一些 concat 操作以特定顺序加入文件。

如果您想要一个真实的示例，请参见： https ://github.com/viniciusknob/queiroz.js/blob/master/dist/queiroz.js

于 2020-11-07T15:13:40.187 回答