如何使我的JavaScript项目更易于管理

Question

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

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

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

在HTML的开发版本中，我有一个bajillion脚本标记（每个文件一个），需要按照精确的顺序（对于依赖项）。我意识到这是非常低效的，而且不太容易维护。但我不确定尝试让我的项目更容易构建和维护的最佳方向是什么。为了方便工具和CommonJS模块系统，端口到NodeJS？是否转换为RequireJS？我刚开始读《格兰特》，这对我的处境有用吗？

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

Answer 1

您需要一个模块系统。

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

---

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

Answer 2

需要注意的是，对于每一个<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);
?>

现在，您只需要有一个指向__main.js文件的<script>标记，所有脚本都将在那里。

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