0

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

4

5 回答 5

3

传统网络服务器的剖析

服务器端：

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

客户端：

  • 浏览器发出请求

GET 请求示例：

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

单页应用剖析

服务器端：

  • / -> 以 /#!/* 的形式将请求重定向回浏览器
  • /api/控制器 + 模型 - 路由 API 请求并从模型构建响应

客户端：

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

GET 请求示例：

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

SPA 有几个关键区别：

  • 大部分处理被卸载到客户端
  • 浏览器只加载一页（即 index.html）
  • 哈希片段/#!/*（又名 hashbang）URL 阻止页面刷新
  • 应用程序保持加载状态，直到用户离开页面
  • 额外的资源通过 AJAX 动态获取

注意：从技术上讲，SPA 路由器不是必需的，但它使页面之间的导航更容易。

好的：

  • SPA 可减少服务器端的负载，从而实现更大的可扩展性
  • 消除刷新可以带来更好的不生涩的用户体验
  • 前端开发者可以在浏览器中构建整个 ui
  • 后端团队不必处理 ui/模板
  • 将数据解耦为独立的 API，数据可以在多个平台（例如移动应用程序）上使用

坏处：

  • 增加浏览器/DOM 的负载
  • 一些搜索引擎+可能有索引问题
  • 禁用 Javascript 时在浏览器中不起作用

+Webcrawlers 最近得到了改进，以支持 Javascript，因此它们可以索引 SPA。过去，您必须生成页面的静态副本并从服务器端将它们提供给爬虫。

现在，回答您的问题：

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

jQuery可用于动态加载所有内容，但我不建议这样做。您还必须小心管理事件和对 DOM 的更新。既然可以用砖头盖房子，为什么还要用粘土盖房子呢？

JayData 用于 OData 支持

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

Javascript 中的 LINQ 查询

有一个LINQ库可用于 Javascript。如果您谈论的是 LINQ-to-Objects 而不是 LINQ-to-SQL。

专门用于SPA的东西，但我不知道。有什么建议么？

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

Angular2 框架也以非常相似的方式利用了最新的浏览器功能，但使用 ES6/ES7 语法（即类和装饰器）来使定义组件更加简洁/容易。Angular 还包括一个非常强大的路由器和 AJAX 支持 + Rx（反应式扩展）。Angular2 的问题在于，它仍处于早期的 alpha 开发阶段，因此不能用于生产。

这两个框架都在过渡到可重用的组件服务模型，而不是旧框架中使用的模型-视图-控制器模型。

于 2015-11-03T03:14:00.830 回答
1

我强烈建议您阅读“单页 Web 应用程序：JavaScript 端到端”一书。

当我第一次学习 Javascript 时，我发现在没有任何现代框架的情况下实现 SPA 概念是一件非常困难的事情。但是在彻底购买和学习这本书之后，我在第一份工作中简单地使用了三个主要的库（包括：TaffyDB、gevent、uriAnchor 当然是 jQuery）来完成我的前三个基于 jquery 的 SPA。

本书的这些作者主要指导你如何以基于特征的方式模块化你的每一个 javascript 代码。这个基于特征的概念对我们的 SPA 团队非常有帮助，因为在粘贴中，我们团队花了很多时间讨论如何避免在同一页面中冲突我们的变量，但是在模块化时，我们只是使用 jqeuryMap.find("class selector") 来缩小模块的范围，如有必要，使用 gevent 将必要的对象传递给同一页面中的其他模块。

所以，如果你想在你的团队中使用轻量级和易学的jquery库，可以参考这本书~

单页 Web 应用程序

于 2015-05-26T01:50:11.223 回答
0

试试剑道用户界面。它是一个开源 javascript 库，具有 MVVM 框架和用于单页应用程序的路由系统。另外，它都与组件驱动的 ui 集成，其中包含许多非常有用的组件。

剑道用户界面

于 2013-07-14T15:27:55.360 回答
0

对于 LINQ 查询检查这个库

https://github.com/iabdelkareem/LINQ-To-JavaScript

于 2015-11-08T11:02:37.127 回答
-1

试试 Turbo https://turbo.hotwired.dev 使用 Turbo，您可以让服务器直接交付 HTML，这意味着检查权限、直接与您的域模型交互以及编写应用程序的所有其他逻辑都可以发生更多或者更少地使用您最喜欢的编程语言。您不再在 JSON 分界线的两侧镜像逻辑。所有的逻辑都在服务器上，浏览器只处理最终的 HTML。

于 2022-02-21T10:09:46.223 回答