dojo vs extjs 用于大型单页 js 应用程序

Posted 2023-02-22

【中文标题】dojo vs extjs 用于大型单页 js 应用程序

【英文标题】：dojo vs extjs for large single page js app

【发布时间】：2012-02-12 12:21:12

【问题描述】：

我将构建一个非常大的 mvc js 应用程序管理应用程序，并将其范围缩小到 dojo 和 extjs

我想知道是否有人在过去 6 个月内对这些框架有任何经验，以及您是否对以下任何领域有任何问题

发展速度 mvc 文档 绑定 内化 小部件主题化 可搜索的客户端存储（不必离线，只需存储收到的记录，然后对这些记录进行本地搜索） 使用 selenium 等全栈工具进行测试 数据网格、分页、排序全作品

【问题讨论】：

您是否考虑支持从右到左的语言？

你将在服务器端使用什么？您是否考虑过许可问题？ Dojo 在所有情况下都是免费的，如果您不开发开源项目，Ext-JS 也不是免费的......

是的，不幸的是它不是开源的，但它是一个很好的框架，有很多追随者，所以考虑到除了 dojo 没有任何替代品，价格标签不是问题

如果你在服务器端使用Java，你也可以试试ZK（zkoss.org）。它集成了许多 Ext-JS 组件。与 grails 框架也有很好的集成，以防您在服务器端选择它。这是我发现开发这类应用程序（grails + ZK）的最快方法。在此处查看幻灯片：code.google.com/p/zkgrails

还有一个最近的例子：books.zkoss.org/wiki/Small_Talks/2012/January/Ajax_GSP_with_ZK 和这里books.zkoss.org/wiki/Small_Talks/2012/January/…

【参考方案1】：

因为 Dojo 可以满足您的所有要求。

Dojo 支持完全按照您的要求行事的“商店”。 它们还支持不同的东西，如 JsonRestStore、XMLStore、htmlStore 等，因此您可以轻松切换数据源。

关于单元测试，您可以使用名为 Dojo Objective Harness 的内置工具，它是机器人，或者其他类似 selenium 或 eventd (dojo) 的工具。

关于 MVC，dojo 有一个叫做 dojox.mvc 的东西：http://livedocs.dojotoolkit.org/releasenotes/1.7#mvc

虽然还有很多其他的东西:)

我建议在这里阅读教程：http://dojotoolkit.org/documentation/

您的问题有点难以回答，因为我想今天几乎所有体面的框架都可以满足您的要求。每个开发者都会告诉你他更喜欢的框架更好^^

就我个人而言，我使用 Dojo，我发现它功能强大，特别适合大型应用程序。他们也非常活跃，紧跟最新趋势（AMD Loader RequireJS 等）。 还有一个很好的社区，互相帮助，特别是在邮件列表和 irc 频道上。

此外，无论如何，IBM 等公司信任并花时间帮助框架使其变得更好。

开发速度：不错 mvc : 好 文档：好 - 最近取得了巨大的进步 :) 绑定：很好 内化：很好 小部件主题化：使用 LESS Rocks 一个可搜索的客户端存储（不必离线，只要能够存储收到的记录，然后对这些记录进行本地搜索）：好 使用像 selenium 这样的全栈工具进行测试：好 数据网格、分页、对整个作品进行排序：新 dgrid 很棒，旧网格也可以

【讨论】：

从本质上讲，我要寻找的是与我提到的主题相关的人们的体验（好的和坏的），你是否在我提到的任何主题上使用过道场？如果是这样，什么是好的，什么是坏的？

* 开发速度：好 * mvc：好 * 文档：不好，但最近取得了巨大进步 :) * 绑定：好 * 内部化：好 * 小部件主题化：使用 LESS 石头来定制东西 * a可搜索的客户端存储（不必离线，只需在收到记录后存储记录，然后对这些记录进行本地搜索）：好 * 使用诸如 selenium 之类的全栈工具进行测试：好 * 数据网格、分页、对整体进行排序作品：新的 dgrid 很棒，旧的网格还可以 Dojo 非常强大，但有时可能会很棘手，良好的支持弥补了这一点

@PEM：您应该将这些内容添加到您的答案中。

【参考方案2】：

这是 Ext-JS 提供的。

