前端语言的历史：从 HTML 到 CSS 和 JavaScript 的演变
前端语言的历史下面简单总结一下html、css、js的历史。
超文本标记语言
为了使欧洲各国的核物理学家能够通过计算机网络及时交流和传递信息，进行协作研究，Tim-Lee博士开发了第一个网络服务器和网络客户端，并将其命名为WWW（万维网，World Wide web）万维网）
在发明万维网的同时，他还创建了HTML（Hyper Text，超文本标记语言），并推荐了近20种用于编写网页的元素，我们现在称之为标签。
W3C（World Wide web，万维网联盟）成为 HTML 后续标准的开发商。
W3C希望网络完全基于XML规则，并开始开发XHTML 2.0。这个版本与之前的版本差异更大，导致与现有网页甚至之前版本的 HTML 不兼容。
HTML5
W3C 组织内部出现了一股抵抗力量。他们希望支持创建 Web 应用程序的功能得到更多关注，并以此为目标扩展 HTML。 2004年，他们成立了自己的组织：（Web Group，网络超文本应用技术工作组），也就是官方网站*。大部分工作分为：web Form 2.0 和 web Apps 1.0，均基于 HTML 规范扩展。这两个规范合并后，简称为 HTML5 规范。
CSS
CSS（Style，层叠样式表）的发展历史比较简单。该语言的主要功能是为文档中的标签添加大小、颜色、位置等特征。 “级联”是指可以多次编写一个标签的样式，但一定的规则顺序决定了应用哪种样式语言。
CSS3
CSS3是CSS（层叠样式表）技术的升级版本。 1999年制定，2001年5月23日，W3C完成了CSS3的工作草案，主要包括盒模型、列表模块、超链接方法、语言模块、背景和边框、文字效果、多列布局等模块。
（简称“JS”）是一种轻量级、解释型或即时编译型、功能优先的编程语言。尽管它作为开发网页的脚本语言而闻名，但它也用于许多非浏览器环境。它是一种基于原型编程、多范式的动态脚本语言，支持面向对象、命令式和声明式（如函数式编程）风格。
ES6
标准是。截至 2012 年，所有浏览器都完全支持 5.1，较旧的浏览器至少支持 3 个标准。 2015年6月17日，ECMA国际组织发布了第六版。这个版本官方称为2015，但通常称为6或ES6。
浏览器
和之间的早期浏览器战争以通过将 IE 与操作系统捆绑在一起而取得胜利而告终。两家公司无视W3C文档标准，并且与彼此的浏览器不兼容，导致今天的Web开发必须处理棘手的兼容性问题，并使IE臭名昭著几个世纪。即使是现代浏览器也有不同的差异。
2008年 的推出标志着第二次浏览器战争的开始。随着的后裔的推出，IE 也遭到了包围。再加上移动互联网的快速增长，IE正在被彻底边缘化。
后端眼中的前端
每个程序员都应该听说过程序员鄙视链。做C的人看不起做C++的人，做C++的人看不起做Java的人，做Java的人看不起.net。这些都看不起前端人。可以说，前端程序程序员应该处于程序员鄙视链的最底层。
前端之所以在业界被鄙视，完全是因为它容易上手。早期的前端俗称美术师、图片剪辑师。他们每天的工作就是剪图片、写HTML、写CSS。在Java或者C语言开发者眼中，仅仅渲染一个网页并不困难。
大多数后端仍然坚持jsp、php等前后端不分离的思想。他们认为前端只需要改变样式就可以显示数据，这并不困难。他随口道：“改变这个对你来说很难吗？”
即使后端了解过前端的人也不会走得特别深入。他们只是知道现在已经不再是以前的写作时代了，并没有了解前端的全貌。
今天的前端
自2009年node出现以来，前端的发展发生了爆炸性的飞跃，进入了大前端时代。
前端工程与自动化
随着前端开发复杂度的增加，各种优秀的组件框架也遍地开花。同时，我们面临着业务规模的快速发展和工程团队的不断扩大。当前，网络业务变得越来越复杂和多样化。如今，仅仅找一个前端项目，已经不能再像过去那样把一个页面和几个插件拼在一起就可以完成了。当项目复杂时，就会出现很多问题。我们希望在日常开发中制定标准化的前端工作流程，很好地规范统一项目的模块化开发和前端资源，让代码维护和相互协作更加简单便捷。让前端开发自动化成为一种习惯。
构建前端项目的几个阶段第一阶段：库/框架选择
基本上，现在没有人从头开始构建网站。三大框架：React/Vue/等框架涌现，解放了大量生产力。毫无疑问，合理的技术选型可以为项目节省大量的工程工作。
除了主流框架之外，还有很多提高开发效率的UI框架，例如：、antd、UI、ionic等。
第 2 阶段：构建和管理工具
选好型号后基本就可以开始打字了，但是光靠解决开发效率是不够的。复杂的项目往往需要大量的项目包/库依赖，需要多人协作，需要在各种环境下进行调试。压缩、验证、管理代码，然后简单的以页面为单位合并资源（ps：以上排序不分先后）。
npm 和yarn 管理项目依赖关系；
git对代码进行版本控制；
Gulp 和 grunt 优化了项目构建流程。
第三阶段：JS/CSS模块化开发
分而治之是软件工程中的重要思想，也是复杂系统开发和维护的基石。这同样适用于前端开发。解决了基本的开发效率和运行效率问题后，前端团队开始思考维护效率。模块化是目前前端最流行的分而治之的方法。
JS模块化方案有很多，比如AMD//UMD/ES6等，相应的框架和工具也有很多，比如：，；
CSS模块化开发基本上是在less、sass等预处理器的/mixin特性的支持下实现的。
第四阶段：标准化
模块化、组件化决定了开发模式，而这些东西的实现都需要规范来实现。标准化实际上是工程中非常重要的一部分。项目初期规范制定的质量将直接影响后期开发的质量：
目录结构的开发
编码标准
前后端接口规范
前端输入输出数据文件
文档规范
组件管理
Git分支管理
描述规格
常规的
视觉图标规范
https://p3-pc-sign.douyinpic.com/tos-cn-i-0813/o0dTvABYqaDAvie5z41eVADAgEJFCTpIAA0ri4~tplv-dy-aweme-images:q75.webp
为什么需要 lint
设计本身存在很多缺陷，不严谨的代码可能会引发神奇的错误。例如，混合使用==和===可能会导致类型不一致引起的bug，缺乏经验的开发人员很难检测到异常。
因此，我们需要传递 、 、 等代码规范。
前端还能做什么？
上面介绍了前端开发搭建前端项目所需要的一些知识，那么我们就来看看前端还能做什么。
服务器
上面提到，有后端同学认为服务器端业务逻辑复杂，因此比前端更难。
但实际上我们有node，它也可以用作服务器端语言。 （当然，没有什么好的说法，最优的选择完全取决于业务场景）
常用的node框架有：koa
很多人可能对做服务器端有疑问。这是阿里巴巴节点大佬在知乎写的文章。它可能会在一定程度上改变你的看法。
移动开发
目前移动应用开发主要有以下三种方式：
App：本机应用程序（ App）
Web App：网络应用程序（移动网络）
应用程序：混合应用程序（混合应用程序）
我们可以通过react、Swift等框架来开发原生应用，而不必使用Swift。
Web App可以直接通过h5实现
App可以通过WeX5等实现。
微信小程序
我们可以使用mpVue、Taro等框架来编写小程序。
桌面应用程序
桌面应用程序开发现在已经为前端占据了一席之地
基于Node.js，您可以使用HTML、CSS并构建应用程序。
兼容Mac、Linux和Linux，可以为这三个平台构建应用程序。
ps：代表桌面应用程序，基于微软开发。
它是由微软开发的免费开源编程语言。它是 的超集，本质上向该语言添加了可选的静态类型和基于类的面向对象。
设计目的是为了解决“痛点”：弱类型和无命名空间，难以模块化，不适合开发大型程序。另外，它还提供了一些语法糖，帮助大家更方便地练习面向对象编程。
前端也可以做AI
随着AI技术的普及，前端也能发挥作用。然后，借助 .
网络VR/网络GL
线上虚拟实现，前端表现还是不错的。 Three.js，以及许多其他优秀的技术。
案件：
游戏
在浏览器中，基于HTML5技术的游戏引擎，我们可以使用JS来编写各种游戏。
不知道大家有没有发现浏览器自带的恐龙跑酷游戏呢？
://dino/仔细看，会有惊喜。
动画片
随着互联网的普及，用户对页面体验以及各种动态效果的实现有了更高的要求。在浏览器中通过css3和js实现动画并不难。现在已经不是闪存的时代了。相对于flash的性能消耗、不安全性、适应性问题，今天的前端可以更好地实现。
发布一个css3动画示例：
前端还需要知道什么？
除了上面介绍的技术知识之外，前端还需要了解什么？
渐进式网页应用
PWA（Web App）是一个利用多种技术来增强Web应用程序功能的概念，可以让网站体验更好，并且可以模拟一些原生功能，例如推送通知。在移动端使用标准化框架，让Web应用呈现出与原生应用类似的体验。
PWA 不仅仅指某种技术。你可以把它理解为一个想法和概念。目的是对原生应用程序进行基准测试，并通过一系列Web技术来优化Web网站，以提高其安全性和性能。 、流畅度、用户体验等指标，最终达到用户喜欢使用app的感觉。
PWA包含的核心功能和特性如下：
网页应用程序
缓存 API 缓存
推送&推送和通知
同步后台同步
响应式设计
搜索引擎优化
https://i-blog.csdnimg.cn/blog_migrate/155e0f82bdaebdf8959100bf1324b4e3.png
搜索引擎优化（），又称SEO，是通过分析搜索引擎的排名规则，了解各种搜索引擎如何进行搜索、如何抓取互联网页面以及如何确定特定关键词搜索结果排名的技术。搜索引擎利用容易被搜索引用的方法对网站进行有针对性的优化，提高网站在搜索引擎中的自然排名，吸引更多的用户访问网站，增加网站的访问量，提高网站的排名。网站的销售能力和宣传。能力，从而提升网站的品牌效应。
浏览器兼容性
虽然现在浏览器占据了市场的主导地位，但是我们仍然需要了解其他浏览器的兼容性问题，这些浏览器使用的内核，以及我们的前端项目在不同浏览器中可能出现的不同效果和问题。 。 （该死的IE）
网站安全
最典型的就是XSS、CSRF攻击等。
XSS攻击通常是指利用Web开发过程中留下的漏洞，通过巧妙的方法向网页中注入恶意指令代码，让用户加载并执行攻击者恶意创建的Web程序。这些恶意 Web 程序通常是（但也可能）包括 Java、、、Flash 甚至纯 HTML。攻击成功后，攻击者可以获得各种内容，包括但不限于更高的权限（例如执行某些操作）、私人网页内容、会话等。
设计工具
作为前端，我们需要达到想要的页面效果，并且能够使用Figma或者Figma等设计工具来准确还原设定稿。
前端和后端
环境不一样
前端：代码主要运行在客户端（PC、手机、pad）。
后端代码主要运行在服务器端（机房服务器等）。
思维方向与用户交互不同
前端的首要目的是让用户使用起来更舒服，考虑到界面布局、交互效果、页面加载速度等，主要关注用户能看到的部分，以及浏览网页的部分在客户端（PC、手机、Pad）。
后端考虑了更多的业务逻辑、数据库表结构设计、服务器配置、负载均衡、数据存储、跨平台API设计等，还考虑了用户看不到的部分，保证业务逻辑处理数据的严谨性。 ，保证数据吞吐性能。
稳定性不同
前端主要怕设计稿频繁变更以及布局风格和交互效果要求的变化；
后端主要是害怕使用规模增大时业务逻辑发生变化或者稳定性；
语言不一样
前端：html、css、js
后端：java、php、C#、...
追求
前端：前端工程师将重点关注HTML5、CSS3、ES6 7、vuejs、less/sass、gulp、模块化、组件化、设计模式、浏览器兼容性、性能优化等。
后端：以Java工程师为代表的后端开发，基本上大部分精力都会集中在Java基础知识、设计模式、Jvm原理、+原理和源码、linux、mysql事务隔离和锁定机制、http/tcp、多线程、分布式架构、弹性计算架构、微服务架构、java性能优化以及相关项目管理等。
和JAVA
Java 是一种真正的面向对象语言。即使在开发简单的程序时，也必须设计对象。
它是一种脚本语言，可以用来创建与网络无关、与用户交互的复杂软件。它是一种基于对象和事件驱动的编程语言。因此它本身提供了一套非常丰富的内部对象供设计者使用。
强变量和弱变量
两种语言使用的变量是不同的。
Java使用强类型变量，即所有变量都必须在编译前声明。
<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'> <pre style="margin: 10px 5px;letter-spacing: 1.4px;font-family: Roboto, "Courier New", Consolas, Inconsolata, Courier, monospace;font-size: 15px;line-height: 1.4em;"><section style="font-size: 14px;background: rgb(238, 238, 238);overflow: auto;border-radius: 3px;line-height: 2em;margin: 1em 5px !important;padding: 1em !important;">String y;<br/>x=1234;<br/>x=4321;<br/></section></pre></p>
在 中，使用弱类型，即变量在使用前不需要声明，但解释器在运行时检查其数据类型。
<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'> <pre style="margin: 10px 5px;letter-spacing: 1.4px;font-family: Roboto, "Courier New", Consolas, Inconsolata, Courier, monospace;font-size: 15px;line-height: 1.4em;"><section style="font-size: 14px;background: rgb(238, 238, 238);overflow: auto;border-radius: 3px;line-height: 2em;margin: 1em 5px !important;padding: 1em !important;">let x=1234;<br/>let y="4321";<br/></section></pre></p>
的出现使得声明变量成为可能，但它本质上是一种弱类型语言：
<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'> <pre style="margin: 10px 5px;letter-spacing: 1.4px;font-family: Roboto, "Courier New", Consolas, Inconsolata, Courier, monospace;font-size: 15px;line-height: 1.4em;"><section style="font-size: 14px;background: rgb(238, 238, 238);overflow: auto;border-radius: 3px;line-height: 2em;margin: 1em 5px !important;padding: 1em !important;">let x:string = "1234";<br/>let y:number = 1234;<br/></section></pre></p>
班级
Java的类是一个类。
js中没有class的概念。 js的继承是依靠原型链完成的。 js的类本质上是一个对象。 ES6提供了更接近传统语言的编写方式，引入了Class的概念作为对象的模板。类可以通过class关键字来定义。基本上，ES6 类可以被视为语法糖。
JS中没有内部类，但是JS可以在()中定义类。
es6类的继承：
<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'> <pre style="margin: 10px 5px;letter-spacing: 1.4px;font-family: Roboto, "Courier New", Consolas, Inconsolata, Courier, monospace;font-size: 15px;line-height: 1.4em;"><section style="font-size: 14px;background: rgb(238, 238, 238);overflow: auto;border-radius: 3px;line-height: 2em;margin: 1em 5px !important;padding: 1em !important;">class Father {<br/> constructor(){}<br/> money(){<br/> console.log("10000块");<br/> }<br/>}<br/>// 子类Son使用 extends 继承父类Father<br/>class Son extends Father {}<br/>var ss = new Father();<br/>ss.money();<br/> // 10000块<br/></section></pre></p>
范围
我的同学肯定比我更熟悉Java的作用域后端，所以我就跳过了。
作用域 在es5及之前，只有全局变量和局部变量，以函数为作用域。
es6之后，出现了块级作用域{}。
箭头函数和表达式
在JDK8和ES6的语言开发中，Java表达式和箭头函数有着千丝万缕的联系；
箭头函数（arrow）是C#中的一个表达式。据说Java8也添加了它。但不管怎样，JS 正在吸收其他语言的优秀特性（比如yield、class、默认参数等），而且不管这些特性是好是坏，这个东西本身就是优秀的。
只不过Java使用的是->箭头，而C#使用的箭头和JS是一样的：=>。这个箭头被称为“运算符”，行话发音为“goes to”。
JAVA表达式简化过程
箭头功能：
<p style='margin-bottom:15px;color:#555555;font-size:15px;line-height:200%;text-indent:2em;'> <pre style="margin: 10px 5px;letter-spacing: 1.4px;font-family: Roboto, "Courier New", Consolas, Inconsolata, Courier, monospace;font-size: 15px;line-height: 1.4em;"><section style="font-size: 14px;background: rgb(238, 238, 238);overflow: auto;border-radius: 3px;line-height: 2em;margin: 1em 5px !important;padding: 1em !important;">const fun = function(x, y) {<br/> return (x + y);<br/>}<br/><br/>const fun = (x, y) => x + y;<br/></section></pre></p>
———————————————
页:
[1]