虚拟DOM与真实DOM,Angular与React,Framework与Libraries,SPA与MPA

DOM代表“文档对象模型”。 DOM是一种平台和语言无关的界面,它允许程序和脚本动态访问和更新文档的内容,结构和样式。 使用文档对象模型,程序员可以构建文档,浏览其结构以及添加,修改或删除元素和内容。 DOM将文档表示为节点和对象。 通过这种方式,编程语言可以连接到页面。 DOM是网页的面向对象的表示形式,可以用JavaScript之类的脚本语言进行修改。 使用文档对象模型可以访问,更改,删除或添加在HTML文档中找到的所有内容。

以下是DOM工作原理的简短示例:

这是工作中的DOM的代码示例。

通过’querySelector()’方法,您可以将HTML文档中的任何元素作为目标,并如上所述进行编辑。

现在,我们转向虚拟DOM。

虚拟DOM是模块的集合,旨在提供声明性的方式来表示应用程序的DOM。 因此,无需在应用程序状态更改时更新DOM,只需创建一个虚拟树或Virtual Tree,它看起来像您想要的DOM状态。 然后,虚拟DOM将弄清楚如何有效地使DOM看起来像这样,而无需重新创建所有DOM节点。 虚拟DOM对象是DOM对象的表示形式 ,例如轻量级副本。

  • 更新过程得到优化和加速。
  • JSX使组件/块代码可读。
  • React的数据绑定为创建动态应用程序创造了条件。
  • 虚拟DOM是移动优先应用程序的理想选择。
  • 即时渲染。 使用包含方法来最大程度地减少DOM操作的数量有助于优化更新过程并加快更新过程。 可测试的。

如果您正在考虑创建自己的应用程序,则可能听说过Web应用程序有两种主要设计模式:

多页应用程序(MPA)和单页应用程序(SPA)。 当然,这两种模型各有利弊。

单页应用程序是在浏览器中运行的应用程序,在使用过程中不需要重新加载页面。 SPA独立请求标记和数据,并直接在浏览器中呈现页面。 单页面站点有助于将用户保持在一个舒适的Web空间中,在该空间中,内容以简单,轻松和可操作的方式呈现给用户。

  • SPA快速,因为大多数资源(HTML + CSS + Scripts)在应用程序的整个生命周期中仅加载一次。
  • 开发过程得到了简化和简化。 无需编写代码即可在服务器上呈现页面。
  • 制作移动应用程序更容易,因为开发人员可以将相同的后端代码重新用于Web应用程序和本机移动应用程序。
  • SPA可以有效地缓存任何本地存储。 应用程序仅发送一个请求,存储所有数据,然后可以使用此数据甚至可以脱机工作。
  • 由于需要将繁重的客户端框架加载到客户端,因此下载速度很慢。
  • 与“传统”应用程序相比,SPA的安全性较低。但是,更多的库或框架(如ReactJS和AngularJS)更安全。

多页应用程序以传统方式工作。 每次更改都会显示数据或将数据提交回服务器请求,从而在浏览器中从服务器渲染新页面。 与SPA相比,它的尺寸更大,但速度却慢得多。

  • 正确进行SEO管理很容易。 由于可以针对每页一个关键字优化应用程序,因此可以为不同的关键字排名提供更好的机会。
  • MPA允许您创建新内容并将其放置在新页面上。 多页应用程序可以根据需要包含有关产品或服务的尽可能多的信息,而没有页面限制。
  • MPA可以为许多分析提供有关网站性能的有价值的信息:哪些功能有效,哪些功能无效。
  • 当加载另一个页面时,浏览器会完全重新加载页面数据并再次下载所有资源,甚至是在所有页面中重复的组件。
  • 开发人员需要对前端或后端使用框架。 这样可以延长应用程序的开发时间。
  • 另外,由于开发人员需要保护每个单独的页面,因此维护安全性可能会遇到问题。

首先,我们必须了解,库和框架之间的区别是什么。

图书馆
库是您可使用的可重用代码段,即它不提供任何挂钩来扩展它。 库通常只关注单个功能,您可以通过API进行访问。 您调用一个库函数,它执行一些代码,然后将控制权返回给您的代码。

构架
框架是一段代码, 指示您的项目将遵循的体系结构。 选择要使用的框架后,必须遵循框架的代码和设计方法。 该框架将为您提供钩子和回调,以便您在其上进行构建 —然后它将在需要时调用插入的代码这种现象称为控制反转。

框架通常会包含许多库,以使您的工作变得更轻松。

现在我们知道库和框架之间的主要区别,我们可以继续使用ReactJS和AngularJS。

React是用于构建用户界面的声明性,高效且灵活的JavaScript库。 它使您可以从孤立的小代码段(称为“组件”)中创建可重用和复杂的UI。

  • ReactJS的学习曲线很低。
  • React使用JSX而不是通常的JavaScript来创建模板。
  • ReactJS仅使用一个方向的数据流-向下。 在这种类型的结构中,子元素无法影响父数据。
  • ReactJS使用虚拟DOM极大地提高了应用程序的速度,并且仅更新发生更改的部分。
  • ReactJS是出色的跨平台支持者。
  • ReactJS易于采用,并且具有针对UI的设计。
  • 在ReactJS中,您需要更多的代码来进行开发。
  • 不使用同构方法来利用应用程序会导致SEO索引编制问题。
  • ReactJS具有很大的依赖关系。

AngularJS是创建网站使用最广泛的框架之一。 另外,对于主流开发,使用了AngularJS。 而且,它得到了一个由才华横溢和才华横溢的开发人员组成的全球社区的良好支持。 使用AngularJS,我们可以生成动态SPA。

  • 熟悉开发后,开发过程变得快速而简单。 然后反应更快。
  • AngularJS具有很高的表现力,因此与其他框架和库相比,所需的代码更少。
  • AngularJS支持双向绑定。
  • 没有什么比安排出色的最终用户体验更好了,AngularJS使响应式,快速加载和无缝导航的网站和应用程序成为可能。
  • AngularJS使用指令来保持脚本和HTMP页面无混乱且组织得井井有条。
  • 基础很简单,但是学习曲线变得非常陡峭,很难学习。
  • 范围易于使用,但难以调试。
  • 指令功能强大,但难以使用。
  • AngularJS具有搜索引擎可索引性。