2012-01-06 70 views
0

我正在一个移动网站(它不是一个单一的页面的应用程序),它有一个非常小的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()); 
}); 

是羯羊任何装载机的工作,这种方式还是我写我自己的实施definerequire的问题?

回答

2

一个与像requirejs装载机的好处之一是,你可以使用优化过程中您的构建过程中所有的模块组合成一个精缩脚本,请参阅RequireJS Optimizer

这将允许你在一个模块化结构发展,但部署优化版本

+0

我用这个,加上almond.js加载器。谢谢! – 2012-02-02 14:03:08

1

看看webmake

Webmake允许在浏览器中使用CommonJS模块。所有js文件都合并成一个js文件。装载机非常轻便。 Webmake也适用于CoffeeScript。