我正在一个移动网站(它不是一个单一的页面的应用程序),它有一个非常小的JS脚印(小于10KB缩小和gzipped)。没有库或外部依赖关系,所有的代码都是香草写在家里的JavaScript代码。为了减少HTTP请求的数量,它在逻辑上被分成多个文件,并在deplyment之前进行连接。文件中没有明确的命名空间。也就是说,它们看起来像:CommonJS模块加载器,不做异步调用
// crossbrowser.js
function getScrollOffset() {
// implementation
}
function ...
这是不理想的,没有明确的相关性解析和范围可以从函数中得到easilly污染。没有处理完成检查(lint或编译器)。作为第一步,我认为实现一个明确的模块系统可以防止这种情况发生,并使代码更好。
根据我的理解,在浏览器端使用模块时,读入CommonJS模块格式和加载器(如RequireJS,Lab.js等),他们都希望通过XHR加载它们。我不想那样,我想保留包含所有模块的单一脚本格式。我的文件看起来是这样的:
var define = function() { /* ... */ };
var require = function() { /* ... */ };
define("crossbrowser", function (require, exports, module) {
exports.getScrollOffset = function() {
//
};
// etc.
});
define("foo", function (require, exports, module) {
var crossbrowser = require('crossbrowser');
exports.getNewOffset = function() {
var offset = crossbrowser.getScrollOffset();
// do something
return offset;
}
});
window.addEventListener('DOMContentLoaded', function() {
// really dumb example, but I hope it gets the point across
var crossbrowser = require('crossbrowser'),
foo = require('foo');
crossbrowser.scrollTo(foo.getNewOffset());
});
是羯羊任何装载机的工作,这种方式还是我写我自己的实施define
和require
的问题?
我用这个,加上almond.js加载器。谢谢! – 2012-02-02 14:03:08