跳到主要内容

前端学习指南

基础​

要进行开发，应准备一个使用比较友好的编辑器（如 VSCode），以及确定一个兼容的最低浏览器版本，这将决定你能使用到哪些语法、功能、API 等等。

信息
  • HTML 无法被 Polyfill，但部分可以退化为依靠 CSS 和 JavaScript 实现
  • CSS 无法被 Polyfill
  • JavaScript 部分标准可以被 Polyfill

HTML、CSS、JavaScript​

可以从附录里的 MDN 和 W3Schools 进行基础的了解。

布局模式​

随着各项标准的发展，布局模式也经历了多次演变。根据当时浏览器的兼容性，产生了如下几种布局模式：

table 布局​

早期的开发是使用 Microsoft FrontPage 和 Macromedia Dreamweaver 等所见即所得编辑器居多，但生成的代码过于冗余，甚至部分不符合规范标准。这个时期的网页功能很少，以展示类的居多，同时屏幕分辨率也相对较小（800 * 600），产生了以 table 为主的布局方式。

示例
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>Title</title>
  </head>
  <body>
    <table width="780" border="0" align="center" cellspacing="0">
      <tr>
        <td colspan="2">
          <center>header</center>
        </td>
      </tr>
      <tr>
        <td width="75%">
          <font color="red" size="4">content</font>
        </td>
        <td width="25%" valign="top">side</td>
      </tr>
      <tr>
        <td colspan="2" bgcolor="#eeeeee">footer</td>
      </tr>
    </table>
  </body>
</html>

float 布局​

随着 CSS 的引入，语义化 HTML 的要求，页面上逻辑变得越来越多，老旧的所见即所得编辑变得不太好用，合适的文本编辑器流行起来。同时为了解决跨浏览器兼容性问题，jQuery 作为这个时代最主要的解决方案遍布各个地方。主流屏幕分辨率提高到了 1024 * 768，栅格式布局也来到了 80 * 12 = 960 的宽度。

示例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Title</title>
    <style type="text/css">
      .container {
        width: 960px;
        margin: 0 auto;
      }
      .header {
        text-align: center;
      }
      .row:after {
        content: ' ';
        display: block;
        height: 0;
        clear: both;
      }
      .content {
        width: 75%;
        float: left;
        color: red;
        font-size: 1.25em;
      }
      .side {
        width: 25%;
        float: right;
      }
      .footer {
        background-color: #eee;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header">header</div>
      <div class="row">
        <div class="content">content</div>
        <div class="side">side</div>
      </div>
      <div class="footer">footer</div>
    </div>
  </body>
</html>

flex 布局​

标准的进一步发展，逻辑的进一步复杂，对 UI 的统一性需求，催生出了 Bootstrap 这款响应式设计优先的框架。在 float 也渐渐不能满足需求的情况下，flex 作为新的标准诞生了，对于现代浏览器来说有着足够好的兼容性（IE 10+），也是目前的主要布局模式。

示例
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Title</title>
    <style>
      .container {
        width: 960px;
        margin: 0 auto;
      }
      .row {
        display: flex;
      }
      .content {
        flex: 1;
        color: red;
        font-size: 1.25rem;
      }
      .side {
        width: 25%;
      }
      .footer {
        background-color: #eee;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="header">header</div>
      <div class="row">
        <div class="content">content</div>
        <div class="side">side</div>
      </div>
      <div class="footer">footer</div>
    </div>
  </body>
</html>

了解更多信息：

开发模式​

下面的部分小节列出了一些成熟的常用工具。

传统模式​

针对仅静态内容，使用编辑器编写原生内容然后浏览器刷新查看更改。

静态生成（SSG）​

在前一节的基础上引入了 Node.js 工具链，同时使用模板引擎等提高代码复用率。

客户端渲染（CSR）​

针对前后端分离并有交互的内容，大量使用了 Node.js 工具链，当前主要开发模式。同时也分为了多个框架流派。

React​

Vue​

Angular​

服务器端渲染（SSR）​

在前一节的基础上发展而来，将前后端整合开发，主要用于全栈，SEO 优化等。（严格来说已超出前端范畴）

React​

Vue​

一些误区​

吹捧 Vite，夸大 HTTP 2 性能​

由于 ES Module 已作为标准推出，很多编译器以该标准作为基础进行优化，以达到性能提升。另外 HTTP 2 的普及，也使大量小文件的加载性能得到提升。但根据真实生产环境中的测试，切换到 ES Module + HTTP 2 的方案并没有带来很大的提升，有的时候反而情况变得更糟糕，这是解释型语言的弊端。

了解更多信息：

吹捧 yarn、pnpm​

yarn 和 pnpm 都是在早期针对 npm 的不足诞生的工具，但今天的 npm 作为默认工具已改进吸取了大部分优势，新的特性包括：

  • 提升依赖
  • workspace 支持
  • 以目录链接方式安装依赖（测试）

附录​

参考资料：

工具类：

段子：