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

目前我正在研究我的私人项目（用于学习），这是一个简单的待办事项列表。我试图使用模块化模式（揭示模块模式，具体）。下图显示了我将如何构建它的一般想法。在JavaScript中结合设计模式是一种很好的做法

所以每个模块在一个单独的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.getElem短entById。因此，为了避免写我每次打电话给我的助手功能时这个前缀“HelpersModule”，我设计HelpersModule这样的：

(function(window) { 

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

})(window);

现在一切工作正常，但我创建HelpersModule的方式是不与其他模块相一致。以不同的方式创建模块或完全没问题，这是不好的做法吗？在你的其他代码

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

...某处，指定你需要一个局部变量的辅助功能：

来源

2017-08-05 pastuszkam

你的'HelpersModule.byID（）'和'document.getElementById（）'做同样的事吗？ –

@ demogorgon.net是的，它的确如此，但这仅仅是一个例子 – pastuszkam

如果你的模块是用来完成不同的事情（一个对象初始化一个对象，另一个提供全局变量），那么它们看起来就不一样了。使用不同的方式是完全正确的。尽管如此，我建议避免尽可能多的全局变量。 – Bergi

创建一个应用模块（如您的HelpersModule）

// ... 
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');

来源

2017-08-05 18:11:19 PeterMader

这是正确的想法，但他没有表明他使用ECMAScript 6. –

@Sahuagin加入，'const'有[96.94％]（http://caniuse.com/#feat=const）global支持，并且我提供了解构的替代方案。如果OP真的遇到'const'的问题，他可以很容易地用'var'替换它。这是否是倒退的原因？ – PeterMader

ES6中的答案没有问题。您的解决方案非常有用。谢谢。 – pastuszkam

如果两个

var someElement = document.getElementById('id')

和

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

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

编辑：

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

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

来源

2017-08-05 18:11:27

当然在这个例子中，没有意义为一个函数创建另一个模块，我同意。但这只是一个例子。如果我有很多助手功能，我可能需要这样的模块。 – pastuszkam

我编辑了我的答案，让我知道这是否合理。干杯@pastuszkam –

在这种方法中，我可能需要在每个需要这些功能的文件中复制一些函数的代码。我想避免任何重复。 – pastuszkam

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

回答

相关问题