Question

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

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＆amp;时遇到Cannot read property of undefined错误resetCounter。请指导我。

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

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

Answer 3

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

Answer 4

我认为您正在寻找的是这个...

java.lang.IllegalArgumentException: Validation failed for the query for method public abstract java.util.List dev.rannem.storesql.repositories.ProductRepositories.getItemList(java.lang.Integer)!

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

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

javascript揭示模块模式扩展建议

4 个答案: