用于创建 JavaScript 框架的架构

Question

大约一年前，我们启动了一个 web 系统，随着时间的推移，它已经发展了很多。从一开始，目标就是构建可重用的代码，以加快未来项目的开发，而且它已经实现了。对于每个新项目，都采用了以前的可重用代码并以此为基础进行构建。

目前，服务器端代码非常干净，"framework"（通用功能）和项目特定逻辑之间有明确的分离。

然而，javascript已经失控了。对于页面特定 javascript（按钮事件、ajax 调用等），我们一直在使用闭包和 the module pattern。但是 javascript 通用文件（我们在每个页面中导入的文件）充满了功能，除了名称上的一些相似性之外，它们之间没有任何关联。

正因为如此，我现在正在尝试构建一种框架（易于重用和维护的代码）来封装我们已有的逻辑和功能。它应该是一个 "core" 对象和几个可选的 "extensions"。它们将位于单独的文件中以改进代码的顺序。具体来说，我正在努力实现以下目标：

代码封装，防止名称冲突。我们对闭包的 private/public 分离感到非常满意。
可扩展功能，类似于 open/close principle。这里棘手的部分是扩展可能想要访问核心的私有方法。

我在 javascript 中阅读了很多关于 OO 的文章，我什至试图理解 jQuery 是如何做到的，但我仍然无法理解它.对于架构方面，我似乎应该构建一个模块或服务框架，但我发现的那些比我想要实现的要复杂得多。

如果不是前面提到的棘手部分，一个简单的 $.extension() 就可以了，但我被困在如何从扩展访问核心私有方法部分。简而言之，我的问题是：javascript 中是否有推荐的架构来构建类似以下示例的架构？

var framework = function () {
    //Private variable
    var internalState = 1;

    //Private method
    var validState = function () { ... }

    //Public methods
    return {
        commonTask1: function () { ... },
        commonTask2: function () { ... }
    }
}();

framework.addMoreFunctionality(function () {
    var specificData = '';

    return {
        extensionMethod: function () {
            //TRICKY PART HERE
            if (core.validState()) { ... }
        }
    }
}());

Answer 1

只是 return 框架模块中的一个函数。

return {
    isValidState: function() { ... }
    commonTask1: function () { ... },
    commonTask2: function () { ... }
}

isValidState 函数随后可以检查内部状态。

// isValidState
function() {
    if (validState()) {
        return true;
    }

    return false;
}

然后通过调用 core.isValidState() 检查状态是否有效；像这样，您将不会获得对框架核心内任何 "private" 变量的任何引用，因为函数 return 是一个 bool 而不是对任何对象的直接引用。

Answer 2

你探索过 DOJO 吗？它具有模块系统、构建系统和非常精细的 OO 框架。您可以拥有自己的模块/"base Dijits"，这将帮助您实现 "generic modules/widgets"，然后通过按照您描述的方式编写/添加特定功能来扩展每个项目。

DOJO 并不完全符合 Vogue，但如果您的应用程序处理界面等表单，那么它绝对是一个候选者。

用于创建 JavaScript 框架的架构

Architecture for creating a JavaScript framework

javascript

architecture

frameworks