javascript - 在JavaScript中结合设计模式是否是一种好习惯？

Closed. This question is opinion-based。它当前不接受答案。












想改善这个问题吗？更新问题，以便editing this post用事实和引用来回答。

3年前关闭。



Improve this question




目前，我正在从事我的私有(private)项目(用于学习)，这是一个简单的待办事项 list 。我正在尝试使用模块化模式(具体来说，显示模块模式)。下图显示了总体思路，我将如何构建它。

Image of how my app looks like

因此，每个模块将位于一个单独的js文件中，其中每个模块如下所示:

var TaskModule = (function () {

  function someFunction(parameter) {
    tasks = newTasks;
  }

}

还有一个问题:如果我们想用“帮助函数”来创建类似单独文件的内容，该怎么办？在每个模块中编写类似以下内容并不方便:

var someElement = document.getElementById('id')

我有我的辅助函数(此函数只是一个示例):

var someElement = byId('id');

当然，我可以像其他方法一样创建HelpersModule，但是随后我将不得不以这种方式调用函数:

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

这导致我的帮助功能不再有意义，它不比带有document.getElementById的原始版本短。因此，为避免每次调用辅助函数时都写此前缀“HelpersModule”，我将HelpersModule设计如下:

(function(window) {

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

})(window);

现在一切正常，但是我创建HelpersModule的方式与其他模块不一致。以不同的方式创建模块是一种不好的做法，还是完全可以的？

最佳答案

创建一个实用程序模块(如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');