六星云课堂：web前端开发相关知识

前端是什么？在回答这个问题之前，我想到了一道面试题：当我们在浏览器中输入网址并按回车之后，接下来会发生什么？

我们来简单地看一看 “网页展现” 的整个过程：

比如这里有一个用户，他需要访问 abc.com 这个网址。一般来说，当用户输入一个域名时，是在请求一个 HTML 资源。当他完成域名解析之后，他的浏览器会向 abc.com 这个域名所指向的 Web 服务器发出请求。

有时候 Web 服务器直接就可以返回用户的请求了。有时候 Web 服务器还需要向数据库查询一些数据，然后才能把处理结果返回给用户。当用户的浏览器拿到服务器返回的 HTML 资源之后，就开始解析并显示 HTML 的内容了。

一般来说，HTML 页面需要 CSS 资源来描述页面的样式。比如浏览器在解析 HTML 时发现了一个 CSS 外链 abc.com/a.css，它就会去请求这个资源。

HTML 页面往往还需要加载外部的 JS 资源，比如 abc.com/a.js，此时浏览器同样会向服务器请求这个资源。

当所需的资源都加载完成之后，这个页面就可以提供完整的外观和功能了。整个过程差不多就是这个样子了。

说到前端技术，我们通常都会说到 “三大块”：HTML、CSS、JS，这是前端最核心的三项技术。

接下来，我们就会说到 “前端的分层架构”。这个架构的原则就是 “让合适的技术去做合适的事情”。一个网页从逻辑上可以视为这三层的有机结合体：

结构层

这一层的作用是表述一个页面中有哪些信息，以及这些信息之间的关系是什么。这一层在技术上是由 HTML 来实现的。

表现层

这一层决定了页面中的信息会以什么样的外观呈现出来。这一层由 CSS 来实现。

行为层

这一层控制了页面如何与用户进行交互。在传统的展示型网页中，可能只需要 “结构层” 和 “表现层” 就足以提供完整的功能；而现代网页承载了越来越多的交互，这就推动 “行为层” 的能力不断增强。这一层由 JS 来实现。

前端工程师的必备技能

✦

除了基本的 “三大块” 之外，如果作为一名前端工程师，还需要掌握以下知识和技能：

1

HTTP 相关：由于前端资源都是浏览器通过网络下载的，因此我们有必要了解相关的网络协议。

2

浏览器相关：前端代码运行在浏览器中，我们需要了解浏览器的各种特性，以及浏览器向我们提供的各种接口。

3

前端性能优化：让网页更快，减少用户的等待，这也是前端工程师面临的重要课题。优化网页的前端性能，需要我们具备上面两项知识，并且掌握性能优化相关的工具和方法。

......

在企业级的前端开发中，我们还需要了解如下知识点：

1

模块化：模块化是最常见的编程实践之一，令我们的代码组织更加清晰、易维护。ES6 为 JS 增加了完善的模块化方案，我们的日常开发也已经迁移到了 ES6 模块规范之下。

2

包管理：如何将开源社区中的优秀组件为我所用？这就不能不提 “npm” 这个最主流的 JS 包管理器。前端界优秀的开源项目几乎都发布到了 npm 的包仓库，我们日常开发中用到的第三方库也都是由 npm 来管理的。

3

打包工具：可以把我们写的模块化的源码和第三方包整合到一起，形成页面所需的完整 JS 资源。

4

组件化：在传统的前端开发中，HTML、CSS、JS 这三块的代码有各自独立的文件，这些文件往往也分散在不同的目录结构中。

如果页面功能区块的划分足够清晰，开发者就可以用 “组件” 的概念来把页面拆分，整个页面会被视为多个组件的嵌套和组合；同时，开发者也倾向于把每个组件相关的 HTML、CSS、JS 代码整合到同一个目录（或同一个文件）中，便于管理和维护。

这就是 “组件化” 的开发模式。要实现这样的开发模式，通常需要前端框架和构建工具的配合。

以上就是本次分享的全部内容了，希望对你有所帮助，六星云课堂为你打造编程世界，欢迎前往~