vue学习笔记-01-前端的发展历史(从后端到前端,再到前后端分离,再到全栈)

vue学习笔记-01-前端的发展历史(从后端到前端,再到前后端分离,再到全栈)

  这篇文章是博主在看vue-前端发展简史的时候做的笔记,以供后续学习复习

文章目录

  • vue学习笔记-01-前端的发展历史(从后端到前端,再到前后端分离,再到全栈)
  • 1.后端为主的mvc时代
  • 2.基于ajax带来的spa时代
  • 3.前端为主的mv*时代
  • 4.node js带来的全栈时代
  • 5.总结

1.后端为主的mvc时代

在这里插入图片描述
springmvc流程图

优点

  • 一个很好的开发模式,降低代码的耦合,从架构上能让开发者明白代码应该写在哪里,为了让view更纯粹,可以使用thymeleaf,freemarker等模板引擎,使模板里面无法写入java代码,让前后端分工更加清晰

缺点

  • 前端开发重度依赖开发环境,开发效率底下,这种架构下,有两种协同模式,
    • 前端写demo,写好后让后端套模板,感觉像是前端写好静态页面,然后将页面交给后端,后端套成jsp,渲染数据啥的,很麻烦,套完了还需要前端确定,沟通成本挺大的
    • 前端负责浏览器端的所有开发和服务器端的view层模板开发,好处是ui相关的代码都是前端写,后端不用关注,不足就是前端需要重度绑定后端环境,环境成为影响前端开发的重要因素
  • 前端指责纠缠不清,模板引擎功能屌,依旧可以通过上下文变量来实现各种业务逻辑,只要前端弱势一些,就会被后端要求在模板层写出不少业务代码**,还有个重要的是灰色地带controller层,这个层是用来实现页面路由的,而这个页面路由本来应该是前端所关注的,但是却是由后端来实现的223**。此外controller本身也跟model纠缠不清,让人看了咬牙的业务代码经常出现controller层,坑爹。不过这些问题不能全部归于程序员的素养,不然jsp就够了223
  • 对前端发挥的局限性,性能优化之在前端做,空间非常有限,于是经常要后端来合作,但是由于后端框架限制,很难用comet,bigpipe等技术方案来优化性能

2.基于ajax带来的spa时代

  2005年-》ajax-》异步javascrip和xml被正式提出,js王者归来223(在这之前js都是在网页上贴狗皮药膏的223),于是开启了spa(single page application)单页面应用时代时代。

在这里插入图片描述

优点

  前端后端分工非常清晰,前后端关键协作点是ajax接口,看起来很美妙,但是回过头看看的话这和jsp差别不大,复杂度从服务器端的jsp里面移到了浏览器的js,使得浏览器变得很复杂,类似springmvc,这个时候开始出现浏览器端的分层架构。

在这里插入图片描述

缺点

  • 前后端接口的约定:如果后端接口一塌糊涂,或者说后端业务模型不够稳定,那么前端开发会很痛苦。不少团队也有类似尝试,通过接口规则,接口平台等方式来做,有了和后端一起沉淀的接口规则,还可以用来模拟数据,使得前后端可以在约定接口后实现高效并行开发
  • 前端开发的复杂度控制:spa应用大多以交互型为主,js代码超过十万行很正常(草),大量的js代码组织,与view层的绑定等,都不是容易的事。

3.前端为主的mv*时代

  • mvc(同步通信为主):model,view,controller
  • mvp(异步通讯):model,view,presenter
  • mvvm(异步通信为主):model,view,viewModel

大前端时代:后端:轻松

​ 为了降低前端开发复杂度,涌现了大量的前端框架,比如angular js,react,vue js,ember js等,这些框架总的原则是先按模型分层,比如templates,controllers,model,然后再在层内做切分如下图:

优点

  • 前后端职责清晰:前端工作在浏览器端,后端工作在服务器端,清晰的分工,可以让开发并行,测试数据的模拟不难,前端可以本地开发,后端则可以专注于业务逻辑的处理,输出用resful等接口
  • 前端开发的复杂度可控:前端代码很重,但合理的分层,让前端代码能各司其职,这一块值得赞赏,简单如模板的特性选择,就有很多研究,并非越强大越好,限制什么,留下哪些自由,代码如何组织,所有的一切设计,都值得话一本书讲讲。
  • 部署相对独立,可以快速改善产品体验

缺点

  • 代码不能复用,比如后端依旧要对数据做各种校验,校验逻辑无法复用浏览器端的代码,如果可以复用,那么后端的数据校验相对简单化。
  • 全异步,对seo不利,往往还要做服务器同步渲染的降级方案
  • 性能并非最佳,特别是移动互联网的环境下
  • spa不能满足所有需求,依旧存在大量多页面应用程序,url design 依旧需要后端配合,前端无法完全掌控

4.node js带来的全栈时代

