前后端分离模式

更新日期: 2021-11-30阅读: 1.4k标签: 模式

我是做java出身的前端开发工程师经历过由前端视图逻辑和后端的业务逻辑混合的开发模式,在到由ajax跨域请求来进行前后端的分离的模式,最后到由nodejs来进行前后端的分离,今天就分别站在不同的视角上尽可能的为大家剖析下这几种模式的优缺点。


前后端逻辑混合开发模式:

这种开发模式在现在来看几乎没有什么优点,但是在很多互联网公司依然在用,我想这大概是历史原因造成的吧,也有可能缺乏技术体系的整体思想,但是也不能完全否定其优点,与第二种开发模式相比较。

 优点:

1. 用户体验好,在相同的网络条件和业务复杂度以及硬件环境下,他可以快速进行首屏展示,避免ajax请求所带来的渲染延时。
2. 有利于seo搜索引擎优化。
3. 方便静态化,在访问高峰期可以将某些访问量大并且业务数据大部分不变的页面生成静态页面进行缓存,有利于快速渲染。

缺点:

1. 耦合度太高,在协作开发的时候前端的开发人员要与后端的开发人员互相等待来完成整体的功能,而且后端开发人员需要了解前端 的页面结构来填充逻辑代码,大大降低开发效率并且一旦出问题无法快速定位问题。
2. 不易维护,由于对于一个页面的维护需要牵扯到两端的开发人员来共同进行维护,在需求变更后容易出现bug。
3. 对后端开发语言进行了强依赖,一旦这两种语言参杂在一起,对于后端来讲前端是无法复用的。


ajax跨域请求前后端分离模式

这种分离模式可以在一定程度上弥补第一种开发模式的不足。

优点:

1. 前后端的逻辑不需要混合在一起,两端的开发人员基本不需要参与对方的代码,大大提升了整体的开发效率,也方便定位问题。
2. 与第三种开发模式相比较,前端人员不需要关注中间服务器的代码编写,从一定程度上减少了工作量。
3. 在部署方面前后端可以分别部署,从一定程度上提升了前端的价值。

缺点:

1. 首屏局部板块的渲染需要等到ajax请求数据返回后才能进行完全的展示,在网络比较慢的情况下表现的尤为明显。
2. 在性能方面ajax请求的暴涨,会影响渲染性能。
3. 异步请求的嵌套会让业务代码晦涩难懂。
4. 不利于搜索引擎优化。
5. 需要对请求的异常情况进行视图逻辑的处理。


nodejs前后端分离模式

这也是我目前非常推崇的一种分离模式。

优点:

1. node的异步特性,一个页面是被几十个html片段(每个片段一个文件)拼装成,之前php同步include这几十个片段,一定是串行 的,Node可以异步,读文件可以并行,一旦这些片段中也包含业务逻辑,异步的优势就很明显了,真正做到哪个文件先渲染完就先 输出显示。前端机的文件系统越复杂,页面的组成片段越多,这种异步的提速效果就越明显。
2. 前端发挥空间大大提升,能玩的东西变多,例如websocket,前端可以自己来玩并且在controller层和model层上有更多的发挥 空间,比如在node端自己做静态数据缓存等。
3. 服务器优势,node本身内置服务器功能,几行代码就可以启动一个服务器,免去了对apache,wamp等服务器的依赖。
4. 服务端和浏览器端公用一种语言降低了学习成本,写一套代码便可前后端同时运行。
5. 前后端彻底分离,node端只要启动一个http-proxy进行api请求转发类似于nginx的代理功能,前端只需要玩转json就可以,也 不存在跨域问题。
6. 服务器分别部署,可以单独进行优化,也方便node做静态化。
7. 可以进行首屏的渲染,目前像vuejs,react都可以在服务端渲染页面然后输出静态html代码,从而弥补了ajax请求的不足。

缺点:

1. 对于一般前端开发来说,觉得nodejs学习门槛比较高,牵扯到服务端就望而却步,其实没什么学的,很好上手。
2. node的单线程机制在部署的时候需要启动一个监控进程,在node挂了后能自动重启,例如在linux上配置一个supervisor。
3. 在node端调试相对比较麻烦,没有像java那样的远程调试机制,开发者一般通过console.log进行调试,当然也可以是用debug 模式启动node来进行调试。
4. 对开发人员的编码能力要求比较高,因为单线程的缘故,所以尽量避免写出同步执行的代码,对于cpu密集型的运算尽量不要让 node来做。


链接: https://fly63.com/article/detial/10892

js设计模式之单例模式,javascript如何将一个对象设计成单例

单例模式是我们开发中一个非常典型的设计模式,js单例模式要保证全局只生成唯一实例,提供一个单一的访问入口,单例的对象不同于静态类,我们可以延迟单例对象的初始化,通常这种情况发生在我们需要等待加载创建单例的依赖。

前端设计模式:从js原始模式开始,去理解Js工厂模式和构造函数模式

工厂模式下的对象我们不能识别它的类型,由于typeof返回的都是object类型,不知道它是那个对象的实例。另外每次造人时都要创建一个独立的person的对象,会造成代码臃肿的情况。

JavaScript设计模式_js实现建造者模式

建造者模式:是将一个复杂的对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示。工厂类模式提供的是创建单个类的模式,而建造者模式则是将各种产品集中起来进行管理,用来创建复合对象

html和xhtml,DOCTYPE和DTD,标准模式和兼容模式

主要涉及知识点: HTML与XHTML,HTML与XHTML的区别,DOCTYPE与DTD的概念,DTD的分类以及DOCTYPE的声明方式,标准模式(Standard Mode)和兼容模式(Quircks Mode),标准模式(Standard Mode)和兼容模式(Quircks Mode)的区别

前端四种设计模式_JS常见的4种模式

JavaScript中常见的四种设计模式:工厂模式、单例模式、沙箱模式、发布者订阅模式

javascript 策略模式_理解js中的策略模式

javascript 策略模式的定义是:定义一系列的算法,把它们一个个封装起来,并且使它们可以相互替换。 策略模式利用组合,委托等技术和思想,有效的避免很多if条件语句,策略模式提供了开放-封闭原则,使代码更容易理解和扩展, 策略模式中的代码可以复用。

javascript观察者模式_深入理解js中的观察者模式

javascript观察者模式又叫发布订阅模式,观察者模式的好处:js观察者模式支持简单的广播通信,自动通知所有已经订阅过的对象。存在一种动态关联,增加了灵活性。目标对象与观察者之间的抽象耦合关系能够单独扩展以及重用。

Vue中如何使用方法、计算属性或观察者

熟悉 Vue 的都知道 方法methods、计算属性computed、观察者watcher 在 Vue 中有着非常重要的作用,有些时候我们实现一个功能的时候可以使用它们中任何一个都是可以的

我最喜欢的 JavaScript 设计模式

我觉得聊一下我爱用的 JavaScript 设计模式应该很有意思。我是一步一步才定下来的,经过一段时间从各种来源吸收和适应直到达到一个能提供我所需的灵活性的模式。让我给你看看概览,然后再来看它是怎么形成的

Flutter 设计模式 - 简单工厂

在围绕设计模式的话题中,工厂这个词频繁出现,从 简单工厂 模式到 工厂方法 模式,再到 抽象工厂 模式。工厂名称含义是制造产品的工业场所,应用在面向对象中,顺理成章地成为了比较典型的创建型模式

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!