A. 前端面试题-服务端渲染SSR
我最开始接触是在Vue的官网上,开始是作为一个小节出现,现在已经是个专门的大章节来专门讲Vue服务端渲染的内容。
服务端渲染 简单来说就是在服务器上把数据和模板拼接好以后发送给客户端显示。
回顾下前端的 历史 ,最开始的站点是简单的静态网站。后端大哥把.html文件推送给用户,用户浏览器解析这些字符串进行显示。那个时候就是 服务端渲染 。可是后来由于网站内容越来越复杂、特效越来越炫酷,这种‘兼职’状态已经不能满足需求,细分之下的前端出现了。
随后为了方便的开发,开始提倡 前后端分离,大家各做各的,彼此之间通过基于HTTP的各种API协作,变成了数据动态生成的新一代站点。
再后来出现了Vue等三大MV*框架,网站做成了SPA应用,解决了很多问题的同时也带来了新问题,其中最突出的两个:难以SEO和首屏加载缓慢。
想要了解更多关于前端技术内容欢迎关注尚硅谷教育!
前端安全相关面试题
前端JS高阶面试题
前端设计模式-面试题
web前端渲染优化
web前端之二叉搜索树
B. 前端是做什么的
前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展,HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,合适的动效设计,给用户带来极高的用户体验。
HTML、CSS、JavaScript
这三个是前端开发中最基本也是最必须的三个技能。前端的开发中,在页面的布局时, HTML将元素进行定义,CSS对展示的元素进行定位,再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单,但这里面需要掌握的东西绝对不会少。在进行开发前,需要对这些概念弄清楚、弄明白,这样在开发的过程中才会得心应手。
C. 前端Vue.js框架是什么
前端Vue.js框架是什么?有哪些特点?Vue.js是一个前端框架,用于构建用户界面的渐进式框架。在Vue中一个核心的概念是让用户不再操作DOM元素解放了用户的双手,让程序员可以更多的时间去关注业务逻辑,Vue框架能够提高开发的效率。
科普时刻 :
黑马程序员vue前端基础教程-4个小时带你快速入门vue
前端开发利器vue,微信小程序快速开发实战
web前端基础必备教程-2小时玩转Vue单元测试
黑马程序员Vue2.0+Vue3.0入门到精通,大厂前端岗位必备技能
1、Vue.js是什么?
Vue是一个js库,且无依赖别的js库跟jquery差不多。Vue核心库只关注视图层,非常容易与其它库或已有项目整合。Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API。
Vue.是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是Vue 被设计为可以自底向上逐层应用。Vue的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
2、Vue的MVVM设计模式是什么?
如果了解前端一定知道MVVM和MVC这两种设计模式,且很有可能对mvp也有一些了解。MVC即model,view,control,jQuery就是采用的这种设计模式。MVVM即model,view,viewmodel,是数据驱动模式,即所有的一切通过操作数据来进行而尽量避免操作DOM树。
不关注DOM结构,考虑数据该如何储存,用户的操作在view通过viewmodel进行数据处理,分情况是否通过ajax与model层进行交互,再返回到view层,在这个过程中view和viewmodel的数据双向绑定使得我们完全的摆脱了对DOM的繁琐操作,而是专心于对用户的操作进行处理,避免MVC中control层过厚的问题。
在vue调试方面可以选择安装chrome插件vue Devtools。打开vue项目,在console控制台选择vue面板。在Devtools对象中,可以选择组件,查看对应组件内的数据信息。也可以选择Vuex选项,查看该项目内Vuex的状况变量信息。
3、Vue.js有哪些优点?
声明式,响应式的数据绑定;组件化的开发;Virtual DOM;响应式的数据绑定
(1)jQuery首先获取到DOM对象,然后对DOM对象进行进行值的修改等操作;
(2)Vue首先把值和js对象进行绑定,然后修改js对象值,Vue框架会自动把DOM的值就行更新;
(3)简单理解为Vue帮我们做了DOM操作,以后用Vue就需要修改对象的值和做好元素和对象的绑定,Vue框架会自动做好DOM相关操作;
(4)DOM元素跟随JS对象值的变化而变化叫做单向数据绑定,若JS对象的值也跟随着DOM元素。
4、需要学习哪些Vue.js框架相关知识点?
Vue.js 安装、Vue.js 目录结构、Vue.js 起步、Vue.js 模板语法、Vue.js 条件语句、Vue.js 循环语句、Vue.js 计算属性、Vue.js 监听属性、Vue.js 样式绑定、Vue.js 事件处理器、Vue.js 表单、Vue.js 组件、Vue.js 组件自定义事件、Vue.js 自定义指令、Vue.js 路由、Vue.js 过渡& 动画、Vue.js 混入、Vue.js Ajax(axios)、Vue.js Ajax(vue-resource)、Vue.js 响应接口、Vue.js 实例等。
Vue.js 是一个JavaScriptMVVM库,一套构建用户界面的渐进式框架。以数据驱动和组件化的思惟构建的,采取自底向上增量开辟的设计。比拟于Angular.js,Vue.js供给了加倍简洁、更易于懂得的API,使得我们快速地上手并应用Vue.js。
D. Vue的框架(了解)
前端MVC设计模式
M,V,VM设计模式
Vue
安装独立版本
我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用
循环语句 (循环使用 v-for 指令)
v-for 指令 需要以 car in arr 形式的特殊语法, car 是源数据数组并且 arr 是数组元素迭代的别名。
Ajax(axios) - GET
Ajax(axios) - POST
阻止a标签跳转四种方法
E. web前端的三个核心技术是什么 分别有什么作用
web前端需掌握的核心技术
1、学习html。
这个是最简单的,也是最基础的.要熟练掌握div、form table、ul li 、p、span、font这些标签,这些都是最常用的,特别是div和table,div用于布局、table也可以用于布局,但是不灵活,基本table是用来和数据打交道.
2、学习css。
这里说的css不包括css3,一般我们看到web前端开发工程师的要求里面,有一个会使用css+html 或者 css+div 来进行界面布局,所以css是用于辅助html来布局和展示的,我们称之为“css样式”,为什么会说css+div呢?因为我上面说了div就是html主要用于布局的东西,所以div就是核心掌握的东西!那么css肯定必须要配合div来使用才好.css要熟练掌握float、position、width、height,以及对于的最大最小、会使用百分百、overflow、margin、padding等等,这些都是跟布局有关系的样式,一点要掌握.
3、学习js。
可能前两个大家觉得还过得去,看到js就蛋疼了,其实吧,js入门很简单的,不需要会很多东西的,只要会根据某个id、或者name拿到网页dom或者样式、或者值,然后会给某个id或者name的元素标签赋值、或者追加数据、追html,这个是跟数据有关系的操作,然后数据逻辑判断,效果方面的,无非就是跳转、弹框、隐藏什么的,把这些全部结合其他就是实际用途了,代码一点都不难,会了这些基础js,其他的直接网络就好了.然后看多了,用多了,就什么都不是问题了.
F. web前端开发开发技术架构有哪些
前端的应用非常广泛,基本网站、APP、HTML5小程序等都需要前端开发,所以只要是互联网产品基本都需要前端。
前端程序猿切页面写页面,Web上、H5上的炫酷效果,是前端开发大展身手的地方。最常见的用于前端开发的技术组合是:
HTML+CSS+JavaScript。
web前端是在开发人员中最直接面向产品、面向用户的设计人员,一个开发团队的成果是要靠web前端去展现,因为用户不会去关心后台的处理有多么强大。
后端开发是写后台,各种业务逻辑、数据处理、模块接口、客户端接口等等。后端开发者通常精通于一种Web编程语言和一个数据库管理系统。电商平台点击筛选条件下面为你筛选出来的宝贝的功能以及付款人数数据的变化等都是由后台来实现提供的。
目前web产品交互越来越复杂,用户使用体验和网站前端性能优化这些都得靠web前端去做。
前端开发则是网站的前台代码实现,包括基本的HTML和CSS以及JavaScript/ajax,最新的高级版本HTML5、CSS3,以及SVG等。
前端开发需要学习的技术
1 掌握基本web前端开发技术:HTML、CSS、JavaScript、DOM、BOM、AJAX等,而且要了解它们在不同浏览器上的兼容情况、渲染原理和存在的Bug
2 必须掌握网站性能优化、SEO和服务器端开发技术的基础知识
3 必须学会运用各种web前端开发与测试工具进行辅助开发
4 除了掌握技术层面的知识,还要掌握理论层面的知识,包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等
5 未来web前端开发工程师还要研究HTML5、web视觉设计、网站配色、网站交互设计模式等相关技术
web前端有广阔的发展空间,app、小程序、移动端、pc端等都网站是需要前端技术的开发支持才能够完成,技术门槛相对较低、需求量较大,薪资待遇良好。只要是互联网端的客户界面,就需要前端来制作完成,前端开发的编程量不大,但是需要部分编程,入门简单,但是要学的深入需要一个过程。
Web前端招聘岗位
• 前端开发工程师、Web开发工程师、网页开发工程师、HTML开发工程师...
• H5开发工程师、移动应用开发工程师、App开发工程师、小程序开发工程师...
• JS开发工程师、Vue.js开发工程师、Node.js开发工程师、前端架构师...
• 小游戏开发工程师、数据可视化开发工程师、WebGL开发工程师、WebVR开 发工程师、Web安全工程师...
G. 一个合格的web前端需要会什么
1. div和table
这个是最简单的,也是最基础的。要熟练掌握div、form table、ul li 、p、span、font这些标签,这些都是最常用的,特别是div和table,div用于布局、table也可以用于布局,但是不灵活,基本 table是用来和数据打交道。
2.html
HTML是指超文本标签语言,是目前web领域应用广泛的语言,我们只需要在html文档中插入对应的标签,即可实现web页面的编写与排列,所以要熟练掌握HTML基本知识,包括每个标签的用法等。
3. CSS
CSS指层叠样式表,可以为HTML标签自定义样式,通过设置HTML标签的样式,来改变其外形,达到美化与排版web页面的目的。
4.Javascript
Javascript是网页脚本语言,它可以在html中运行,设置并修改浏览器中的各种对象与变量。例如用来改进设计、验证表单、检测浏览器、创建 cookies等等,现在各大网站都可以看见 Javascript的踪影,常见的网站首页大眼晴、警告提示框、页面动画效果等等。Javascript更是一种在客户端广泛使用的脚步语言,在 Javascript当中提供了一些内置函数、对象和DOM操作,借助这些内容我们可以来实现一些客户端的特效、验证、交互等!
5.Jquery
Jquery是相当于把js封装了一套的一个js插件,目的就是操作起来更方便,代码写的更少。 Jquery是一个免费、开源的轻量级的Javascript库,并且兼容各种浏览器,同时现在有很多基于 Jquery的插件可供选择,这样在我们实现一些丰富的动态效果时更方便快捷,大大节省了我们开发的时间,提高了开发速度。
6.框架
从 bootstrap开始,响应式的珊格系统被后来框架一直沿用,建议学一套主流mvc框架,vue,react, angular两选一种。
7.会点后台语言
对于前端工程师来说,并不需要像网站程序员样,编写对象、开发特殊功能、搭建数据库。但是前端工程师要掌握基本的页面GET&POST传参、程序判断语法、程序输出语法、页面提交、数据库查询与记录插入,以及掌握HTTP与WEB工作原理、掌握Socket长连接实时网络通信技术、掌握 NOSQL中的 MONGODB的应用、了解PHP语法、了解 MYSQL数据库的基本操作。
当然,以上技能能够帮助你成为一个合格的前端工程师,但要成为一个优秀的前端,必须掌握除技术以外的东西,例如设计,用户等等,因此还需不断的坚持学习。
H. 电商前端架构设计
什么是前端架构
说到架构,很容易拉出一系列的概念知识点,像系统架构、软件架构、框架等等,这些不是今天探讨的重点,大家可以下去网络来理解。架构的本质是什么?其实也是一种管理。通常我们所说的管理,都是指对于任务和人员的管理,而架构管的是机器和代码。比如说,机器的部署属于运维的物理架构,SOA属于服务架构,那么,前端的架构指什么呢?
长期以来,前端所处的位置是比较偏应用层,很薄的一层,而架构又要求深度和广度,所以之前在前端里面做架构,好比在小水塘里游泳,稍微扑腾两下就到处碰壁。但最近这几年来,随着一些列新的技术和概念的出现,前端的范围被大大拓展了,所以这一层逐渐变得大有可为。
单纯从语言的角度来说,html、js、css是最简单最容易上手的开发语言,不考虑模块化、工具、压缩优化,任何人都可以快速上手,完成一两个功能简单的页面。在规模很小的项目中,前端技术要素彼此不会直接产生影响,因此无需架构相关的思考。由于前端语言这种灵活松散的特点,使得前端项目规模在达到一定规模后,工程问题凸显,成为发展瓶颈,原来孤立的技术要素开始彼此产生影响,各种技术要素彼此之间开始出现关联,要用模块化开发,就必须对应某个模块化框架,用这个框架就必须对应某个构建工具,要用这个工具,就必须对应某个包管理工具……这个时候,需要有人从比较高的角度去梳理、寻找适合自己团队的集成解决方案。而这一系列解决问题的工具和手段就是所谓的前端架构。
架构不等于框架这一点很好理解,相信大家都能够很深入的说明这里的差别,框架是架构的重要组成部分,架构决定框架的选型,框架决定架构的技术路线。架构围绕框架进行一系列的流程工具建设,从而形成完善自动的开发体系。
+框架不等于类库,这里就是很多人困惑的点,你用的什么框架?jquery、underscore、linq、seajs、requirejs等等,每个人都能够列举一大堆。但这个是不准确的,一套编码框架是有一系列的元素组成:开发模式,我们如何来实现代码的职责分离。以前整个前端是mvc中v这一层,而现在前端内部也进行了mvc的逻辑细分,Javascript的MVC框架现在很多,有的强化m、有的强化c。每一个框架其实都有其特点的,并且有越来越多的创新改造,比如现在最流行的是mvvm。有angular、react等等。我们是为了引入mvvc才把他们纳入到我们的开发体系,而不是因为他是一个好用的类库。
通讯,模块化、组件化是前端在推进开发模式过程中的一个过程产物,为了有效的进行组件隔离和独立,现在有各种各样的通信模型出来,不过由于实现简单,代码少,他往往是合入到某个类库里面,但本质也是一个类库。比较成熟的比如:消息总线、事件模拟、缓存中转、flux模型等等。
模板,我们用什么样的方式来集中的处理数据往html的转换过程,这里就不用多展开,这种类库现在太多了,光我们公司就有很多套,大家在代码行、缓存管理、预编译、运算性能、强大的语法等等各个维度不段追求各种极致。
基础类库最后才是传统类库,相信现在已经没有同学会在项目中去约束团队中的dom操作、常用函数、方法、异步化等等各种很基础东西,这个时候我们一般就是引入jq、zepto、underscor这些封装好的东西就行了。核心就是为了改善编码生产力。
对于框架的选型要从两面看,一是看该框架的本领,二是看你们团队的能耐。从经验上给几个点建议:
这里也可以顺便展开聊一下现在前端产品的形态分类:
从这些分类里面,我们这些年派生出了所谓全端和全栈的概念。但本质上怎么走还是要由所在产品的形态来决定。
内容型Web站点 侧重渲染方面的优化,前端逻辑比重小
操作型B/S系统 以数据和逻辑为中心,界面较规整
hybrid内置型,要处理缓存和一些本地接口,包括PC客户端和移动端。现在的本地应用,基于很多考虑,都变成了混合应用,也就是说,开发这个应用的技术,既包含原生的代码,也包含了嵌入的HTML5代码
Web游戏,前端的逻辑非常重,在代码结构上要求非常高的可管理性和更复杂的设计模式。
桌面应用型,现在有一些PC端的混合应用开发技术,比如node-webkit和hex,前者的典型应用是XDK,后者的典型应用是有道词典,此外,豌豆荚的PC客户端也是采用类似技术的,也有一些产品是用的qt-webkit。这类技术可以方便做跨平台,极大减少开发工作量。
大工程应该尽量避开谷歌产品,他的很多技术开源项目都是玩票性质的,GWT、Closure、Darty就是前车之鉴。曾今提出过很多的新技术,到现在还是独家的,变出太大。包括现在angular,喜欢做断崖式升级,做做运营后台系统问题不大,如果是线上系统的话,每次升级就是一次人月神话中的典型焦油坑。
关注应用场景,像刚才说到的boss后台是一种;另外我的平台是否有沉重的历史包袱,需要兼容ie6,还是可以轻装上阵;产品对于seo是什么样的态度?是否需要考虑自适应?或者我的团队足够大,能够各搞一套?;产品特征是强内容还是强交互或者是游戏性。这些都是选择不同框架的主要出发点。
没有最好,只有最适合自己的,基本上,针对每个平台,我们都可以列出一些主流框架,但不意味着你们都能驾驭得住。小马过马,老牛没过膝,松鼠淹个半死,就是这么回事。但无论我们选择什么框架或决定自己动手造轮子,都勿忘初心,技术必须让我们工作生活更为轻松愉快——我们只选择我们能驾驭住的框架,我们不能保证它在一年后是否会过时落后。
而且按照我个人这么多年的经验来看,任何框架都会过时,往往不是因为他不够好,而是因为一定有更好的出来。我们再选择一个框架或者一个类库的时候就要想好,未来我如何抛弃他。至少不能成为我们引入新的框架的绊脚石。现实的工作中很多的团队往往会陷入到年复一年的用今年的新框架去重构去年老框架代码的历史循环中去。对于引入框架如何尽量延长他的生命力,我个人的意见是选择框架时去追求概念,而不是潮流,当我的架构可以接受新的设计概念的时候才去考虑引入新的框架。用设计理念的选择代替框架的选择。之所以这么说是因为我观察到我们部门的后端架构的开发理念跟我进公司的时候是差不多的。更多你可以参考成都网站建设
架构的组成
组件框架
I. 详细介绍Web前端与后端有什么区别(包括定义、特点、所用到的技术等(500字)
1.什么是前端开发?
前端,也称为“客户端开发”,简单来说,你可以在应用程序或网站的屏幕上看到的所有内容都属于前端。
通俗点说:web的本意是蜘蛛网和网的意思,在网页设计中我们称为网页的意思。现广泛译作网络、互联网等技术领域。表现为三种形式,即超文本(hypertext)、超媒体(hypermedia)、超文本传输协议(HTTP)等,包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。
1.1 网站和移动应用的前端
让我们考虑一个现实的例子:你正在访问的网站。内容设计、图像、段落和线条之间的间距,左上角的公司徽标,以及右下角的小通知按钮——所有这一切都是前端。
移动应用的前端与网站相同。例如,你在移动或 Web 应用中看到的内容,按钮、图像是前端的一部分。此外移动屏幕还具有触摸响应功能,因此当应用响应你所做的所有手势时,需要进行缩放放大/缩小、双击、滑动等操作。
前端开发人员构建所有的这些。它们创造了你在屏幕上看到的外观和触摸到的体验。
Ionic,Swift,Kotlin,Bootstrap,Angular,Vue,jQuery,React.js 是用于前端开发的一些工具和技术。
1.2 物联网的前端
连接到互联网的任何对象都是IoT(物联网)设备。你可能在想物联网设备的前端如何工作?任何智能设备,如智能冰箱、远程 PoS 系统、智能手表、智能钱包,都需要用户可以与之交互以操作设备的“东西”。因此,“某物”是一种互动媒介,其元素就是物联网的前端。
物联网设备没有前端的说法,但设备包含一个固件,其行为类似于移动应用程序中的前端。此外该固件可以用C、C++、Lua、Python 和 JavaScript 等语言编写。
另外还有物联网设备的 UI/UX 设计和实现。
2.什么是后端开发?
后端,也称为“服务器端开发”,也就是在系统“后面”所发生的事情。同样,在后端服务器和浏览器或应用程序之间存储网站、应用数据和中间媒介的服务器都属于后端。简单来说,在应用程序或网站的屏幕上看不到的所有东西都是前端的后端。它更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。
2.1 网站和移动应用后端
网站的后端需要设置服务器,存储和检索数据,以及将这些服务器与前端进行连接的接口。如果说前端开发人员梗关注网站的外观,后端开发人员则更更关注网站的速度、性能和响应能力,后端通过编码、云 API 和数据库进行集成。
就像前端一样,移动应用的后端开发在各个方面都与网站后端相同。此外,你为移动应用设置后端服务器的选项包括:云计算(AWS,Firebase)定制服务器或 MBaaS(移动后端即服务)。
Ruby,Apache,Nginx,PHP,MySQL,MongoDB 等用于后端开发的工具和技术很少。
2.2 物联网后端
物联网后端最重要的组成部分之一是云后端。显然大多数物联网设备都依赖云服务器对数据进行上传和下载,并将其处理为动作。
如果我们谈论高级物联网解决方案,后端开发可以扩大到 AI(人工智能)和 ML 等功能(机器学习)。
用于物联网项目的后端技术是Amazon IoT,Google Cloud,MQTT Broker,IFTTT等等。
综上所述,说通俗一点:
web前端分为网页设计师、网页美工、web前端开发工程师。
首先网页设计师是对网页的架构、色彩以及网站的整体页面代码负责;网页美工只针对UI这块的东西,比如网站是否做得漂亮;web前端开发工程师是负责交互设计的,需要和程序员进行交互设计的配合。
web前端需要掌握的有脚本技术javascript DIV+CSS现下最流行的页面搭建技术,ajax和jquery以及简单的后端程序等。 后端的话可供开发的语言有 asp、php、jsp、.NET 这些后端开发语言的话搭建环境都不一样
实际的开发过程中,前端、后端开发人员的定位如下:
1)前端开发人员:精通JS,能熟练应用JQuery,懂CSS,能熟练运用这些知识,进行交互效果的开发。
2)后端开发人员:会写Java代码,会写SQL语句,能做简单的数据库设计,会Spring和iBatis,懂一些设计模式等。
3.前端 Vs 后端有什么区别?
ok,接近2000字了,应该是回答了你的问题了,如果有帮助到你,请采纳哦,谢谢!
J. 前端设计模式之责任链模式
责任链模式
什么是责任链模式
责任链(Chain of Responsibility)模式的定义:为了避免请求发送者与多个请求处理者耦合在一起,将所有请求的处理者通过前一对象记住其下一个对象的引用而连成一条链;当有请求发生时,可将请求沿着这条链传递,直到有对象处理它为止。(此处引自 gof 设计模式)
在责任链模式中,客户只需要将请求发送到责任链上即可,无须关心请求的处理细节和请求的传递过程,所以责任链将请求的发送者和请求的处理者解耦了。
责任链模式是一种对象行为型模式,其主要优点如下:
1.降低了对象之间的耦合度。该模式使得一个对象无须知道到底是哪一个对象处理其请求以及链的结构,发送者和接收者也无须拥有对方的明确信息。
2.增强了系统的可扩展性。可以根据需要增加新的请求处理类,满足开闭原则。
3.增强了给对象指派职责的灵活性。当工作流程发生变化,可以动态地改变链内的成员或者调动它们的次序,也可动态地新增或者删除责任。
4.责任链简化了对象之间的连接。每个对象只需保持一个指向其后继者的引用,不需保持其他所有处理者的引用,这避免了使用众多的 if 或者 if···else 语句。
5.责任分担。每个类只需要处理自己该处理的工作,不该处理的传递给下一个对象完成,明确各类的责任范围,符合类的单一职责原则。
其主要缺点如下。
1.不能保证每个请求一定被处理。由于一个请求没有明确的接收者,所以不能保证它一定会被处理,该请求可能一直传到链的末端都得不到处理。
2.对比较长的职责链,请求的处理可能涉及多个处理对象,系统性能将受到一定影响。
3.职责链建立的合理性要靠客户端来保证,增加了客户端的复杂性,可能会由于职责链的错误设置而导致系统出错,如可能会造成循环调用。
其他说明
责任链模式,总的一个核心就是请求者不必知道是谁哪个节点对象处理的请求,由于处理请求的可以在不同对象下处理,所以请求者跟接受者是解耦的。
纯的责任链:要求请求在这些对象链中 必须被处理 ,而且一个节点处理对象,要么只处理请求,要么把请求转发给下个节点对象处理;
不纯的责任链:要求在责任链里 **不一定会有处理结构 **,而且一个节点对象,即可以处理部分请求,并把请求再转发下个节点处理;
javascript 中介者模式
责任链模式对前端开发来说可能有点陌生,但是看了前面的描述又感觉似曾相识
实际上 express、rex 里的 middleware 都可以简单理解为责任链模式的运用
要实现中间件模式,最重要的实现细节是:
1.可以通过调用 use() 函数来注册新的中间件
2.当接收到需要处理的新数据时,注册的中间件在执行流程中被依次调用。每个中间件都接受上一个中间件的执行结果作为输入值
3.每个中间件都可以停止数据的进一步处理,只需要简单地不调用它的回调函数或者将错误传递给回调函数。当发生错误时,通常会触发执行另一个专门处理错误的中间件
项目实战
通用中间件开发
通用中间件使用 ajax
如上我们在发送请求之前加入了类型转换、数据校验,将数据的业务处理使用中间件模式剥离,使得处理过程模块化,维护性提升。
中间件升级-事件回调
每个中间件的过程都是不可控制的,全部都交由中间类去统一调用,我们可以加入事件回调,方便我们在中间件处理过程中拥有额外的逻辑能力
将上述的使用方法再改造一下,方便实际业务中使用
上述的项目实例是采用 ajax 来演示,实际通用的中间件类,可以在业务中将一些 **流程化执行的任务 **拆分出来,例如表单验证、多重条件判断等等
多种条件判断
将流程化执行的多种条件判断通过中间件解耦,可以使得条件判断方法更加清晰。一般当你需要使用中介者来改造业务逻辑的时候,前端的项目确实有点复杂了。
现在STAR现在是在腾讯课堂里面分享自己的经验,感谢兴趣的朋友可以加Q群:1146649671
中获取STAR在腾讯课堂分享的链接,还可以获取学习资料 面试文档等