​ 前端为主的MV*模式解决了很多很多问题,但如上所述,依旧存在不少不足之处。随着NodeJS的兴起,JavaScript 开始有能力运行在服务端。这意味着可以有一种新的研发模式:

在这种研发模式下,前后端的职责很清晰。对前端来说,两个UI层各司其职:

  • Front-end UI layer处理浏览器层的展现逻辑。通过CSS渲染样式,通过JavaScript添加交互功能,HTML的生成也可以放在这层,具体看应用场景。
  • Back-end UI layer处理路由、模板、数据获取、Cookie等。通过路由,前端终于可以自主把控URL Design,这样无论是单页面应用还是多页面应用,前端都可以自由调控。后端也终于可以摆脱对展现的强关注,转而可以专心于业务逻辑层的开发。

  通过Node, Web Server层也是JavaScript代码,这意味着部分代码可前后复用,需要SEO
的场景可以在服务端同步渲染,于异步请求太多导致的性能问题也可以通过服务端来缓解。前一-种模
式的不足,通过这种模式几乎都能完美解决掉。
  与JSP模式相比,全栈模式看起来是一种回归,也的确是-种向原始开发模式的回归,不过是一种螺旋上升式的回归。

基于NodeJS的全栈模式,依旧面临很多挑战:

  • 要前端对服务端编程有更进一步的认识。比如TCP/IP等网络知识的掌握。

  • NodeJS层与Java层的高效通信。NodeJS模式下,都在服务器端,RESTful HTTP通信未必高
    效,通过SOAP等方式通信更高效。一 切需要在验证中前行。
    对部署、运维层面的熟练了解,需要更多知识点和实操经验。

  • 大量历史遗留问题如何过渡。这可能是最大最大的阻力。

5.总结

​ 综上所述,模式也好,技术也好,没有好坏优劣之分,只有合适不合适,前后端分离的开发思想主要是基于SOC(关注度分离原则),上面几种模式,都是让前后端职责更加清晰,分工更加高效合理

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/482994.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

黑客帝国「缸中之脑」有眉目了?培养皿中百万人脑细胞学会打乒乓球,仅用了5分钟...

来源:机器之心编辑:张倩、杜伟既然生物神经元如此高效,为什么不拿来用呢?最新版本的《黑客帝国》还有两天才会上映,但最近的一些科技进展总让我们觉得,导演描述的世界似乎离我们越来越近了。其中一个进展来…

面试题——面经题目(1)

