7

总而言之，我正在开发一个需要大量 jquery 或 js 代码的高度交互的 Web 应用程序，而且我发现我的代码变得有点难以维护并且不是那么可读。有时连作者都找不到指定的代码。

到目前为止，我为清晰代码所做的工作如下。

  1. 一个 js 文件中的一个 js 组件。（例如。CustomTab.js是我的应用程序中的一个选项卡组件。）
  2. 使用模板生成基于 JSON 的组件 HTML。
  3. 使用 Jquery 用户界面。
  4. 不显眼的 JavaScript。

还有其他需要注意的地方吗？无论如何，任何使 js 库/框架易于维护的建议或推荐技术都非常受欢迎，谢谢。

4

4 回答 4

5

我可以建议您将模块模式与RequireJS一起使用来组织您的 JavaScript 代码。对于生产，您将能够使用 RequireJS 优化器将您的模块构建到一个 JavaScript 文件中。

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

于 2013-02-27T05:57:46.583 回答
1

我将这种命名空间模式用于我的库：

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>

如果某个页面需要附加功能，您甚至可以链接方法。

于 2013-02-27T06:03:29.923 回答
1

This is exactly the same question which I ask myself each time. I think there are few ways to get easy maintaining code.

  • Contribute in javascript opensource projects and understand how they solved that problem. I think you can gather some unique solution from each project and common part of projects structure will answer to your question about maintenance.

  • Use prepared solutions like backbone, knockout, ember or angularjs if I am not mistaken angular doesn't give you structure but provide you powerful tool for creating pages with less code. Also check todomvc for ready-made solutions.

  • Read books and try to create some structure for your needs. It will be difficult and long but result (maybe few years later :)) will be awesome.

于 2013-02-27T06:35:56.520 回答
1

目前我还在为我的公司开发一个 JS 框架。我正在做的是我为 JS 使用 OOP 元素。换句话说，我正在实现与 C# 库类似的代码（不是那么相似，模拟将是正确的词）。作为 C# 中的示例，您使用 Microsoft.Window.Forms，因此我可以使用 JSOOP 并使用方法扩展和覆盖来创建相同的场景。但是，如果您在项目中走得太远，将 JS 代码转换为 JSOOP 将非常耗时。

使用 JSLint，这将验证您的代码并生成可读的、脚本引擎友好的代码。虽然 JSLint 非常严格，所以你也可以使用 JSHint。

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

如果你喜欢，你可以下载 jQuery 开发者版本，你可以大致了解他们是如何创建框架的。我从 jQuery 框架中学到了很多东西！

于 2013-02-27T06:09:09.253 回答