Question

目前，我正在处理我的私人项目（用于学习），这是一个简单的待办事项列表。我试图使用模块化模式（揭示模块模式，具体而言）。下图显示了我将如何构建它。

所以每个模块都在一个单独的js文件中，每个模块看起来像：

var TaskModule = (function () { 

  function someFunction(parameter) {
    tasks = newTasks;
  }

}

还有一个问题：如果我们想要创建类似于单独文件的内容，可以说＆＃39; helpers功能＆＃39;。在每个模块中编写类似的东西并不舒服：

var someElement = document.getElementById('id')

我有我的助手功能（这个功能只是一个例子）：

var someElement = byId('id');

当然我可以像其他人一样创建HelpersModule但是我必须这样调用我的函数：

var someElement = HelpersModule.byId('id');

导致我的帮助功能不再有意义，它不会比使用document.getElementById的原始版本短。所以要避免写这个前缀＆＃39; HelpersModule＆＃39;每当我调用我的辅助函数时，我就像这样设计了我的HelpersModule：

(function(window) {

    window.byId = function (selector, scope) {
      return (scope || document).getElementById(selector);
    };

})(window);

现在一切正常但我创建HelpersModule的方式与其他模块不一致。以不同的方式创建模块或者它完全没问题是不好的做法？

Answer 1

创建一个实用程序模块（如HelpersModule）：

const HelpersModule = {
  byId: id => document.getElementById(id),
  byTag: tag => Array.from(document.getElementsByTagName(tag))
};

...在您的其他代码中的某处，将您需要的辅助函数分配给局部变量：

// ...
const byId = HelpersModule.byId; // if you only need 'byId'
const element = byId('my-id');
// ...

或者，使用解构：

const { byId } = HelpersModule; // if you only need 'byId'
const element = byId('my-id');

或

const { byId, byTag } = HelpersModule; // if you need both
const element = byId('my-id');
const allSpans = byTag('span');

Answer 2

如果两者

var someElement = document.getElementById('id')

和

var someElement = HelpersModule.byId('id');

做同样的事情，然后我建议只使用第一个而不是创建一个新模块。这样，您将保持模块模型的真实性，并且每个模块只需添加一行代码。创建一个全新的模块，并且仍然需要为每个模块编写一行代码。这有帮助/我理解你的问题吗？

修改

我明白你的意思了。您想知道是否应该为每个模块创建一个单独的模块来保存所有帮助器方法。在这种情况下，最好将助手方法仅保留在需要它们的文件中。因此，如果你有一个仅在一个文件中使用的辅助方法，并且只能用于该文件，它应该只是留在那个档案里。如果它们位于需要它们的文件中，则更容易跟踪所有方法。它还可以防止您在文件之间来回切换以找到您要查找的方法。

因此，只需在需要它们的文件（调用它们的文件）中保留辅助方法，而不是另一个模块。当你的文件有数千行代码时，它会变得混乱。

在JavaScript中组合设计模式是一种很好的做法

2 个答案: