用于操作 DOM API 的 Javascript 设计模式

Question

我阅读了很多主题，浏览了 github 上的很多 JS 插件，其中很多都有自己的构建代码的方式以及使用哪种模式。在某些情况下，他这样做的原因是显而易见的。但是，当处理较小的东西(而不是大型 SAP)时，哪种模式最有“优点”？

现在，我要这样: https://github.com/goranefbl/GENS-Javascript-Boilerplate/blob/master/main.js

是的，它工作得很好，但我想知道对于较小的插件，尤其是那些只是操作 DOM 的插件(创建新元素/移动/添加事件监听器等...)，最好的模式是什么与当然为什么？也许我不需要为小东西污染命名空间。

这是最新组件的示例:gist.github.com/goranefbl/1b6144ee8cd8708c7511a1a2fb7c53a6 它只是在选择字段下方创建无序列表，以方便样式设置。

使用上面的示例样板感觉不太对，也就是说，对于这样的事情感觉太多了。

Answer 1

您正在寻找比您发布的图案更小的图案。让我们看看我们可以去掉哪些部分:

defaults 对象和 extendDefaults 方法不是必需的，您可以使用

window.GENSPlugin = function(firstoption, secondoption) {

问题是，你真的需要插件吗？你说你不想污染全局命名空间，那这样呢:

(function() {
    'use strict';

    // not accessible from outside the function
    var obj1 = document.getElementById("...");

    // accesible from outside
    window.obj2 = function() {
        ...
    }

})();