什么是ExtJS理念?单页申请?

时间:2009-10-19 14:35:48

标签: javascript ajax extjs

我需要使用ExtJs编写我的下一个项目。 这是一个很好的Javascript lib,但我并不完全理解它背后的想法。 以docs page为例。

我应该用这样的extjs编写我的Web应用程序吗? 一页永远不应该刷新, 一切都是由AJAX完成的?

如果到达正确的地方,如何调试此类应用程序 可能需要大量“点击”并使用它。 您无法修复该错误并在浏览器中点击刷新以查看 结果

有什么建议吗?

9 个答案:

答案 0 :(得分:44)

  

我应该用ExtJS编写我的Web应用程序吗?一页永远不应该刷新,一切都由AJAX完成?

您不必像ExtJS文档那样编写应用程序。如果你查看ExtJS的示例页面,你会看到很多HTML与各个页面上的Ext小部件混合在一起。在我的工作中,我有两个不同的应用程序,我正在使用ExtJS,一个是遗留站点,我使用小部件来整理页面,另一个是完整的Web应用程序,只使用ExtJS作为前端。一旦我掌握了它,我肯定更喜欢后者,但学习曲线非常陡峭。

  

如果到达正确的地方可能需要大量“点击”并使用它,如何调试此类应用程序。

这里的关键是模块化您的应用程序。单独构建每个组件并在真空中进行测试。不要陷入困境,认为这必须是一些巨大的JavaScript文件 包含整个应用程序。在大多数Web应用程序中,源有几十个或更多JavaScript文件,这些文件仅用于部署目的。

必须进行测试和调试firebug。它允许您检查Ajax请求,实时调试JavaScript等等。

以下是一系列关于使用ExtJS编写大型应用程序的文章,这是一篇非常不错的阅读资料,内容丰富。

在ExtJS 4中构建示例应用程序 Part1 Part2 Part3

对于ExtJS 3.3及以下版本 Part1 Part2 Part3

我认为以任何一种方式使用ExtJS都是可以的,如果你刚开始使用它可能更有意义的做你最熟悉的东西并在途中添加一些ExtJS'spice'。也就是说,一旦你开始使用它来创建单页应用程序,并且你的后端只输出JSON,你可能永远不会回顾你做网络应用程序的旧方式。

答案 1 :(得分:19)

你可以做现代基于AJAX的应用程序和use the URL hash to deep-link your app

Gmail就是一个很好的例子。要访问我的收件箱,请导航至:

  

https://mail.google.com/mail/?shva=1#inbox

要访问我的联系人管理器,请浏览:

  

https://mail.google.com/mail/?shva=1#contacts

这两个“页面”都在同一页面上,导航实际上会在我使用应用程序时将我重定向到不同的页面。哈希就是这一切。

当页面加载时,您需要检查window.location.hash并使用它来更新应用的状态。

答案 2 :(得分:6)

不是单页而是少数分页应用

我参与了一个建立在以下基础上的复杂项目:

  • Asp.net 3.5
  • WCF网络服务
  • ExtJS 2.1
  • 用于DAL + DAO的
  • .netTiers(使用CodeSmith)
  • SQL 2005 + OLAP多维数据集(有些不提醒我这个噩梦的变通办法必须在应用程序内完成,因为我们使用了一些第三方控件,部分支持UpdatePanels,这个东西独自打破了我们的应用程序的基本处理)
  • 现有ExtJS的自定义外观 - 这是ExtJS成本最难的部分,因此我建议您坚持使用其中一个提供的主题

我们没有进行实际的单页应用,但确实大大减少了页数。应用程序中的每个工作区域通常都是一个单独的页面。所有接口处理都是使用ExtJS在客户端上完成的,或者是在向ExtJS客户端接口提供数据的WCF服务中的服务器端完成的。

效果很好。

我今天可能会改变一件事:我将从 Asp.net + WCF 迁移到 Asp.net MVC 。它更适合这种情况。

关于调试,我们广泛使用Firebug(Firefox插件),就像其他任何开发人员一样。

但使用ExtJS库取得了巨大成功。它使得创建类似桌面数据的重型Web应用程序变得容易。对于任何专业的Intranet Web应用程序开发来说,它都是一个很棒的统一库。使用jQuery和它的插件,你总是会被社区提供的那些插件的不同怪癖所遗忘。 ExtJS在这方面非常统一,提供了非常好的外观和开箱即用。

答案 3 :(得分:3)

我认为这是一个想法,以某种方式,与网络环境中的应用程序的桌面感觉相匹配,这意味着几乎所有内容都适用于Ajax。

至于调试,firebug是你的朋友。但调试桌面应用程序应该没有什么不同,在桌面应用程序中也可能涉及大量点击以获取错误。

答案 4 :(得分:2)

你可以使用onHashChange监听器,以及我所谓的“闭包”格式来加载extjs屏幕。我写了一篇关于如何构建single page extjs application

的文章

答案 5 :(得分:1)

在测试ExtJs方面......

这是一个测试ExtJs组件的测试工具(这个工具是用ExtJs制作的!)

Siesta Testing Tool to test ExtJs

我自己还没有亲自使用过这个,但我看了一下演示视频,看起来很可爱!

也许社区成员可能知道任何专门测试ExtJs的替代工具?

PS:我与Sencha(ExtJs)或Bryntum(Siesta)没有任何联系。我在客户层面使用ExtJs。

答案 6 :(得分:0)

你不必这样写。有时它看起来很漂亮,速度更快(没有刷新新页面)。

你可以使用一些自动化测试工具或自己编写这些东西来自动记录javascript。通常调试整个页面并不是一个好主意。当它以模块化方式构建时,它更容易。隔离问题,这更容易。

另外考虑使用firebug进行调试它可能会帮助你。

建议:我取决于你在做什么。如果您正在制作高度互动的页面,那么这样做可能是个好主意。它更快,ajax请求可以降低服务器的负载。另一方面,这样做需要更多时间。

答案 7 :(得分:0)

我正在使用带有ExtJS的ASP.Net MVC。它不是一个页面应用程序,但它很接近,感觉就像一个页面应用程序。

我们还有一个包含数百个页面的Web表单应用程序,我们在这个应用程序上应用了一些ExtJS UI小部件,使用了很多IFrame,它仍然可以工作并且看起来很棒。但我不喜欢使用网络表单模型,尽量避免使用它。

IMHO;

  1. asp.net mvc 平台会更好 比webforms平台。
  2. 控制器非常适合动作处理。
  3. 部分可用于生成html内容(脚手架在这里有很多帮助)
  4. ExtJS

    • 用于导航,
    • 上市,
    • 搜索,
    • 编辑内容,
    • 通知,
    • 非常适合其他一切......

    整体ExtJS是一个很棒的框架。

答案 8 :(得分:0)

在我们的应用程序中,我们编写了一个自定义Page类来处理“页面”之间的切换。所有页面都包含一个返回类的ExtJS容器,我们通过在URL末尾设置#hash值来保留历史记录。

使用这种方法,您可以将ExtJS库与所有资产一起加载,这样可以为性能带来巨大的回报,同时保持应用流畅。