我正在将 JSF 繁重的 Web 应用程序迁移到 REST 且主要是 JS 模块应用程序。
我在 YUI theater 上看过 Nicholas Zakas 的“可扩展的 javascript 应用程序架构”(非常棒的视频),我成功地实现了大部分演讲,但我有一些问题:
关于模块和沙箱之间的关系,我发现讲座有点困惑,一方面,根据我的理解,模块不应该受到沙箱之外发生的事情的影响,这就是它们发布事件的原因通过沙箱(而不是通过核心,因为核心用于隐藏基础库)但是应用程序中的每个模块都有一个新的沙箱?沙箱不应该将事件限制到使用它的模块,还是应该跨页面发布事件?例如:如果我有两个可编辑的表,但我想将每个表包含在不同的沙箱中,并且它的事件仅影响该沙箱内的模块,比如每个表的消息框是一个不同的模块/小部件,我如何使用沙箱来做到这一点每个模块,当然我可以用 moduleid 作为事件的前缀,但这会产生我想避免的耦合......而且我不想将模块打包为每个组合的一个模块,因为我已经有 6-7 个模块。
虽然我可以为 id 选择器等小东西隐藏基础库。我仍然想使用基础库来进行模块依赖和资源加载,并使用 YUI 加载器或
dojo.require 之类的东西
所以实际上我隐藏了基础库,但是模块本身是由基础库定义和加载的……我觉得有点奇怪。库不返回简单的 js 对象,但通常将它们包装起来,例如:你可以做一些像
$$('.classname').each(..
这样的事情来清理代码,包装基础然后在模块中创建依赖项是没有意义的通过执行 .each 但不使用这些功能的基础库会编写大量代码,这些代码可以省略......并且实现该功能非常容易出错。有没有人有构建此订单的前端堆栈的经验?使用 yui 数据表但使用 dojo 进行表单验证,更改基础库和/或拥有来自不同库的模块有多容易...?
有点像 2+4 的组合,如果你选择像我说的那样做,并通过 YUI 加载器为输入加载 dojo 表单验证小部件,这是否意味着 dojocore 是一个模块,而表单模块依赖于它?
最佳答案
我们在我们的应用程序中大量使用这种模式。查看 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
}
});
});
关于Javascript 自包含沙箱事件和客户端堆栈,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3628649/