精华内容
下载资源
问答
  • 一个尖括号能干什么 你可以编出一顶帽子 或一张笑脸 :-> 再或者更直接一些 20世纪90年代初,html作为一种简单标记语言面世,用于在互联网上显示超文本。经过发展,html逐渐包含图片和布局设计...

    原文链接

    一个尖括号 <

    一个尖括号能干什么 < ?

    你可以编出一顶帽子 <(:-p

    或一张笑脸 :->

    再或者更直接一些

    screenshot

    20世纪90年代初,html作为一种简单标记语言面世,用于在互联网上显示超文本。经过发展,html逐渐包含图片和布局设计功能。为了支持交互,它又增添了JavaScript。逐渐被网民们所接触,好的页面色彩和一些布局体验都是吸引网民游览页面的重要因素,为了满足页面设计者的要求,HTML添加了很多显示功能。但是随着这些功能的增加,HTML变的越来越杂乱,而且HTML页面也越来越臃肿。于是CSS便诞生了,由于叠样式表(CSS)的引入使得数据与设计得以分离,于是DIV+CSS的前端页面开发模式出现了,以色彩和图片来对原本的页面元素进行构造和美化,用页面元素对页面的数据进行排版和分类。因为前端页面的高速发展,HTML和CSS的开发应用开始很快的发展起来, 最后,API和核心代码的出现使HTML能够访问更复杂的软件功能--支持更高级的交互和云服务集成。这就是今天的HTML5:它是集HTML、JavaScript 、CSS 和 API于一身的技术集合。

    screenshot

    HTML是一个持续发展与创新的故事。通过开放、灵活的协作创新,HTML一直在支持互联网日新月异的需求。浏览器厂商、技术人员、开发人员的发明激发出HTML的无限可能......而标准规范机构(W3C)一直在推动整个行业久HTML应包含的内容达成一致,并鼓励兼容。这样HTML才能与浏览器齐头并进。现在HTML5的推出使HTML和浏览器技术能够满足开发人员适应多种设备的需求。当今很多浏览器都基于开源代码开发,大部分手机浏览器则基于开源项目Webkit开发。现代浏览器实际上有几大组件组成。有些浏览器厂商在其浏览器引擎中使用开源代码,然后基于其进行创新,打造自己的用户界面等私有组件。Google在Chrome浏览器引擎中使用了Webkit,以便在Android手机和平板中能够运行基于HTML5的应用。苹果的Safari和iOS也是如此。大部分手机平台也一样。浏览器引擎达大量用于运行像这样的特定应用程序,我们称之为Web运行时。这些基于HTML5的运行时未开发人员提供了极大地便利。HTML5 使开发人员能够更方便、更快的开发健壮的应用程序。并且由于Web浏览器和手机Web运行时基于同样的代码,开发人员现在可以经济高效的为多种设备开发应用。真的很酷,一切只是从一个简单的尖括号开始。

    --------------------重点来喽-------------------------

    ~~~~~~~~~~前端 PK 后端~~~~~~~~~~~~

    ------------------ KO and OK----------------------

    ~

    如果你是前端那么请问

    1、当初是什么原因让你选择前端?

    2、还会对IE678去写兼容代码吗?说说你内心的想法;

    3、掌握一门后端语言是否有必要?why

    4、身为前端程序员你掌握了那些技能;

    5、分享下你喜欢用的前端框架,插件;

    ~

    如果你是后端那么请问

    1、“后端程序员瞧不起前端程序员”你怎么看这句话?

    2、身为后端程序员你掌握了那些技能;

    3、你感觉前端工程师掌握一门后端语言是否有必要?

    4、你感觉前端和后端的待遇真的差很大吗?

    5、你看好那种后端语言,说说理由;


    原文链接

    展开全文
  • (给前端大学加星标,提升前端技能.)作者:吕小鸣https://juejin.im/post/5d7990a16fb9a06ad16f9d55前端架构师,听起来就是个很高大上的职位,在大多数程序员的眼中,架构师一般从事后端开发,Java或者C++出身,它们...

    (给前端大学加星标,提升前端技能.)

    作者:吕小鸣

    https://juejin.im/post/5d7990a16fb9a06ad16f9d55

    前端架构师,听起来就是个很高大上的职位,在大多数程序员的眼中,架构师一般从事后端开发,Java或者C++出身,它们往往拥有这十八般武艺,可以解决业务中出现的各种问题。好像架构师就从来没有和前端有过关系,那么真的是这样么,通读此文,便可豁然开朗。

    前端的意义

    首先,我们先来谈谈本职工作,前端的意义。前端源自用户界面,是最先和用户接触的地方,也是衡量一个项目产品好坏的第一道关口。

    到底什么是前端

    从最早的DOS系统说起,那时是没有前端的概念的,大多数的软件界面显示的都是冷冰冰的黑底白字的控制台命令,于是,慢慢的不仅是用户,就连广大的程序员也不满足现状,开发出一套图形化的用户界面,让一些功能更加便于操作。那时前端叫做GUI(图形用户界面)。还没有区分出多端的概念,大多数是基于操作系统开发出的原生界面。

    53e89668-6a17-eb11-8da9-e4434bdf6706.jpeg

    上图来自DOS系统经典软件DOS Navigator

    随着互联网的发展,第一代浏览器Netscape(网景浏览器)的诞生以及后续的IE系列浏览器的到来,”网上冲浪“这个词逐渐进入到大多数的用户生活中。直到现在大行其道浏览器Chrome,以及国内各种百花齐放的浏览器。主要给浏览器服务,实现各种特效的JavaScript语言,迎来了第一波春天。

    54e89668-6a17-eb11-8da9-e4434bdf6706.jpeg

    上图来自网景浏览器

    直到现在,前端逐渐拆分成:

    web前端(HTML+CSS+JavaScript),客户端前端(Android和iOS)。

    又或者是网页重构工程师,JS工程师,UI/UX,切图仔等等。

    那么归根这些都是为前端服务的,说了这么多,那么前端的价值到底在哪里呢?

    前端的价值在哪呢?
    • 实现界面交互。

    • 提升用户体验。

    第一点是前端的本职工作,是在功能上和后端的主要区分,也是前端岗位存在的原因。第二点也不必多说,前端做得好,对用户体验是有益的。如果说后端的目标和价值体现在服务的高性能、高可用、可扩展、安全。那么前端的价值体现就是“用户”二字。

    56e89668-6a17-eb11-8da9-e4434bdf6706.jpeg

    所以作为一个合格的前端开发,让用户用的舒心(爽)就是目标,所以要想完全体现你的价值,你需要循序渐进的完成下面几个步骤:

    • 根据产品的逻辑和需求,完成对应业务的前端页面UI展示,与用户交互。

    • 编写可维护性高的代码,减少BUG的产生,保证良好的用户体验。

    • 在完成功能的同时,能够熟悉现有业务,并提出可持续改进的地方,并付诸实施优化。

    看了上面的几条,是不是有种似曾相识的感觉,是不是很像一则招聘信息的JD。其实没错,作为一个企业来讲,招聘一名前端开发,肯定要能够为企业带来价值,这本身也是你的价值体现。

    但是,我想说的是,看似简简单单的3条内容,你真的理解么。第一条和第二条是你技术上的能力体现,这部分完全靠你的技术积累,那么第三条便是你主关能动性的体现,这部分可发挥的地方很多,一个新人和一个工作经验丰富的人差距可能就体现在这里,具体我们后面再说。

    但是,还想说的是,单纯的完成上面的3条步骤,那么还是只能说明你是一个合格的前端开发,这与架构师还是有一定的距离的。

    前端价值体现真的很重要么?

    好吧,上面我们了解了前端的价值,并且各位前端开发还在辛辛苦苦的体现着自己的价值,但是让人纠结的,前端是有价值,但这价值真的很重要吗?

    和非前端之外的技术相比

    对于一个成熟的产品业务而言,前端往往是很薄的一层,这一层赋予你的功能,大多是就是页面的UI展示和用户交互。

    虽说前端是产品和用户之间的第一道关口,但也只是第一道关口,后面可能还有十几道关口。例如搞后端逻辑的,搞底层数据库的,搞网络安全的,搞运维的,搞大数据分析的,或者是现在流行的机器学习的相关人员。每一个相关模块都自己独立的技术体系,可以说这些缺一不可。

    所以,前端和这些前端之外的技术相比,就体现的并不是那么”非你不可“了。就是说前端的确有价值,但放在全局来看,前端产生的价值并非核心价值。

    对产品业务的重要性

    举一个现在比较实际的例子,对于前端开发而言,在一些一线的互联网企业例如BAT等等,这些公司对前端开发的重视程度还是不错的,有着自己的产品业务线,整个前端技术有着不错的氛围,并且能够使用前端技术持续提升产品的用户体验。

    但是对于一些其他的中小型公司或者企业(我相信各位并非都来自BAT吧),很多前端开发的技术含量并不是很高,特别是对于一些toB的业务来说,核心的功能都来自于后端,来自于数据库的优化。或者是对于一些比较突出亮点的AI功能性产品,这些产品的核心竞争力甚至可能来自于硬件和算法。而前端在里面扮演的角色大多数是UI展示,数据可视化等等这些。而且很多工作属于重复性劳动,甚至有些可能还被后端开发来兼职做了。

    所以,对于一个业务的重要性而言,前端能够体现其价值的地方还是很有限的。

    当然,这里说了这么多,并不是给大家传输一种:前端不行了,赶快转行吧,这种思想,当然我们还是要吃饭的,这里想说的是让大家时刻保持一种危机感,只有这种危机感,才是让我们不断的对技术进行深究和进阶,不断发展不断前行的动力。

    前端技术的进阶

    在成为一名架构师之前,你需要有充分的技术储备,这些技术储备可能不止限制于前端技术。当然这里,我先介绍一些前端技术需要如何去进阶。

    性能优化

    在大厂工作过的同仁应该都知道,性能优化是一个敲门砖,因为如果去衡量一个前端开发是否真正的有经验,性能优化是一个分水岭,其相关流程主要涵盖:

    • 首先是如何发现问题。

    • 发现问题之后,是如何分析其中原因。

    • 找到原因之后,采用的解决办法。

    • 解决之后,是否真实的对用户体验有所提升。

    从这些问题中,可以衍生出各种值得深究的问题,并且可以从中找出一些方法论问题,所以性能优化是一项非常重要的点,当然,我们在这里就不说具体有哪些优化了,推荐读一读《移动web性能优化从入门到进阶》这篇文章。

    对框架的理解

    如果你想成为一名架构师,不能只停留在框架的 API 使用层面。

    对于当下最流行的3个前端框架Vue,React,Angular来说,掌握其基本的用法是必要的,但是也是最简单的,现在网上有各种各样的课程,可以让一个刚毕业的实习生就能轻松入门,并达道做项目的能力。所以说,为什么一个需求,给一个实习生就能做,为什么要选择你呢?

    所以,掌握框架的原理,并理解其中的思想,举一反三,是和大多数前端程序员拉开差距的关键所在,在这里给大家以Vue举几个例子,看看你是否真正掌握。

    • Vue中的双向绑定,只是简单的Object.defineProperty()么?

    • Vue的数据依赖是如何实现的?

    • Vue的computed和watch到底有何本质区别?

    • keep-alive的实现原理?

    大家不妨试试去理解一下这几个问题的根本点,试试从源码里来找到答案。理解源码的同时,有利于对框架本身的理解,对于提升解决问题的能力,以及减少出现BUG的几率,有所帮助。

    深入Node.js领域

    Node.js是让前端工程师能够触及后端逻辑的一个利器,也给了我们抢后端饭碗的正当理由,但是这里的Node.js并不是单独的指后端逻辑的开发。例如现在的前端工程化体系中,扮演重要角色的webpack,parcel,vue-cli等等,或者是现在让JavaScript能够开发PC桌面程序的Electron,都和Node.js密不可分,在这里给大家举几个例子,可以尝试一下从这几个点来进阶:

    • 与浏览器端的JavaScript不同,Node.js后端是直面服务器的,如何定位和分析内存泄漏问题。

    • 尝试写一些webpack插件。

    Canvas与WebGL

    WebGL是基于OpenGL的Web3D图形规范,是一套JavaScript的API。简单来说,可以把它看成是3D版的Canvas,当然,提到这个方向,可能有些人会觉得有点偏了。的确对于大多数前端开发来说,使用WebGL相关的3D处理技术和算法,并不需要掌握复杂的算法或者数学知识,只需要学会three.js就行了。

    但是基于Canvas或者WebGL可以提供给我们针对一些特定问题的解决方案。同样在这里给大家举几个例子:

    • 实现一个刮刮卡或者涂鸦墙的业务需求。

    • 图片上传时进行压缩和裁剪。

    • 在实现帧动画方面,使用CSS3和Canvas的选择。

    上面几个场景,就好比你拿到这些需求时,如果你根本不了解Canvas或者WebGL,你可能根本想不到有这些技术方案可以解决这些问题,所以,并不是说对Canvas或WebGL理解的多么透彻,但是作为一个架构师而言,你需要有一些技术广度,来拓宽你的技术栈,也就提升了你解决问题的能力。

    通往架构师之路

    说道这里,好像才进入正题。基本的进阶知识是你晋升成为成为高级前端的必要条件,但却不是你成为一名架构师的核心。正所谓一专多长,首先你得先精通一门。前端知识的进阶正是通往架构师的突破口,所以首先需要明白一点:掌握前端技术的同时,你还要学了解前端技术之外的技能。跳出前端这个思维,才能看到的更多。那么如果你想从一个前端资深人员进阶架构师,来看看下面的内容吧。

    跨界

    如果你只会写前端页面,那么无论你的功力练到多么炉火纯青的地步,那么也只能称为你是一个HTML高手。真正的架构师是需要有跨界的能力的,随着技术的持续完善,这种通过岗位变迁实现技术架构升级的情况会越来越少。而架构层面新的变化将来自于岗位自发的对自身工作内容、职责的重新定义,也就是这里说的边界。所以说并不是你作为一个前端开发岗位,你就不能干前端之外的事了,要尝试跳出边界来思考和解决问题。

    页面的秒开是衡量一个前端优化的重要指标,我们以这个优化点来总结一下从哪些方面跨:

    • 提升速度,从服务端渲染着手,可以利用Node.js往后端跨。

    • 提升移动web的H5页面的启动耗时,从webview着手,利用iOS和Android技能往客户端跨。

    用户交互操作体验,也是衡量前端优化的重要指标,我们以这个优化点来总结一下从哪些方面跨:

    • 提升用户交互体验,尝试将web页面客户端化,基于React Native或者Weex,也可以往客户端跨。

    • 提升页面动画效果,编写高性能的前端动画,也可以往UI动效设计跨。

    合理的跨界,可以让架构师对于业务的整体有深层次的认识,针对各种问题可以提出非前端之外的解决方案。

    尝鲜

    技术是不断发展的,作为一个架构师,不断学习新的技术是非常重要的,这里所说的尝鲜,就是要对技术保持一定的热情,不能只满足于现状,说白了讲就是要不断的学。

    • 习惯了jQuery开发页面,不妨试试Vue,React。

    • 写了很久的ES5代码,学学ES6也不错。

    • 沉醉在HTML,CSS,JavaScript开发页面,不妨学学Flutter。

    • 打造高性能的Web App,试试Service Worker。

    • 从HTTP协议触发,改造升级spdy和HTTP2,尝试一下HTTP3。

    • 尝试一下新的编程语言:WebAssembly。

    • 知道为服务,但你知道微前端吗。

    上面列举的尝鲜技能,是完全可以从一个前端的角度触发,来不断深入的,保持对每一个新技术的求知欲,是一名架构师必不可少的。

    工具和平台化建设

    只会写代码的程序员只能叫码农。

    当技术达到一定的高度时,能够为业务再次提升的能力就会逐渐变少,那么我们不如跳出技术本身,来改善业务周边的工具平台,同样来为业务服务。作为一名架构师,要有这种能力。

    提到工具平台,大家很快就能跟自己的团队里面的一些工具联系起来。这里主要跟大家探讨一下,我们的工具体系要用什么的思路去规划和review,也看一下我们还有那些可以进一步去完善的点。

    57e89668-6a17-eb11-8da9-e4434bdf6706.jpeg

    为了通俗一点,同样举几个工具平台的例子:

    • 针对开发调试,需要有一些提升开发效率的工具,例如移动web常用的Fiddler,或者是小程序模拟器。

    • 针对性能检测,需要有一些能够进行压力测试,发布后线上回归测试的工具,例如腾讯wetest等。

    • 针对统计分析,每个业务都需要能够提供给产品人员观察数据的工具,当然由于数据敏感性,这里一般每个团队有内部的工具,对外的类似工具例如Google分析等。

    可以看出来工具平台主要就是围绕我们的研发流程中的每一步关键节点去建设起来的,结合起来说,我们可以称之为工程化。工程化是这几年非常热门的概念,对前端来讲也是一个很明确的前端发展方向,其实工具平台的完善过程就是架构工程化的推进过程。

    5ae89668-6a17-eb11-8da9-e4434bdf6706.jpeg

    身为一名架构师,你需要有敏锐的嗅觉来洞悉这些节点。并且在适当的时机能够做出对业务有提升的工具平台,要做到遇到重复性的问题时,想想是不是开发出一款自动化工具平台来处理,这才是代码之外对业务提升解决方案。

    流程和规范化

    身为一名架构师,对流程的制定和规范,是非常重要的。不要小瞧规范的威力,可以极大的提升开发效率,真正优秀的规范不会让使用者感到约束,而是能帮助他们快速定位问题,提升效率。这里的规范,总结起来可以分为成:

    • 结构的规范:对项目的代码结构,不管前后端,合理的分层和组件化是非常必要的。

    • 编码的规范:这里主要就是代码codereview了,定期的进行codeview的同时,最好可以使用一些自动化工具。

    • 流程的规范:项目的评审,研发,测试,发布这些阶段都需要有流程来约束,这些需要结合自身团队的实际情况来制定。

    • 规范的落地:对于规范来说最关键的是执行落地,在制定完规范的同时,要不时的回顾是否切实的落地,这个应该是团队里每个成员坚持的基本准则。

    5ce89668-6a17-eb11-8da9-e4434bdf6706.jpeg

    方法论

    所谓方法论,可能单单说起来是比较抽象的,这里的方法论,主要是指在完成一项小的需求,或者是承接一个重大的项目,在具体的实施过程中,要有一定的方法和技巧,相信大家都看过《穹顶之下》这个视频,就是很强的方法论体现。其实说白了讲就是做事要有套路,这里就举一个性能优化的例子。

    在性能优化时,我们如何证明优化是有效果的,可以采用“三明治法则”(自己起的名字):

    • 首先优化前,我们需要找到问题的现状,并且要有数据能够佐证优化前的状态。所以就要学会去收集数据。

    • 有了数据之后,我们在进行对数据分析的同时,就需要找到问题出现的原因,并且付诸实施解决。这个阶段,就需要记录具体的优化原理。

    • 优化之后,就要想方设法去验证,并且在验证过程中,同样需要收集数据。

    到此,我们就有了 优化前数据,优化的原理,优化后的数据。通过数据对比,我们就可以很轻易的去佐证我们这次优化是有成效的,并且可以做出一份很漂亮的总结,作为一名架构师而言,这是一个很好的树立威信的场景体现。

    我们可以在发散开来,上面的三步骤可以再次迭代,也就是说,第一次优化,我们达到了效果,但是深究之后,还可以再次进行优化,每次优化都有数据佐证,这就是性能优化的方法论。

    安全意识

    这里为什么要把安全单独拿出来说呢,因为对于一个业务而言,安全是第一要素,就好比一个国家,安全稳定才是发展一切的前提,一旦业务出现安全问题,就可能瞬间损失掉全部,代价是非常惨重的。所以作为一名架构师,必须要保证业务的稳定性,可以总结以下几点:

    • 对低级的的代码安全问题,要坚决说不,例如前端里面的xss,csrf这些问题。

    • 对大型运营类活动需求,要有容灾意识和备份,例如在准备了一套方案的同时,要有可选的备用方案。

    • 尝试使用工具化来解决和预防安全问题,例如BAT这种大型企业,在运维和代码层面,都有一层保障机制,如腾讯的门神系统等。

    团队合作

    没有完美的个人,却有完美的团队。

    即使是一名架构师,我相信他也不是一直在一个人战斗,一个优秀的产品业务,总是诞生于团队,所以时刻保持和团队人员的沟通是必不可少的,这些沟通不限于日常的文字,或者会议,甚至私下的团建活动,都是可以相互了解的。

    所以团队合作的目的就是让团队中的每个人都能明确自己的职责,并发挥出最大的价值,架构师有义务来维护这种合作关系。并且对你的认同,也是团队成员赋予你的,维护良好的氛围,才能让团队成员信服。

    最后,总结一下,对前端架构师理解的一些误区:

    • 架构师并不等于全栈工程师。

    • 架构师切忌完全脱离代码,但是也不要一直闷着头写代码。

    • 架构师应当跳出技术本身,从全局的角度来看的业务,发现并解决问题。

    • 任何项目的架构都不是一开始制定好就是一成不变的,它应该是不断迭代和演进的,架构师有义务来保证架构的创新性。

    最后,希望各位前端同仁,能够在成为架构师的道路上,披荆斩棘,一帆风顺!

    5ee89668-6a17-eb11-8da9-e4434bdf6706.jpeg

    分享前端好文,点亮 在看 5fe89668-6a17-eb11-8da9-e4434bdf6706.jpeg

    展开全文
  • loonggg读完需要4分钟速读仅需 2 分钟最近我在知乎上看到一个非常有意思的问题:公司拖欠后端工资逼急了可以删库跑路,逼急了前端该如何何去何从?我感觉提问这个问题的同学,显然感觉前端的...

    loonggg

    读完需要

    4

    分钟

    速读仅需 2 分钟

    最近我在知乎上看到一个非常有意思的问题:

    公司拖欠后端工资逼急了可以删库跑路,逼急了前端该如何何去何从?

    我感觉提问这个问题的同学,显然感觉前端的地位不如后端,有点瞧不起我们前端的意思哈。

    其实,十年前,在业界前端开发都不配叫工程师,因为很多人感觉前端开发的工作很简单,就是写个样式,设计师就顺便把这个活干了,所以,当时前端开发在程序员心里地位是很低的。

    但是,随着移动互联网的发展,随着前端和移动端相结合,大前端概念应运而生的同时,前端面对的工作是越来越复杂,尤其是在前后端分离的今天,前端不仅仅要应对界面的开发,也涉及到复杂的业务逻辑的处理,对于前端的开发要求是越来越高了。

    我顺便要为前端工程师正名:前端工程师的工作量,相对于后端来讲比较大一些,不仅仅要应对前端界面和设计,以及应对产品经理的挑剔,还要跟后端工程师确定交互的数据格式和接口。更重要的是前端各种浏览器的界面的适配,大前端引发导致的还要适配移动端的工作,相对于后端生态的稳定,完善和生命周期长,前端框架和技术生命周期更短,这就意味着前端工程师要不断的学习和更新自己的知识,给前端工程师的压力就越来越大。

    所以,我今天就举两个例子,让后端的同学,看看前端同学的能力不容小觑。

    看到这个问题,就让我想起来阿里的两个事件了,对,没错,就是两个事件,都跟前端有关系。

    1

       

    第一个事件:阿里 Antd 圣诞彩蛋事件

    Antd 即 Ant Design,是阿里蚂蚁金服开源的一套企业级的 UI 设计语言和 React 实现,因提供了完整的类型定义文件、自带提炼自企业级中后台产品的交互语言和视觉风格、开箱即用的高质量 React 组件与全链路开发和设计工具体系等功能优势而备受开发者青睐。

    这次惹起争议的就是 Antd 库中暗藏的圣诞彩蛋 —— 一个不曾提前告知、无法手动禁止、并且 “潜伏” 了 106 天之久的按钮 “惊喜”,打得开发者们措手不及。更有甚者,因为很多政府项目、军事项目、宗教项目等严肃场景中也一个不落地中了招,导致许多项目方遭遇客户投诉,开发者们背锅被裁。

    简单来讲,就是在 2018 年 12 月 25 日圣诞节之际,使用 Antd UI 库的项目,在圣诞节这天触发了惊喜事件,给所有的主要按钮加上了雪堆特效,鼠标放上去还会显示 “Ho Ho Ho!”,而且也没法手动禁用,导致许多项目方遭遇了客户投诉。

    类似这样:

    2

       

    第二个事件:苹果手机淘宝弹框到期提醒事件

    没错,又是发生在阿里巴巴集团的一个事件,来自于淘宝。

    在 2020 年 3 月 25 日,大量微博网友反映,手机淘宝 iOS 版本打开后会出现一个内测版本即将到期的弹窗 Bug,弹窗显示:“您使用的程序是内测版本,将于当地时间 2020 年 - 03-28 到期,到期后将无法使用,请尽快下载最新版本。”

    系统时间正常即 3 月 25 日,打开手机淘宝 App 时确实出现了该系统弹窗。但目前仅有苹果手机会出现闪退情况,安卓手机仍可以正常使用。

    逼急了前端该何去何从呢?这两个事件,具有警醒的作用,也有参考的价值。

    看看,大到阿里巴巴这样级别的公司也能发生这样的事情。

    虽然给大家举了两个例子,意在说明,前端也很重要。

    但是,不管是圣诞彩蛋事件,还是淘宝弹框事件,这都是事故,更别说后端的删库跑路了,作为程序员,还是要保持职业操守哈,千万别做这种事,是犯法的,如果公司定性为事故,要告你,不仅要赔偿,可能还会坐牢。

    最后,强烈建议大家关注一下我的视频号,里面常常会有干货或者分享我自己的一些经验的。扫面下方二维码,直接关注我的视频号

    展开全文
  • 以前后端人员瞧不起前端人员,那现在后端人员要重新认识一下前端,前端已经很成体系了)。一般系统的大致整体架构图如下: 需要说明的是,有些小伙伴会回复说,这个架构太简单了吧,太low了,...

    来源:

    r6d.cn/tEvn

    在移动互联网,分布式、微服务盛行的今天,现在

    项目绝大部分都采用的微服务框架,前后端分离方式

    ,(题外话:

    前后端的工作职责越来越明确

    ,现在的前端都称之为

    大前端

    ,技术栈以及生态圈都已经非常成熟;以前后端人员瞧不起前端人员,

    那现在后端人员要重新认识一下前端

    ,前端已经很成体系了)。

    一般系统的

    大致整体架构图

    如下:

    4128640db18d5086ea9e8d803d55b265.png

    需要说明的是,有些小伙伴会回复说,

    这个架构太简单了吧,太low了,什么网关啊,缓存啊,消息中间件啊

    ,都没有。

    因为老顾这篇主要介绍的是API接口

    ,所以我们聚焦点,其他的模块小伙伴们自行去补充。

    接口交互

    前端和后端进行交互,

    前端按照约定请求URL路径,并传入相关参数,后端服务器接收请求,进行业务处理,返回数据给前端。

    针对

    URL路径的restful风格

    ,以及传入参数的

    公共请求头的要求(如:app_version,api_version,device等)

    ,老顾这里就不介绍了,小伙伴们可以自行去了解,也比较简单。

    着重介绍一下

    后端服务器如何实现把数据返回给前端?

    返回格式

    后端返回给前端我们一般用JSON体方式,定义如下:

    {

    #返回状态码

    code:integer,

    #返回信息描述

    message:string,

    #返回值

    data:object

    }

    CODE状态码

    code返回状态码,一般小伙伴们是在

    开发的时候需要什么,就添加什么

    如接口要返回用户权限异常,我们加一个

    状态码为101吧

    ,下一次又要加一个数据参数异常,就

    加一个102的状态码

    。这样虽然能够

    照常满足业务

    ,但状态码太凌乱了

    我们应该可以参考HTTP请求返回的状态码

    :下面是常见的HTTP状态码:

    200 - 请求成功

    301 - 资源(网页等)被永久转移到其它URL

    404 - 请求的资源(网页等)不存在

    500 - 内部服务器错误

    f1dc70a8350290f5b8d15fcce58807b2.png

    我们可以参考这样的设计,这样的好处就把

    错误类型归类到某个区间内

    ,如果区间不够,可以设计成4位数。

    #1000~1999 区间表示参数错误

    #2000~2999 区间表示用户错误

    #3000~3999 区间表示接口异常

    这样前端开发人员在得到返回值后,

    根据状态码就可以知道,大概什么错误

    ,再根据message相关的信息描述,

    可以快速定位。

    Message

    这个字段相对理解比较简单,就是发生错误时,如何友好的进行提示。一般的设计是和code状态码一起设计,如

    80125f0646670dc0dbcc5c43e9f4461f.png

    再在枚举中定义,状态码

    2bec0262c11deaa8b035e4e21abab562.png

    状态码和信息就会一一对应,比较好维护。

    Data

    返回数据体,JSON格式,根据不同的业务又不同的JSON体。

    我们要设计一个返回体类Result

    2f0004844cd256c0377d28dce051ac79.png

    控制层Controller

    我们会在controller层处理业务请求,并返回给前端,以order订单为例

    50d10efd1e3460ba5ec2579adbae0220.png

    我们看到在获得order对象之后,我们是用的

    Result构造方法进行包装赋值

    ,然后进行返回。小伙伴们有没有发现,

    构造方法这样的包装是不是很麻烦

    ,我们可以优化一下。

    美观优化

    我们可以在Result类中,加入静态方法,一看就懂

    d5b37e4a1e484c80aae5153b3dd23fab.png

    那我们来改造一下Controller

    0d861ecdc2e34ca0f24f09259444bb35.png

    代码是不是比较简洁了,也美观了。

    优雅优化

    上面我们看到在

    Result类中增加了静态方法

    ,使得业务处理

    代码简洁

    了。但小伙伴们有没有发现这样有

    几个问题:

    1、每个方法的返回都是Result封装对象,没有业务含义

    2、在业务代码中,成功的时候我们调用Result.success,异常错误调用Result.failure。是不是很多余

    3、上面的代码,判断id是否为null,其实我们可以使用hibernate validate做校验,没有必要在方法体中做判断。

    我们最好的方式直接返回真实业务对象,最好不要改变之前的业务方式,如下图

    83112e44a41f75449b93dc5cb4e61e59.png

    这个和我们平时的代码是一样的,非常直观,直接返回order对象,这样是不是很完美。

    那实现方案是什么呢?

    实现方案

    小伙伴们怎么去实现是不是有点思路,在这个过程中,我们需要做几个事情

    1、定义一个注解@ResponseResult,表示这个接口返回的值需要包装一下

    2、拦截请求,判断此请求是否需要被@ResponseResult注解

    3、核心步骤就是实现接口ResponseBodyAdvice和@ControllerAdvice,判断是否需要包装返回值,如果需要,就把Controller接口的返回值进行重写。

    注解类

    用来标记方法的返回值,是否需要包装

    25c185d6f435225c4661185ce96d9e69.png

    拦截器

    拦截请求,是否此请求返回的值需要包装,其实就是运行的时候,解析@ResponseResult注解

    7f1e8292cb79e9d88fcd55604ee0954a.png

    此代码核心思想,就是获取此请求,是否需要返回值包装,设置一个属性标记。

    重写返回体

    c0f6153b5ed33df6122347db134d5827.png

    上面代码就是

    判断是否需要返回值包装

    ,如果

    需要就直接包装

    。这里我们只处理了正常成功的包装,

    如果方法体报异常怎么办

    ?处理异常也比较简单,只要判断body是否为异常类。

    44c51dcdafc43bf9ab482044d44002bf.png

    怎么做全局的异常处理,篇幅原因,老顾这里就不做介绍了,只要思路理清楚了,自行改造就行。

    重写Controller

    c9ccd6cc75865bfe529141d999aded71.png

    在控制器类上或者方法体上

    加上@ResponseResult注解

    ,这样就ok了,简单吧。到此返回的设计思路完成,是不是又简洁,又优雅。

    总结

    这个方案

    还有没有别的优化空间

    ,当然是有的。如:

    每次请求都要反射一下,获取请求的方法是否需要包装,其实可以做个缓存,不需要每次都需要解析

    。当然整体思路了解,小伙伴们就可以在此基础上面自行扩展。谢谢!!!

    展开全文
  • 我的老弟小阿巴,目前大一,自学编程有一段时间了,之前主要以学前端为主,比较好上手。 但这货最近知道咋回事,一直嚷嚷着要写写后端代码。 我说:你前端才刚学没多久呢,急什么? 小阿巴说:没人比我更懂前端!...
  • 如何写出优雅的后端API接口?

    千次阅读 2021-03-11 10:30:33
    目录前言接口交互返回格式控制层Controller美观优化优雅优化实现方案总结...以前后端人员瞧不起前端人员,那现在后端人员要重新认识一下前端,前端已经很成体系了)。一般系统的大致整体架构图如下:需要说明的是,有...
  • 国内的互联网公司技术间的鄙视链

    千次阅读 2019-10-13 13:39:55
    点击上方“程序猿技术大咖”,选择“关注公众号”,一起共进步!在国内我们的互联网公司技术间最常见的鄙视链是:架构看不起全栈,全栈看不起后端后端不起前端,前端看不起运维,...
  • 点击上方[全栈开发者社区]→右上角[...]→[设星标⭐]前端架构师,听起来就是个很高大上的职位,在大多数程序员的眼中,架构师一般从事后端开发,Java或者C++出身,它们往往拥有这十...
  • 在这个行业中,可以细分出很多个职业,比如算法工程师,前端后端,安卓,ios,大数据等等。虽然都是一个圈的,但有些人就喜欢分个高低。有程序员在网络上就表示自己深有体会:感觉周围同学几乎都在搞算法,几个搞...
  • 以前后端人员瞧不起前端人员,那现在后端人员要重新认识一下前端,前端已经很成体系了)。一般系统的大致整体架构图如下:需要说明的是,有些小伙伴会回复说,这个架构太简单了吧,太low了,什么网关啊,缓存啊,...
  • 每一个程序员应该都听说过程序员鄙视链,做c的看不起做c++的,做c++看不起做java的,做java看不起做.net的,这些所有都看不起前端的,可以说,前端程序员应该处于程序员鄙视链的底端。 前端在行业中,之所以被...
  • 后端API接口

    千次阅读 2020-11-03 10:56:39
    以前后端人员瞧不起前端人员,那现在后端人员要重新认识一下前端,前端已经很成体系了)。 一般系统的大致整体架构图如下: 需要说明的是,有些小伙伴会回复说,这个架构太简单了吧,太low了,什么网关啊...
  • 你不是一个前端

    2019-09-24 18:06:03
    Mentor:“你不是一个前端” 我:"???" Mentor:“你不要老想着自己是一个前端,你不是一个前端” 我:“可是把我招来就是写前端的吗??” Mentor:“你可以写前端,但是你不要限制自...
  • 后端的发展前景如何?

    千次阅读 2019-05-15 09:53:49
    这里是修真院后端小课堂,本篇分析的主题是 【后端的发展前景如何?】 后端之所以叫后端,就是因为他有一层隐藏的含义:高并发,海量数据,分布式。 跟前端相比,最大的差别还在于遗留数据和扩展性。 很多...
  • 前端也被鄙视?

    2019-03-01 07:23:43
    每一个程序员应该都听说过程序员鄙视链,做c的看不起做c++的,做c++看不起做java的,做java看不起做.net的,这些所有都看不起前端的,可以说,前端程序员应该处于程序员鄙视链的底端。 前端在行业中,之所以被...
  • 后端的发展前景如何? 后端之所以叫后端,就是因为他有一层隐藏的含义:高并发,海量数据,分布式。...语法和功能方面,前后端意义差不大 很多传统行业里都是前后端一起写,薪资也不会高,二线三线城市大...
  • 搞算法的瞧不起写代码的?我们都知道程序员是一个很广泛的概念。在这个行业中,可以细分出很多个职业,比如算法工程师,前端后端,安卓,ios,大数据等等。虽然都是一个圈的,但有些人就喜欢分个高低。有程序员在...
  • 以前后端人员瞧不起前端人员,那现在后端人员要重新认识一下前端,前端已经很成体系了)。一般系统的大致整体架构图如下:需要说明的是,有些小伙伴会回复说,这个架构太简单了吧,太low了,什么网关...
  • 如何优雅地写后端API接口

    万次阅读 多人点赞 2020-12-23 15:14:42
    以前后端人员瞧不起前端人员,那现在后端人员要重新认识一下前端,前端已经很成体系了 1.接口交互 前端和后端进行交互,前端按照约定请求URL路径,并传入相关参数,后端服务器接收请求,进行业务处理,返回数据给...
  • 在国内我们的互联网公司技术间最常见的鄙视链是:架构看不起全栈,全栈看不起后端后端不起前端,前端看不起运维,运维看不起测试。而这个鄙视链关系转到产品经理和程序员之间就成了,程序员鄙视产品经理,产品...
  • 以前后端人员瞧不起前端人员,那现在后端人员要重新认识一下前端,前端已经很成体系了。 一般系统的大致整体架构图如下: 需要说明的是,有些小伙伴会回复说,这个架构太简单了吧,太low了,什么网关啊,缓存啊,...
  • 前端程序员为何会被“鄙视”呢?一方面可能是因为入门简单,一个编辑器,一个浏览器,不用配置开发环境,一个hello world就出来了;但核心原因恐怕是,很多人对前端的认识还停留在十几年前...
  • 这下前端的同学可以站起来了:你们后端不也就是 CRUD 嘛,凭啥瞧不起我们前端的同学啊? 今天就写一下最近做毕业设计用到的框架:Nest.js 的基础教程吧,简单教大家做一下 CRUD(小白向,大佬轻喷)。 挖个坑,这...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 776
精华内容 310
关键字:

后端为什么瞧不起前端