文章目录1. 进程调度算法2.操作系统在调度线程时会做哪些事情3.页面置换算法4.32位系统,64位的系统内存是多大5.CPU的GHz是什么意思1. 进程调度算法 进程调度规定了CPU执行就绪队列中的多个进程的顺序。 1.先来先服务 (FCFS,first come first served&…

去掉input密码框自动补全功能

<input name"password" autocomplete"off" hidden> <input type"password" autocomplete"off"> //不能加id 转载于:https://www.cnblogs.com/yuyedaocao/p/11124653.html

《Science》基因组比对的革命性技术

来源&#xff1a;生物通加州大学圣克鲁斯基因组研究所(UC Santa Cruz Genomics Institute)的研究人员推出了一种名为“长颈鹿”(Giraffe)的新工具&#xff0c;可以有效地将新的基因组序列绘制到代表多种不同人类基因组序列的“泛基因组”(pangenome)上。使用泛基因组学方法而不…

vue学习笔记-02-前端的发展历史浅谈mmvm设计理念

vue学习笔记-02-前端的发展历史浅谈mmvm设计理念 文章目录1. MVVM模式的实现者2.第一个vue程序3.什么是mvvm&#xff1f;4.为什么要用mvvm&#xff1f;5.mvvm的组成部分7.MVVM 模式的实现者8.为什么要使用 Vue.js1. MVVM模式的实现者 Model:模型层&#xff0c;在这里表示JavaSc…

linux——select、poll、epoll

文章目录1.多路I/O转接服务器2.select3.select代码4.poll5.epoll5.1 基础API5.3 epoll代码5.4 边沿触发和水平触发5.4.1 水平出发LT5.4.2 边缘触发5.4.3 服务器的边缘触发和水平触发5.4 边缘触发但是能一次读完6.epoll反应堆模型6.1 反应堆模型6.2 epoll反应堆代码7.心跳包8.线…

年终盘点:2021年中国科技的重大突破

来源&#xff1a;科技日报2021年已经步入尾声&#xff0c;过去的一年是科技界屡创新高、收获满仓的一年。这一年&#xff0c;恰逢中国共产党百年华诞&#xff0c;我国科技界更是取得多项重要突破。量子计算获得重大进展&#xff0c;使我国成为唯一在两个物理体系中实现量子计算…

vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值?

vue学习笔记-03-浅谈组件-概念&#xff0c;入门&#xff0c;如何用props给组件传值&#xff1f; 文章目录vue学习笔记-03-浅谈组件-概念&#xff0c;入门&#xff0c;如何用props给组件传值&#xff1f;什么是组件&#xff1f;为什么要使用组件&#xff1f;如何使用组件呢&…

iscsi-分区类型

iSCSI简介(Internet SCSI)&#xff1a; iSCSI 小型计算机系统接口&#xff0c;IBM公司研发&#xff0c;用于在IP网络上运行SCSI协议&#xff1b;解决了 SCSI需要直连存储设备的局限性&#xff1b;可以不停机扩展存储容量&#xff0c;iSCSI 将 SCSI 接口与 Ethernet 技术结合&am…

设计模式1——设计模式的原则

1.从面向对象说起 ~~~~~~变化是代码复用的天敌&#xff0c;面向对象的设计语言的优势就是抵御变化&#xff01;这里的所谓抵御变化&#xff0c;不是说采用面向对象的设计语言&#xff0c;就没有变化&#xff0c;而是将变化的范围降到最小。 ~~~~~~之前我们所认识的面向对象的语…

盘点:2021年度物理学十大突破|《物理世界》

来源&#xff1a;物理世界作者&#xff1a;哈米什约翰斯顿&#xff08;Hamish Johnston&#xff09;译者&#xff1a;王晓涛、乔琦2021年12月14日&#xff0c;《物理世界》&#xff08;Physics World&#xff09;编辑从其网站发表的近600项研究进展中评选出了年度物理学领域十大…

操作系统学习笔记-01-1.1课程概述

此课程来自于b站操作系统_清华大学(向勇、陈渝)&#xff0c;博客作为博主手打&#xff0c;当作参考笔记&#xff0c;回头复习223 1.1课程概述 课程简介 什么是操作系统 为什么学习以及如何学习操作系统 操作系统的实例&#xff0c;历史和结构介绍 基本概念及原理 操作系统…

Python实现二叉树的遍历

二叉树是有限个元素的集合&#xff0c;该集合或者为空、或者有一个称为根节点&#xff08;root&#xff09;的元素及两个互不相交的、分别被称为左子树和右子树的二叉树组成。 二叉树的每个结点至多只有二棵子树(不存在度大于2的结点)&#xff0c;二叉树的子树有左右之分&#…

tdms打开闪退问题

问题&#xff1a;tdms打开闪退 解决方法如下&#xff0c;打开excel&#xff0c;在菜单栏中点【文件】 左下方进入【选项】&#xff0c;然后在excel选项中点击【加载项】 然后在下方的管理&#xff0c;选择【COM加载项】&#xff0c;点击【转到】 将NI的TDMS【Add-in】的打勾&a…

操作系统学习笔记-02-1.2-什么是操作系统

1.2什么是操作系统 没有一个完整&#xff0c;精确&#xff0c;公认的定义从功能和特点上来介绍操作系统 用户角度上&#xff0c;操作系统是一个控制软件管理应用程序为应用程序提供服务杀死应用程序 资源管理管理外设&#xff0c;分配资源 操作系统架构层次 硬件之上应用程序之…

大脑活动与认知: 热力学与信息论的联系

来源&#xff1a;集智俱乐部作者&#xff1a;Guillem Collell、Jordi Fauquet译者:张澳审校&#xff1a;刘培源编辑&#xff1a;邓一雪导语信息和能量之间的关系已经在物理学、化学和生物学中得到了广泛的研究。然而&#xff0c;这种联系并没有在神经科学领域形式化。2015年&am…

我为能准时下班而做的准备,以及由此的收获,同时总结下不足

可能有人会说&#xff0c;做IT的想准时下班很难&#xff0c;尤其是在互联网公司。有些外企或国企倒能准时下班&#xff0c;原因是公司更像养老院。 其实这里存在个误区&#xff1a;能否准时下班其实和工作效率和质量有关&#xff0c;取决于自己&#xff0c;而不在于其它因素。公…

Ubuntu下进行截图的快捷方式

shiftFnPRT SC 截图结果保存在用户下的相册中

离散数学学习笔记-01-随机试验与随机事件

文章目录1.1.1随机试验与随机事件引言随机事件1.1.2.样本空间与事件的集合表示基本概念1.1.3事件之间的关系1.包含2.并&#xff08;和&#xff09;引入概率论的三个要素&#xff1a;1.1.1随机试验与随机事件 引言 确定性&#xff08;必然&#xff09;&#xff1a;一定发生&am…

18-ESP8266 SDK开发基础入门篇--TCP 服务器 RTOS版,串口透传,TCP客户端控制LED

https://www.cnblogs.com/yangfengwu/p/11112015.html 先规定一下协议 aa 55 02 01 F1 4C 控制LED点亮 F1 4C为CRC高位和低位aa 55 02 00 30 8C 控制LED熄灭 30 8C为CRC高位和低位 aa 55 03 占空比(四字节 高位在前,低位在后) CRC校验高位,CRC校验低位 预留一个问题 我用客…