Question

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

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

Object = function() { 
    // constructor
}

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

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

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

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

Answer 1

您需要一个模块系统。

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

像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);
?>

现在，您可以只有一个<script>标记指向该__main.js文件，并且所有脚本都在那里。

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

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

2 个答案: