您如何保持复杂的JavaScript项目?

时间:2009-07-19 03:26:18

标签: javascript jquery firebug

我正在使用Firebug来帮助弄清楚我的JavaScript(+ JQuery)代码中发生了什么。我主要使用它打印出大量的console.log语句。这可能不是保持项目最佳的最有效方式。由于它已经从几个功能发展到超过一百个,我开始对一切如何融合起来感到困惑。我的意思是,它以某种方式工作,但是当我现在看代码时,我几乎觉得别人写了它,因为它太混乱了。

现在,每当我在Firebug中运行我的应用程序时,我都会在控制台中出现大量的console.log语句,并且我一直将它留在那里,因为当我拿出一些时,我总是会重新创建它。我认为,这使得事情变得更加令人困惑,而不是我根本没有记录。我从未真正探索过真正的调试 - 断点,监视变量等 - 这是重新获得对该项目的控制权的好方法,还是有其他可能有用的工具?

我考虑过尝试绘制所有CSS的图表,并尝试将类和ID映射到我的JavaScript中的相应函数。该项目基于一组复杂的应用程序状态组合使用了大量丰富的交互和显示/隐藏功能,可能更接近您在Flash / Flex应用程序中找到的内容。

对于可能有助于重新获得对该项目的控制的工具或方法的任何建议将不胜感激。当我开始这个项目时,我感觉非常好,因为它看起来很好,人们会赞美它有多酷,但现在感觉就像失败一样,因为我认为我甚至无法解释它是如何工作的如果我不得不接受面试。

8 个答案:

答案 0 :(得分:11)

保持代码有条理。使用命名空间将其分解为逻辑模块。寻找常见的交互模式并开发通用的可重用代码也是明智之举。

我尝试将每个新功能都编写为jQuery插件。这迫使我编写可重复使用的代码,这些代码与样式和标记不相关。

答案 1 :(得分:8)

我在一个带有许多javaScript等的Web2.0中工作过。我会给出一些帮助我的提示:

尝试 aptana ,帮助完成代码,验证等等(有ext-je,Jquery插件)

尝试 JSLint ,帮助我在处理Internet Explorer时特别解决问题。

尝试 YSlow 查看您的网站评分。

尝试WATIR,你可以创建许多测试用例的工具:点击任意位置等待某些文本出现在某处,将某些字符串写入某个字段,生成日志。

请记住将 Id`s 放在任何可能的地方。

定义代码约定可能有所帮助。 (link1 - link2

[更新]我正在查看我的书签,发现了一段非常精彩的视频: Maintainable JavaScript 看看。

希望这些简单的提示可以提供帮助!

干杯!

答案 2 :(得分:4)

您可能希望将实际的单元测试引入代码中。有各种各样的javacscript单元测试平台,例如fireunit。如果您已经安装了FireBug,这是一个非常短暂的跳跃到快乐的舒适区!

给它一个机会,即使少量的单元测试覆盖也会帮助你放松心情!

答案 3 :(得分:3)

任何时候一个程序开始从你身边溜走,你需要停下来仔细看看如何将它分解成碎片。考虑将js分解为单独的文件,这样您就不必立即将整个事情保留在脑中。任何你可以视为“完成”的东西都可以被制作成一个你不再关心它的内容的界面。

这一切都是为了隐藏这些烂摊子。无论是OO还是程序。许多人使用PHP时遇到与PHP和C相同的问题,因此您可以搜索“PHP spaghetti”并获得一些好的提示。

答案 4 :(得分:1)

如果它变得太复杂,你做得太多,所以保持简单(即:将其分解为可管理和可重复使用的块,所以不要有一个泰坦尼克号,你有许多紧凑型救生艇)。这可能是任何人都能给你的最好的非技术建议 - 而且它是有效的。

答案 5 :(得分:1)

使用像Firebug这样的优秀JavaScript调试器和调试器语句为JavaScript添加断点。完成后小心将它们删除。

答案 6 :(得分:1)

您可能想要考虑使用GWT。

  • 卓越的支持。
  • 重构的能力。
  • 没有名称空间约定 - 使用包。

有关“理由”的更全面的列表,请阅读GWT团队提供的内容。

答案 7 :(得分:1)

帮助我处理我继承的复杂JavaScript代码库的一件事是AOP package in dojo.。使用它,您可以获得一个格式良好的代码执行路径(类似于Firebug的配置文件,但在调用方法的顺序列表中)。

我不知道jQuery是否有类似的东西,但它可能值得研究,因为它可以通过你可能(或可能不依赖)必须删除的日志语句来乱丢你的代码库。“ >

一旦你知道事情是如何运作的,你可以使用这里的一些优秀技巧重新组织它。