0

我正在开发一个移动网站（它不是单页应用程序），它的 JS 占用空间非常小（压缩和压缩后不到 10KB）。没有库或外部依赖项，所有代码都是内部编写的 vanilla javascript。它在逻辑上被分成几个文件，在部署之前连接起来，以减少 HTTP 请求的数量。文件中没有明确的命名空间。也就是说，它们看起来像：

// crossbrowser.js
function getScrollOffset() {
    // implementation
}

function ...

这不太理想，没有明确的依赖关系解析，并且范围很容易从函数内部受到污染。没有进行任何处理来检查这一点（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());
});

问题是是否有任何加载器以这种方式工作，还是我必须编写自己的defineand实现require？

4

3 回答 3

2

像 requirejs 这样的加载器的好处之一是您可以在构建过程中使用优化器将所有模块组合成一个缩小的脚本，请参阅RequireJS Optimizer

这将允许您以模块化结构进行开发，但部署优化版本

于 2012-01-06T21:19:17.877 回答
1

看看webmake。

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

于 2013-08-04T17:20:41.203 回答
0

如果您不需要异步加载，则不需要 AMD 加载程序。例如，如果您使用 r.js 来组合模块，并且您必须在生产代码中加载整个 RequireJS 库。为什么不简单地使用编译器？看看 CommonJS Compiler http://www.slideshare.net/dsheiko/modular-javascript-with-commonjs-compiler上的幻灯片，这里是源/文档http://dsheiko.github.io/cjsc/

于 2014-08-20T16:55:33.697 回答