Javascript 自包含沙箱事件和客户端堆栈

Question

我正在将一个 JSF 繁重的 Web 应用程序迁移到一个 REST 并且主要是 JS 模块应用程序。

我在 YUI 剧院观看了 Nicholas Zakas 的“可扩展的 javascript 应用程序架构”（精彩视频），我成功实施了大部分演讲，但我有一些问题：

1. 关于模块和沙箱之间的关系，我发现讲座有点混乱，一方面，据我了解，模块不应受到沙箱之外发生的事情的影响，这就是他们通过沙箱发布事件的原因（而不是通过核心，因为核心是为了隐藏基础库）但是应用程序中的每个模块都有一个新的沙箱？沙盒不应该将事件限制在使用它的模块中，还是应该跨页面发布事件？例如：如果我有两个可编辑的表，但我想将每个表包含在不同的沙箱中，并且它的事件仅影响该沙箱内的模块，例如每个表的消息框是不同的模块/小部件，我该如何使用沙箱做到这一点每个模块，当然我可以在事件前加上 moduleid，但这会产生我想避免的耦合......而且我不想将模块打包在一起作为每个组合的一个模块，因为我已经有 6-7 个模块。

2. 虽然我可以隐藏 id 选择器等小东西的基础库。我仍然想使用基础库来进行模块依赖和资源加载，并使用 YUI 加载器或dojo.require 之类的东西，所以事实上我是隐藏基础库，但模块本身是由基础库定义和加载的……对我来说似乎有点奇怪。

3. 库不返回简单的 js 对象，但通常将它们包装起来，例如：您可以执行类似$$('.classname').each(.. 之类的操作，它会大量清理代码，包装基础并在模块中通过执行 .each 为基础库创建依赖项是没有意义的，但不使用这些功能会产生大量代码编写的可以省略...并且实现该功能很容易出错。

4. 有没有人有建立这个订单的前端堆栈的经验？使用 yui 数据表但使用 dojo 进行表单验证，更改基础库和/或拥有来自不同库的模块有多容易？

5. 如果您选择像我说的那样做一些事情并通过 YUI 加载器为输入加载 dojo 表单验证小部件，那么 2+4 的组合是否意味着 dojocore 是一个模块并且表单模块依赖于它？

Answer 1

我们在应用程序中大量使用这种模式。查看 Stoyan Stefanov 的 JavaScript 模式 一书，详细了解如何实现沙盒模式。基本上它看起来像这样：

(function (global) {
    var Sandbox = function fn (modules, callback) {
        var installedModules = Sandbox.modules,
            i = 0,
            len = modules.length;

        if (!(this instanceof fn)) {
            return new fn(modules, callback);
        }

        // modules is an array in this instance:
        for (; i < len; i++) {
            installedModules[modules[i]](this);
        }

        callback(this);
    };

    Sandbox.modules = {};
    global.Sandbox = Sandbox;

})(this);

// Example module:
// You extend the current sandbox instance with new functions
Sandbox.modules.ajax = function(sandbox) {
    sandbox.ajax = $.ajax;

    sandbox.json = $.getJSON;
};

// Example of running your code in the sandbox on some page:
Sandbox(['ajax'], function(sandbox) {

    sandbox.ajax({
        type: 'post',
        url: '/Sample/Url',
        success: function(response) {
            // success code here. remember this ajax maps back to $.ajax
        }
    });

});