【前端圭臬】一：写给入坑前端的你

【前端圭臬】一写给入坑前端的你专栏目录导论【前端圭臬】一写给入坑前端的你HTML 篇【前端圭臬】二你知道的和不知道的 HTMLCSS 篇【前端圭臬】三详解 CSS 选择器【前端圭臬】四CSS 核心机制——如何确定一个属性的值【前端圭臬】五CSS 核心机制——布局【前端圭臬】六CSS 核心机制——动画JS 篇【前端圭臬】七JavaScript 简史与面向对象之道【前端圭臬】八JavaScript 数据类型【前端圭臬】九JavaScript 对象剖析【前端圭臬】十从规范看 JavaScript 执行上下文上【前端圭臬】十一从规范看 JavaScript 执行上下文下【前端圭臬】十二JavaScript 异步编程持续周更中前言是的我忍不住了打算自己动手做一个前端的专栏。两三年前我本着凑热闹的心态接触前端技术在学习的过程中总是觉得别别扭扭奇怪的名词、冲突的解释、诡异的技巧、半随意半工程化的实践、各种来源的标准时不时折磨着我的逻辑与理解力。说句不好听的我一个学 Java 的还是第一次觉得自己可以埋汰别的语言。后来一段时间我也没有认真对前端进行体系化的学习只是在需要时查查资料copy 一些代码。直到接触地多了知识逐渐串联到一起我才发现其实前端是有章法可循的只是因为飞速的变化让它看起来比较混乱。要想改善这种混乱的局面就需要有一批人把正确的知识传递开来而目前的情况是大神写的文字比较晦涩难懂说人话的又不愿意啃硬骨头总是停留在本来也是一看就懂的知识上。虽然我相信会有一天拨云见日但至少现在还是很难找到接地气儿的系统的教程帮助我们建立起对前端的整体认知。既然这样那我就先腆着脸干它一票。说实话这破专栏起这么个装比的名字如果写不好我都怕你们顺着网线来打我。但开弓没有回头箭莽一波就莽一波。不过放心我虽然始终难逃鸽的本性但太对不起读者的事情我是不会干的。先说点场面话通过这个专栏我想和你一起探索前端的极限在哪里是否值得深入耕耘前端如何演变成了今天的样子应接不暇的前端技术革新中究竟什么才是不变的东西前端的技术栈中有哪些精巧的设计与实现值得我们品味如何告别似懂非懂真正理解前端的各种知识如何成为一名能够创造价值的前端工程师这些问题会作为背景贯穿始终。除此之外我想我能做的就是尽可能地降低各类概念的理解成本让你遇到各种情况时心里不慌笑容嚣张。哪怕是没见过的也能一眼看出个大概。这个专栏里不会有太过基础的东西毕竟 MDN 之类的网站有大量新手教程。在需要前序知识的地方我也会贴出相关的链接。在这里我也立下 2021 年第一个 flag除法定节假日外每周更新一篇文章直到该专栏结束不少于 30 篇。专栏内容计划下面是专栏的内容大纲为了一览前端全貌打通各类知识之间的关联咱们的专栏会包含包括 HTML/CSS/JS、浏览器原理、网络协议、信息安全、工程实践、开源框架、技术趋势甚至是后端等各个方面的内容。不是我吹牛虽然我在这些领域都不算专家但还真都比较系统地学习和应用过。当然重点在 JavaScript 上。JS 属于典型的上手容易精通难的知识而且在发展的过程中还有很多公认的设计漏洞一部分逐渐被补上了一部分至今还逍遥法外。从某种意义上来讲学 JS 还真是件快乐的事。说实话现在前端的开源社区是最活跃的有时候你就看着网上各路人马为一个概念吵来吵去最后也没有定论JS 的版本迭代也十分激进现在基本一年一更不知道能搞出什么幺蛾子来。咱们的专栏还是以当前行业认可度最高的 ES6 为基准ES6 之后的一些有意思的特性也可能会涉及。除了大纲的内容外作为附加福利我会在教程的最后手把手教大家实现一个有价值的前端项目把前面讲解的知识串起来绝对物超所值。作为第一篇文章咱们先来达成一些共识明确下面两个问题“前端” 的定义是什么我们应该如何理解学习前端的路径、参考资料、技巧都有哪些1 什么是前端?1.1 前端的起源及定义很遗憾我花了几个小时依旧没有找到前端Front-End一词最初的根源但可以确定的是前后端这一概念与 Web 技术的结合大约在 2001 年前后而这一名词的广泛流传也与 Web 技术的崛起息息相关。有兴趣的同学可以尝试一下使用搜索引擎指定时间范围搜索 Front-End找一找究竟是谁第一次把这个名词推向了今天的含义。我们先看一下 wiki 和百度里对前端的定义。wikipedia:In software engineering, the terms front end and back end refer to the separation of concerns between the presentation layer (front end), and the data access layer (back end) of a piece of software, or the physical infrastructure or hardware. In the client–server model, the client is usually considered the front end and the server is usually considered the back end, even when some presentation work is actually done on the server itself.在软件工程中前端和后端是指软件或物理设施、硬件在表现层与数据访问层之间的不同的关注点。在客户端-服务器模式下客户端通常被认为是前端服务器通常被认为是后端即使一些表现层的工作实际上是服务器自己做的。In software architecture, there may be many layers between the hardware and end user. The front is an abstraction, simplifying the underlying component by providing a user-friendly interface, while the back usually handles data storage and business logic.In telecommunication, the front can be considered a device or service, while the back is the infrastructure that supports provision of service.A rule of thumb is that the client-side (or “front end”) is any component manipulated by the user. The server-side (or “back end”) code usually resides on the server, often far removed physically from the user.软件架构中在硬件与终端用户之间可能存在许多层前端是对提供用户友好界面的底层组件的简化抽象后端则通常用来处理数据存储和业务逻辑。在远程通信电信中前端被认为是设备或服务而后端是为服务提供给养的基础设施。一个经验法则是客户端前端是被用户操控的各种组件而服务器端后端代码通常位于服务器通常与用户有较远的物理距离。百度百科前端即网站前台部分运行在PC端移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展HTML5CSS3前端框架的应用跨平台响应式网页设计能够适应各种屏幕分辨率合适的动效设计给用户带来极高的用户体验。这个解释只能说深得凑字答题之精髓也不是胡说就是扯淡。但看了这个词条我想我们应该先弄明白“前后端”和“前后台”这两个概念的区别。1.2 前后端与前后台在中文环境下前后端通常是指技术层面的划分而前后台是业务层面的划分。实现前台需要前端和后端实现后台也需要前端和后端。在英文中front end / back end直译就是前端 / 后端但在特殊的语境下比如In content management systems, the terms front end and back end may refer to the end-user facing views of the CMS and the administrative views, respectively.在 CMS 系统中front end 和 back end 则分别是指终端用户直接看到的视图和管理视图。这个概念似乎又对应的是“前台 / 后台”。看来在英文中广义的前后端是包含前后台这个概念的。也就是说在英文和中文下前后端的含义并不完全相同英文中更加抽象中文中更加具体。为什么会这样呢究其本源前后端的前后其实就是距离用户远近的意思近就是前远就是后。因此前台是接近普通用户的系统或子系统称之为前端没毛病后台接近开发或管理人员称之为后端也没毛病。但刚好汉语中有前台、后台这样既形象又对称的词所以我们就半原创地使用了这样的概念。而英文中酒店前台叫 reception舞台后台叫 backstage没有类似的对称的词组所以就没多这么一出。说到这里“中台”这个真·原创概念被译为Middle Platform但前后台并没有固定的翻译。有公司会用 backstage system 这个词不过也没有作为术语确定下来。对于我们来说在中文环境下最好仔细区分前后端和前后台概念不要混用。在英文环境下则应该尽量使用具体的系统或子系统名称代替前台、后台这样的表述。1.2 什么是前端开发看了上面的定义你可能有点懵不过没有关系咱们可以走实用主义路线。在百分之九十五以上的场景中“前端” 一词指的都是“web 前端”前端开发指的就是“web 前端开发”对应英文就是Front-end web development。不管前端到底是什么我们在一开始需要搞清楚的最主要的概念其实就是——什么是 web 前端开发或者说我想干前端到底需要学点啥wiki:Front-end web development is the practice of converting data to a graphical interface, through the use of HTML, CSS, and JavaScript, so that users can view and interact with that data.Web 前端开发即通过 HTML/CSS/JS 等技术将数据转换为图形界面使用户可以查看并与数据进行交互。虽然这个定义并不那么完美但它指出了前端开发的核心目的是实现数据到图形接口的转换。为实现这个目的所使用的一系列基础知识、模型、语言、框架、辅助工具、标准规范及最佳实践等共同组成了前端开发技能树。这棵树的全貌可以参考【developer-roadmap/frontend - GitHub】我这里是 21 年 2 月下载的版本该版本上传时间为 20 年 4 月这个图就属于各种相关的东西都给扯上了。不必被庞杂的名词吓到咱们务实地讲不论其它部分是否更加重要最值得关注的自然是 JavaScript 以及当下所流行的框架学习这两个部分收益最明显。1.3 何谓大前端近年来经常听到“大前端”这个名词显然这也不是一个已经固定下来的概念目前来看大前端的这个大主要指两个方面一是终端涵盖范围扩大从 PC 浏览器扩展到移动端APP、智能设备等。二是前端相关技术能力扩大以 Node.js 的崛起为契机向后端进军。实际上主要不是前端变地更厉害是 JS 变地更厉害。第一种情况其实前端定义本来就很广泛没卡死说 PC 端本来也不“小”。第二种情况用 JS 写后端代码那就是后端呗。又会前端又会后端的人说是全栈不比说大前端好难道是不好意思承认我觉得咱们就老老实实说自己是做前端的大不大老板说了算你说你大老板觉得你不大那你还不如说自己不大。2 如何学习前端学习前端实际上就是学习 Web 前端开发技术。想学好一门技术主要需要明确三个问题即学习的路径是什么有哪些可靠的学习资料或资源运用什么技巧去学习嗯讲到这里说明一下交互设计这些东西虽然从定义上讲也是前端的一部分但在今天的环境下从事设计的同学的技能栈跟我们通常所说的前端开发工程师有交叉但重点不一样。这部分知识我相信也不是大家想看的也超出了我的能力范围因此不做说明。2.1 学习路径学校存在的最大意义一是学习环境二是有一个成熟的课程大纲也就是学习的路径。很多人脱离学校之后就很难成体系地学习就是因为不懂这个大纲的重要性。所谓学习就是沿着前人的脚步前进而不是事事都要自己探索。尤其是像互联网技术这样既相对成熟又容易获取资料的类型是很容易找到高质量的经验的有了别人的经验才能事半功倍。关于前端目前最受认可的路径就是上面那一幅图。当然图上的东西比较多是个豪华版。为降低弃坑概率我们可以从豪华版里挑出一些骨架再结合大部分情况下的上手顺序按照以下路径学习HTML学习基础语法初期够用即可无需纠结后期如有具体应用或优化场景再深入钻研。CSS 同上。JS上面也说了这玩意儿是前端复杂性的主要来源搞清楚各种常见又容易混淆的概念是必须的。如果学习的目的是找工作不可避免地还要刷一刷算法。框架选择一到两个当下流行的框架去应用感受其设计理念熟悉开发流程。这个我相信大部分工程师都会建议 React Vue Angular。理论知识主要是浏览器原理 、网络协议。这部分与前端知识结合可以在性能优化方面产生实打实的工程效益因此建议较为系统地学习。发展中的技术WebComponent、TypeScript、GraphQL 等。同时在具体实践中穿插应用工程化思想MVVM、PWA、前后端分离以及各类工具打包、测试、集成、版本控制等逐渐把各种知识串起来填补上空缺。咱们这个专栏也差不多是按这个路径串去走但会摘除过于基础的部分重点地帮大家理解一些别扭的地方从而建立一个短小精悍又五脏俱全的知识体系。《网络安全从零到精通全套学习大礼包》96节从入门到精通的全套视频教程免费领取如果你也想通过学网络安全技术去帮助就业和转行我可以把我自己亲自录制的96节 从零基础到精通的视频教程以及配套学习资料无偿分享给你。网络安全学习路线图想要学习 网络安全作为新手一定要先按照路线图学习方向不对努力白费。对于从来没有接触过网络安全的同学我帮大家准备了从零基础到精通学习成长路线图以及学习规划。可以说是最科学最系统的学习路线大家跟着这个路线图学习准没错。配套实战项目/源码所有视频教程所涉及的实战项目和项目源码学习电子书籍学习网络安全必看的书籍和文章的PDF市面上网络安全书籍确实太多了这些是我精选出来的面试真题/经验以上资料如何领取描述](https://i-blog.csdnimg.cn/direct/92a6ab8e26034045b97ae8ac36b2a650.png)以上资料如何领取