如何使JavaScript代码易于维护

Question

大家好，我正在开发一个高度交互的Web应用程序，需要大量使用jQuery或JavaScript代码。但我发现我的代码变得有点难以维护，也不容易阅读。有时甚至连作者自己都找不到指定的代码。

到目前为止，我为了清晰的代码做了以下工作：

1. 每个JS组件都写在一个独立的JS文件中。（例如：CustomTab.js是我的应用中的一个选项卡组件）
2. 使用模板根据JSON生成组件HTML。
3. 使用Jquery UI。
4. 无侵入式的JavaScript。

除此之外，还有其他需要注意的地方吗？ 无论如何，任何使JavaScript库/框架易于维护的建议或推荐技术都将不胜感激，谢谢。

- Joe.wang

---

好问题。我会留下来看看这个帖子会得到什么回复！;-) - Harsha Venkataramu

另外，您可以尝试使用 jquery cdn，这样您就可以从JavaScript文件夹中删除jquery文件。 - Prateek

为什么您说自己的代码越来越难以维护？您遇到了哪些具体问题？具体而言，为什么作者找不到代码？还有哪些细节可以帮助我们？ - MattDiamant

@pKs 对于 jQuery 的主文件，我们可以按照您所说的那样操作。但是对于使用自定义下载的 jQuery 文件，我们能做到吗？谢谢。 - Joe.wang

这取决于你选择的方法。如果我是你，我会尝试使用 GWT 来管理 JavaScript 和其他相关内容。 - Prateek

Answer 1

我建议您使用模块模式与RequireJS一起来组织您的JavaScript代码。在生产环境中，您可以使用RequireJS优化器将模块构建成一个JavaScript文件。

另外，如果您预计客户端应用程序会非常庞大，请考虑使用一些JavaScript MVC框架（如Backbone.js）与服务器端RESTful服务一起使用。

- Eugene Naydenov

---

嗨，Evgeniy，我喜欢你的想法。你能告诉我更多关于js mvc的信息吗？它有什么好处？谢谢。 - Joe.wang

主要的好处是浏览器负责视图渲染和用户操作处理，因此可以大大减轻服务器的负担，交互通常通过AJAX进行，这样可以提高用户体验。我的当前项目有86%的JavaScript代码和12%的Python代码（RESTful服务），所以你可以想象客户端使用了多少处理器时间，服务器使用了多少处理器时间。 - Eugene Naydenov

我能将jQuery UI与之结合吗？因为我认为jQuery UI在UI呈现方面很出色。谢谢。 - Joe.wang

当然可以。您可以在Backbone视图中呈现任何元素，并对其进行自定义逻辑处理，比如初始化jQuery UI小部件等。 - Eugene Naydenov

Answer 2

目前我也在为公司开发一个JS框架。我的做法是使用OOP元素编写JS代码。换句话说，我正在实现类似于C#库的代码（不是那么相似，模拟可能是正确的词）。例如，在C#中，你使用Microsoft.Window.Forms，所以我可以使用JSOOP并使用方法扩展和覆盖来创建相同的场景。但如果你在项目中过于深入地转换JS代码为JSOOP将会非常耗时。

使用JSLint，它将验证你的代码，并将其转化为易读、脚本引擎友好的代码。虽然JSLint非常严格，但你也可以使用JSHint。

为每个组件使用单独的文件是一个好主意，我也在这样做。

如果你愿意，你可以下载jQuery开发者版本，从中了解他们如何创建框架。我从观察jQuery框架中学到了很多东西！

- Ryxle

Answer 3

这正是我每次自问的问题。我认为有几种方法可以轻松维护代码。

• 参与JavaScript开源项目并了解他们如何解决问题。我认为您可以从每个项目中收集一些独特的解决方案，项目结构的共同部分将回答您关于维护的问题。

• 使用预先准备好的解决方案，例如backbone、knockout、ember或angularjs。如果我没记错，AngularJS不能给你提供结构，但可以提供创建少量代码页面的强大工具。还可以查看todomvc以获取现成的解决方案。

• 阅读书籍并尝试为自己的需求创建一些结构。这将是困难和漫长的，但结果（也许几年后：））将是令人惊叹的。

- Ruben Nagoga

---

嗨，Ruben，它们都是不错的方法，但我更喜欢第二个。尝试使用JS MVC框架，谢谢。 - Joe.wang

Answer 4

我在我的库中使用这种命名空间模式：

MyLibrary.ListView.js:

var MyLibrary = MyLibrary || {};

MyLibrary.ListView = {

    doSomethingOnListView: function() {
        ...
        return this;
    },

    doSpecialThing: function() {
        ...
        return this;
    },

    init: function() {

        // Additional methods to run for all pages
        this.doSomethingOnListView();

        return this;
    }
};

无论哪个页面需要这个：

<script type="text/javascript" src="/js/MyLibrary.ListView.js"></script>
<script type="text/javascript">
$(function() {
    MyLibrary.ListView
        .init()
        .doSpecialThing();
});
</script>

你甚至可以链接方法，如果某个页面需要额外的函数。

- Samuel Liew