相关文章：_Misc 17
本文不涉及具体的细节，浅谈一下 Web 前端的 1 2 3 ……
前端是什么
在当下的产品开发流程中，大致分为以下几个过程：
1. 产品设计（需求分析）
2. 技术选型
3. 前端负责界面渲染、交互 & 后端负责数据处理
4. 测试（功能）
5. 运维部署
这里，我们只关注第 3 点，即具体的开发过程。
要理解‘什么是前端’，最好回顾一下 Web 的发展史。这是世界上第一个网站 http://info.cern.ch/ ，于 1991.8.6 上网，它解释了万维网是什么，如何使用网页浏览器和如何建立一个网页服务器等等。
你会发现，这个页面就是一份简单的 .html 文件，让我们来看一下它的实现过程。
- 伯纳斯·李（互联网之父）写了一个 HTML 文档，
- 然后把这个文档放在连接着网络的一台电脑上（服务器），
- 用户电脑通过客户端（通常是浏览器）连网访问它。
看，最初的时候，只有 HTML ，它就是一个文本文件，没有交互，用户只能浏览。这个时候，也没有什么前后端的概念。开发人员需要做的，就是编写 HTML 文档，并把它放到可以被访问的服务器上。
用户或开发人员，感觉单纯的 HTML 文件在浏览器上显示出来不好看，于是有了 CSS 来装饰样式（1995），我们进入了 HTML + CSS 的时代。
目前为止，用户还是只能看啊，用户说：“我要交互！我要交互！我要交互！”
伯纳斯说：“给你表单！给你表单！给你表单！”
现在用户可以通过表单，输入一些信息（比如登录），点击按钮，来和服务器进行一定的交互了。同样，服务器端也有同样的程序来处理用户提交的表单信息。此时，一切都还是简单的！
直到有一天，用户又不满意了，大声说：“我要更多的交互！更多！更多！”
网景公司（火狐浏览器前身）委托 Brendan Eich 开发了 JavaScript 语言，用于满足用户的需求。 Brendan 只花了 10 天时间，太快了，所以 JavaScript 有许多的语言缺陷，但又阴差阳错地成了浏览器最钟爱的（内置了的）脚本语言，简直了。有些事，就是那么不讲道理。
我们现在进入了 HTML + CSS + JS 的时代！
你还没说什么是前端呢？
别着急，就要说了。最初的时候，开发任务不算很重，一个开发人员就可以完成 .html、 .css、 .js 文件及服务器上处理用户请求的程序的编写。
这时，还是没有区分前端、后端，因为都是一个人写的！
后来，网页内容越来越丰富，用户的交互越来越多，服务器端处理的请求越来越复杂。于是，程序员 B 对程序员 F 说：“我来处理用户提交的信息，生成展示所需的数据，你负责编写文档（html、css、js 等）文件，把数据插入到 html 中，返回给用户的浏览器来展示。”
于是乎，程序员 B 只负责处理用户请求，程序员 F 负责页面渲染，提高了效率。慢慢地，也就有了专职于后端（Back End）和专职于前端（Front End）的方向。
现在，我们明白了，所谓‘前端’，主要就是负责展示部分，最终的交付便是用于用户端浏览器可以识别的页面文件。
近些年来，前端发展可谓是如火如荼，页面的交互也越来越复杂，各种框架层出不穷，让人眼花缭乱。但它的本质，从来就没有改变过。最终， 前端的核心，就是生成用户浏览器可以渲染的页面文件。
重点来了，一是浏览器，二是页面文件。
浏览器
说起浏览器，大家肯定都不陌生，如 Chrome、 Edge、 Firefox、 IE ……
浏览器只认识 HTML ！
如果，深入了解，就会发现浏览器实在是一个复杂的软件，好在我们只需要应用它。更多关于浏览器的渲染细节，可以参考 浏览器 这篇文章。
对于一位前端开发人员来说，现在是幸福的，因为有了浏览器开发工具（一般现代浏览器通过 F12 打开），你可查看页面的请求过程和渲染细节，很方便地开发和调试项目页面。
页面文件
再厉害的框架，最终都要编译打包成 html + css + js ， 因为浏览器只认这个组合！
|
|
一个 .html 文件，通过 <link> 标签引入 .css 文件，通过 <script> 标签引入 .js 文件，这就是页面文件的基本结构。
HTML
HTML ，全称‘超文本标记语言’（Hyperext Markup Language） ，是一种用于创建网页的标准标记语言。
为什么需要‘标记’呢？
你直接对浏览器讲中文，它是听不懂的！你必须跟它讲 html 语言，它才能懂你要干什么。
HTML 语言很简单，你只需要用相应的标签来包裹你想要浏览器渲染的内容，就可以了。比如，段落标签 <p> ，分割线标签 <hr>，标题标签 <title> ，引入样式文件的标签 <link> ，引入脚本文件的标签 <script> 等等。
在实际学习的过程中，有一些标签很常用，有一些标签几乎不用，边学边用即可！
CSS
CSS，全称‘层叠样式表’（Cascading Style Sheets），是一种用来为结构化文档（如 HTML）添加样式（字体、间距和颜色等）的计算机语言。
CSS 中最重要的一个概念就是‘选择器’了，即选中你要添加样式的页面元素！ ……
JavaScript
前端领域， JavaScript 可谓是绝对的主角（后续简称 JS），它是目前主流浏览器（所有）指定的唯一脚本语言。
最初，它只是为了满足用户日益俱增的交互需求，现在也是，只不过更加的强大和复杂。但本质上，仍然是服务于 HTML 的，这一点从未改变。
JS 的核心语法很简单，如变量、函数及日常应用过程中常用到的数组、对象等数据结构。
缺陷很多，但不影响 JS 登大雅之堂！可以这样说，精通 JS 的过程，就是一场学习如何‘踩坑’的旅程，开个玩笑，其实现在好多了。
框架
JS 是通过什么来指挥浏览器的呢？
浏览器提供了一系列的接口 API ，与 JS 最紧密的便是 DOM 了。最初的时候，开发人员也是这样做的，通过 HTML 编写好页面内容，通过 CSS 来添加样式，通过 JS 操作浏览器提供的 API 接口来操作 DOM 。
DOM （Document Object Model） 文档对象模型，是浏览器解析 .html 文件后生成的一个树形结构，用于渲染页面。
简单的页面，这样做很容易。
问题就在于，现在的页面越来越不简单了……
于是框架就上场了！看，有‘需求’，就有‘市场’！
JQuery
与其说 JQuery 是一个框架，不如说，它是一个函数库。本质上来说，它是对原生 JS 的一种封装，用来更方便地操作 DOM 。对，你仍然需要操作 DOM ！
现在用的不多了，在使用中了解即可。
Vue & React
这两个前端框架，是目前最热门、最流行的前端框架了。除了，实现原理的某些部分有些不同外，其余应用都是大同小异。学习了其中一种，再学习另一种，也会很快。
这里，我们以 Vue 为主，某些方面对比 React 来说。不得不说，Vue 对于初学者是更加友好的，性能也很不错！国内来说，流行程度更胜一筹。
首先，需要明白，Vue 本身并没有为 html + css + js 引入什么新的东西，你所编写的 Vue 相关的模板文件 .vue、 样式文件 .scss、 逻辑文件 .js ，最终经过编译打包后，还是 html + css + js 这一套组合！
也就是说，你最终，放在服务器上，供用户访问的页面文件，始终都是 HTML ！
学习 Vue ，究竟学什么？ 模板语法！！！
是的，和你学习 HTML ，没什么太大的区别，正如你学习 html 是为了让浏览器知道你的说什么，学习 Vue 的模板语法也是为了让 Vue 相关的编译器、打包器知道你要它们干什么！仅此而已！
你按着它规定的语法来编写 .vue、 .scss、 .js ，对应的编译器、打包器就知道如何把你编写的内容转成 html + css + js 供浏览器渲染绘制页面。
我们不止一次提到了编译器和打包器，它们是什么呢？有什么作用？
编译器
拿 Vue 来说，你编写的是组件是 App.vue ，浏览器是不认识的，经过编译器编译就成了 *.js ，就可以引入到 *.html 中供浏览器解析了。可以认为编译器就是一个‘加工厂’，进去的是 .vue ，出来的是 .js 。
看，编译器并不是什么神奇的东东，它本质上来说，就是个‘翻译机’。
编译器不需要应用开发者参与，它是由框架实现的，开发者只需要按着框架给出的‘写法’，编译器就能读懂，并正确转译。
打包器
打包器呢？为什么需要打包器？因为随着前端内容越来越复杂，把所有的逻辑写在一个 .js 文件中对于程序员来说是不友好的。比较典型的方式，就是通过模块化编程来避开这一点。也就是说，我们会把交互逻辑分散到不同的 .js 文件中，方便编写和复用。如此，在一个项目中，我们使用的资源分分散在项目的不同层级之中，有 .js ，有 .css 等等。最终使用的时候，打包器会根据它们之间的依赖关系，将这些资源再合并到一起，引入到 .html 中，供浏览器渲染。
是的，打包器就像一个‘拼接手’，按照资源（模块）的依赖关系，把零碎的‘资源’合成一个整体。
当前，比较流行的打包器仍然是 Webpack ，你需要学习并了解它，同样的，边学习，边使用，在使用中学习。
另外，你可能也需要了解一下 Rollup ，它也是一种打包工具，最新的 Vue3 推荐的脚手架 Vite （项目初始化工具）就是集成了 Rollup 。
同样的，所有的打包工具，实现方式可能各有不同，但其最终目的和思想，都是大同小异的。
其他
模块和组件
在 模块化编程 中，我们具体说明过模块相关的概念，可以参考一下。
什么是模块？什么是组件？
很多时候，这两个概念的划分不是很清楚，甚至是通用的。比如，一个 .vue 文件，可以称为是一个组件，一个完全的 Vue 应用其实就是许多组件组成的‘组件树’。
模块，多是缩写的 .js 文件，每个模块实现了不同的功能，可以通过相应的方式引入别的模块，及暴露自身供外部模块使用的功能。它是一个封装的概念，比如模块 A 引入了模块 B（当然也可不引入），并包含 1、 2、 3 三个功能，模块 A 可以选择只暴露 1、 3 两个功能给外部使用。
在编写 Vue 组件的过程中，我们常会引用到不同的功能模块，比如，我们引入一个时间模块，用来格式化当前的时间，引入一个排序模块，用来给某个数组进行排序等等。
预编译器
什么是预编译器？顾名思义，它也是一种编译器，一般用于资源打包前，比如将 .scss 样式文件编译成 .css 文件。 Dart 就是目前使用最多的一种 SCSS 的预编译器，只需要在打包工具中，配置好，打包过程中，就会自动完成这个转译的过程。
扩展一下，就会发现，程序这个东东经常做这种转来转去的东西。一方面为了程序员编写方便，维护方便，另一方面为了编译器、计算机能理解执行。
一度连 .html 文件都有相应的编译器，如 Jade ，现在不怎么使用了。
后端是什么
在前后端分离之后，后端方面主要就是接受用户在前端发出的请求，分析处理，该请求数据库的请求数据库，该拒绝响应的拒绝响应，把相应的处理结果返回给前端，前端使用这些数据进行页面渲染或其它处理。
有一点需要注意的是，无论是后端的服务包，还是前端的项目包，都是需要部署在服务器端的，用户只是通过浏览器访问它们。
当然，后端开发也经历了一系列的变革，有了不少好用的框架工具，比如 Java 领域集大成的 Spring 家族框架。
关于 Node
Node 让 JS 也可以在服务器端大展拳脚，它与用在浏览器中的 JS 有什么区别呢？其实，语言本身没有什么很大的区别，毕竟基本上都遵守 ECMAScript 标准。它们主要是宿主（运行环境）不同，NodeJS 的宿主是 V8 ，前端 JS 的宿主则是浏览器，仅些而已。
内容看着不少，其实，刚开始的时候，只需要学习一下 NPM 包管理方面的知识就可以了。多数时候，只需要使用它安装项目所需要的第三方工具包。
学习路线
- html、 css、 js 的基本使用
- npm 的相关概念
- vuejs 的模板语法及结构
- webpack 的了解
结语
以上内容，只是一个大概的、过程性的描述，并没有牵扯到具体的开发细节。但是，理解需要学习什么，为什么学习，也是一件重要的事情。我们对于不熟悉的事物，多数时候有些过于‘敬畏’，这是正常的，一旦揭开了它的面纱，就会发现，一切不过如此。
