SPA的Javascript库

时间:2013-05-05 19:32:56

标签: javascript html5 single-page-application

我正在考虑创建单页应用程序(SPA),并且想知道是否有类似jQuery的东西用于扩展Javascript并使其以相同的方式在任何地方工作,JayData for OData支持&在Javascript中查询LINQ .... 专门用于SPA的东西,但我不知道。有什么建议吗?

4 个答案:

答案 0 :(得分:3)

传统网络服务器剖析

服务器端:

  • / - >将路线映射到控制器
  • 控制器 - >结合模型+视图来构建响应
  • 查看 - >处理动态模板
  • 型号 - >定义用于获取数据的数据结构和方法

客户端:

  • 浏览器发出请求

示例GET请求:

浏览器请求资源 - > 服务器将请求路由到控制器 - > 控制器从模型中获取数据 - > controller使用视图生成html - > 控制器向浏览器发送响应 - > 浏览器重新加载并呈现DOM

单页应用程序剖析

服务器端:

  • / - >将请求重定向回浏览器/#!/ *
  • / api / Controller + Model - 路由API请求并根据模型构建响应

客户端:

  • /#!/ - >将路线映射到控制器
  • 控制器 - >结合Model + View并更新DOM
  • 查看 - >处理动态模板
  • 型号 - >通过AJAX从API获取数据

示例GET请求:

用户在浏览器中请求资源 - > 客户端路径请求到控制器 - > 控制器从模型中获取数据 - > 控制器使用查看以生成html - > 控制器更新DOM

制作SPA的一些关键区别是:

  • 大部分处理都卸载到客户端
  • 浏览器只加载了一个页面(即index.html)
  • 哈希片段/#!/*(又名hashbang)URL阻止页面刷新
  • 应用程序保持加载状态,直到用户离开页面
  • 通过AJAX动态获取其他资源

注意:从技术上讲,SPA路由器并不是必需的,但它使页面之间的导航变得更加容易。

好处:

  • SPA减少了服务器端的负载,从而实现了更高的可扩展性
  • 消除刷新可以带来更好的用户体验
  • 前端开发人员可以在浏览器中构建整个ui
  • 后端团队不必处理ui / templating
  • 将数据解耦为独立API,数据可用于多个平台(移动应用程序)

糟糕:

  • 增加浏览器/ DOM的负载
  • 某些搜索引擎+可能存在索引问题
  • 在禁用Javascript时无法在浏览器中工作

+最近改进了Webcrawlers以支持Javascript,因此他们可以为SPA编制索引。过去,您必须生成页面的静态副本,并从服务器端将其提供给爬网程序。

现在,回答您的问题:

  

jQuery用于扩展Javascript并使其以相同的方式在任何地方工作

jQuery 可以用于动态加载所有内容,但我不建议。您还必须小心管理DOM的事件和更新。为什么用砖砌成房子时用泥土建房子?

  

JayData for OData支持

OData只是具有静态类型响应的REST。 Javascript是一种动态语言 - 即使它支持OData - 使用它也没有任何好处。如果您使用TypeScript,确实支持它自己的JayData风格,但您还需要一个转换器将Typescript转换为ES5。

  

Javascript中的LINQ查询

可用于Javascript的LINQ库。如果您正在讨论LINQ-to-Objects而不是LINQ-to-SQL。

  

专门用于SPA的东西,但我不知道。有什么建议吗?

是的,最新版本的React框架利用新的VirtualDOM来防止DOM /布局颠簸,引入了一种类似于JSX的新HTML语法,使构建动态组件变得更加容易。将大部分SPA推送给后台工作者,释放UI。 React包括一个轻量级路由器和通过Flux的AJAX支持。

Angular2框架还以非常类似的方式利用最新的浏览器功能,但使用ES6 / ES7语法(即类和装饰器)使定义组件更清晰/更容易。 Angular还包括一个非常强大的路由器和AJAX支持+ Rx(Reactive Extensions)。 Angular2存在的问题是,它仍处于早期的alpha开发阶段,因此不能用于生产。

两个框架都转换为可重用的组件服务模型,而不是旧框架中使用的模型 - 视图 - 控制器模型。

答案 1 :(得分:1)

我强烈建议您查找“单页Web应用程序:JavaScript端到端”一书。

当我第一次学习Javascript时, 我发现实现SPA概念没有任何现代框架是一件非常艰难的事情。 但在彻底购买和学习本书后,我只使用三个主要的库(包括:TaffyDB,gevent,当然是jQuery的uriAnchor)来完成我的第一份工作中我的前三个基于jquery的SPA。

本书的这些作者主要指导您如何以基于特征的方式模块化您的每个JavaScript代码。 这个基于功能的概念对我们的SPA团队非常有帮助, 因为在粘贴中,我们的团队花了很多时间讨论如何避免在同一页面中冲突我们的变量, 但是当模块化时,我们只需使用jqeuryMap.find(“类选择器”)来缩小模块的范围,如果必要,使用gevent将必要的对象传递给同一页面中的另一个模块。

因此,如果您想在团队中使用轻量级且易于学习的jquery库,请参阅本书〜

Single Page Web Applications

答案 2 :(得分:0)

尝试使用Kendo UI。它是一个开源javascript库,具有用于单页面应用程序的MVVM框架和路由系统。此外,它全部与组件驱动的ui集成,具有许多非常有用的组件。

Kendo UI

答案 3 :(得分:0)