3

目前我正在构建一个可以附加到任何 HTML5 Canvas 元素上下文并与之交互的 JS 库。

但是，该项目开始变得广泛，包含大量文件和数千行代码。每个文件代表一个不同的对象/模块。每个文件目前都是这样布局的，我真的很想保留这种风格的一些外观：

Object = function() { 
    // constructor
}

Object.prototype.method1 = function() {
    // Logic
}

Object.prototype.method2 = function() {}; // .... etc

在 HTML 的开发版本中，我有一个需要按精确顺序排列的 bajillion 脚本标签（每个文件一个）（用于依赖项）。我意识到这是非常低效的，也不是很容易维护。但是我不确定尝试使我的项目更易于构建和维护的最佳方向是什么。移植到 NodeJS 以方便工具和 CommonJS 模块系统？转换为 RequireJS？我刚刚开始阅读 Grunt，这对我的情况有用吗？

改进我的组织和引入某种构建系统都是我已经推迟了一段时间的事情。我现在后悔了。

4

2 回答 2

2

你需要一个模块系统。

带有 RequireJS 优化器的 RequireJS 是这里的规范解决方案。如果您更倾向于 Node.js，您可以使用browserifydefine(function (require, exports, module) { ... }); ，或者如果您不喜欢 AMD cruft ( )，则可以使用 RequireJS 优化器的 cjsTranslate 功能——可能在开发中与Cajon结合使用。

像 Grunt 这样的构建工具并不是这里最重要的因素。这主要在您有多个构建步骤时很有用——例如，运行 RequireJS 优化器，然后将您的 SASS 编译为原始 CSS，然后连接 CSS，然后将您的图像转换为精灵，然后......等等。

于 2013-02-05T23:29:11.640 回答
0

需要注意的是，对于这些<script>标签中的每一个，浏览器都必须再发出一个 HTTP 请求——即使它是从缓存中加载的，浏览器也必须询问服务器文件是否已更改。

我建议编写一个小程序，例如这个 PHP 脚本，将所有 .js 文件合并为一个：

<?php
function loop($dir="./") {
    $ret = Array();
    foreach(glob($dir."*",GLOB_ONLYDIR) as $d) $ret = array_merge($ret,loop($d));
    foreach(glob($dir."*.js") as $f) $ret[] = $f;
    return $ret;
}
$out = fopen("__main.js","w");
foreach(loop() as $file) {
    if( $file == "./__main.js") continue; // don't include "main" script
    fwrite($out,file_get_contents($file));
}
fclose($out);
?>

现在你可以只用一个<script>标签指向那个__main.js文件，你所有的脚本都会在那里。

如果您的脚本必须按特定顺序排列，那么您做错了什么。如果您只在这些文件中定义对象，则它不应依赖于其他文件，因为引用应该在方法中（init例如，考虑使用方法）。

于 2013-02-05T23:24:05.810 回答