开发速度：http://docs.sencha.com/ext-js/4-0/#!/example 看看例子有多简单 MVC：http://docs.sencha.com/ext-js/4-0/#!/api/Ext.app.Controller（尚未内置路由） 文档：http://docs.sencha.com/ext-js/4-0/# 绑定http://docs.sencha.com/ext-js/4-0/#!/example/grid/binding.html 内部化：每个小部件都可以 i18ned 小部件主题化：使用 SASS 可搜索的客户端商店：http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.Store-method-find 使用诸如 selenium 之类的全栈工具进行测试：不是内置的，但由于它都是基于 OO 且解耦的，因此测试很容易 数据网格、分页、排序全作品：http://docs.sencha.com/ext-js/4-0/#!/example/grid/multiple-sorting.html和http://docs.sencha.com/ext-js/4-0/#!/example/grid/paging.html 动态类加载：http://www.sencha.com/blog/countdown-to-ext-js-4-dynamic-loading-and-new-class-system/ RTL 支持：http://www.sencha.com/forum/showthread.php?137065-EXTJS-4-RTL-When 图表：我个人认为它低于 Ext-JS 标准的标准，但它们提供了一个功能齐全的包（不存在错误）http://docs.sencha.com/ext-js/4-0/#!/guide/drawing_and_charting我实际上更喜欢使用http://code.google.com/p/flot/，我创建了一个简单的包装器来使用它作为一个 Ext-JS 组件

这不属于答案，但如果您最终使用 Ext-JS，您可能需要以下内容以获得更好的图表性能。 Ext 图表的优势在于它们更易于交互（鼠标悬停、单击），因为它不像 flot 那样基于画布。

/**
 * Renders a single flot chart, a much simplifed version of ExtFlot
 */
Ext.define('Ext.ux.FlotPanel',  
    extend: 'Ext.Component',
    alias: 'widget.flot',

    /**
     * @cfg number[][] data The data to be drawn when it gets rendered
     */
    data: null,

    /**
     * @cfg object flotOptions
     * The options to be passed in to $.plot
     */
    flotOptions: null,

    /**
     * @property
     * The Flot object used to render the chart and to manipulate it in the future. It will only
     * be available after the first resize event
     * You may not set this property but you are free to call methods on it
     */
    flot: null,

    initComponent: function() 
        this.callParent(arguments);
        // The only time that we're guaranteed to have dimensions is after the first resize event
        this.on('resize',  function(cmp)                
            if (!cmp.flot) 
                cmp.flot = $.plot(cmp.getTargetEl().dom, cmp.data, cmp.flotOptions);
             else 
                // Flot knows to look at the container's size and resize itself 
                cmp.flot.resize();
                cmp.flot.setupGrid();
                cmp.flot.draw();
            
        );

        this.on('beforedestroy', function(cmp)
            if (cmp.flot) 
                cmp.flot.shutdown();
            
        );
    
);

当我 4 年前看 Dojo 时，我讨厌它。不能忍受在 HTML 中声明小部件。我更愿意用 JS 对象声明它们（我听说你现在可以在不指定 HTML 的情况下声明小部件。有些人喜欢在 HTML 中创建小部件，但在我的例子中（动态的商业思维应用程序），屏幕上的每一块是动态的，配置来自服务器，所以我不希望服务器生成我的 HTML，因为我需要在我的 JS 中了解它。

无论如何，我对 Ext-JS 非常满意，没有理由去购买新框架。

【讨论】：

上述任何一点你都使用过 extjs 吗？如果你使用了，你遇到的优点和缺点是什么？

我已经将 Ext-JS 用于上述所有内容，除了：RTL 是用于下一个版本，但我在 3 年前实现了自己的支持。我也没有最宽的主题，我只是使用了提供的灰色主题。但是我已经完成了创建新主题的步骤，而且非常简单（我喜欢 SASS）。我远离 Ext-JS 的唯一部分是图表。在与多个图表错误（团队承认）作斗争之后，我又重新使用了 flot。 code.google.com/p/flot

“4 年前看 Dojo 时，我讨厌它。”您对 Dojo 的评论完全无关紧要…… 4 年前的 Ext-js 呢？在 Dojo 中有两种创建小部件的方法，即编程方式和声明方式，具体取决于您的需要和偏好。你也可以完全管理一个小部件的生命周期，并且发布代码显示开始使用 ext-js 你已经需要破解东西并不会让它更亮:)

@PEM：我只是在分享我的经验。我的意思是我不能为道场说话，因为我已经 4 年没有看过它了。我的代码只是展示了一起使用 flot 和 extjs 是多么容易

dojo 的 API 文档很糟糕。虽然 Ext 非常出色。