javascript揭示模块模式扩展建议答案

【问题标题】：javascript revealing module pattern extension suggestionjavascript揭示模块模式扩展建议
【发布时间】：2020-11-07 23:13:40
【问题描述】：

我想在 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();

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

【问题讨论】：

阅读addyosmani.com/resources/essentialjsdesignpatterns/book

标签： javascript commonjs module-pattern revealing-module-pattern module-packaging

【解决方案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
    }
   })();

【讨论】：

我想要类似 mns.math.incrementCounter();请提出建议。

【解决方案2】：

以下是方法，我做到了。请提出更好的方法

mns.js 文件

 var mns = {};

math.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
    }
   })();

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

// 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

【讨论】：