用于创建 JavaScript 框架的架构

Question

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

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

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

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

• 封装代码以防止名称冲突。我们对关闭的私人/公共分离感到非常满意。
• 可扩展功能，类似于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 {
    isValidState: function() { ... }
    commonTask1: function () { ... },
    commonTask2: function () { ... }
}

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

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

    return false;
}

通过调用 core.isValidState() 来检查状态是否有效；像这样，您不会在框架核心中获得对任何“私有”变量的任何引用，因为函数返回一个布尔值，而不是对任何对象的直接引用。

Answer 2

你探索过道场吗？它具有模块系统、构建系统和实现的非常精细的 OO 框架。 您可以拥有自己的模块/“基本 Dijits”，它们将帮助您实现“通用模块/小部件”，然后通过按照您描述的方式编写/添加特定功能，在每个项目中扩展它们。

DOJO 并不完全在 Vogue 中，但如果您的应用程序处理界面之类的形式，那么它绝对是一个候选者。