前言

我是一个后端工程师，前端是顺带手搞的，之前捣鼓 jQuery、Bootstrap、Vue 之类的，最近再折腾小程序。

接触前端完全是迫于工作需要，毕竟有个看得见、摸得着的东西，人家会认为你确实搞了点东西，也能明白你大概搞的是个啥。

因为没把前端当主业，就没正儿八经地学过。每次都是从网上扒个模板，照猫画虎地东一榔头西一棒槌地改吧改吧，基本上都能糊弄过去。有些时候也会很痛苦，想要的效果模板不支持，要自己实现，自己又不懂，各种查资料，东拼西凑地堆点儿代码，一遍遍地测试，运气好几下搞定，运气不好半天也没进展，很影响心情。

后来要搞自己的产品，就是前面说的小程序，可不能马虎，真就静下以来认真学习了一下，有三点体会：

主要讲第一点，前端本质就三个东西：Html + Css + JavaScript。

有些同学之所以觉得前端学起来比较困难，是因为这三个东西还没有搞明白，就被忽悠着学习那些名字奇奇怪怪，看起来花里胡哨的框架；这些框架堪称是日新月异、层出不穷，轮子是一个接一个，还没搞明白一个，另一个已经在路上了，就一个字：累。

还是那句老话：万丈高楼平地起，基础很重要。这里我不会介绍它们具体的内容，而是帮助你理解它们是干什么的。抓住核心脉络，细节就好说了。

Html

大部分人介绍 Html 的时候会按树模型来展开，我更倾向于使用格子模型。一个 Html 文件就是一个页面，一个页面就是一张白纸，写 Html 就是在白纸上面画格子，就像这个样子：

大格子里有小格子，小格子里再有其它格子，...。

看一个具体的例子：

<html>
  <body>
    <div>
      <input></input>
    </div>
  </body>
</html>

这段代码实现的效果很简单，就是一个输入框：

我们可以这么理解：

有些格子是用来嵌套其它格子的，有些格子是用来表示具体组件（输入框、下拉菜单、按钮）的。这些格子之间的关系：

Css 是用来控制格子样式的，也就是格子长什么样子：

JavaScript 是用来动态新增、删除或者移动格子的，也可以动态更新格子的形状和内容（数据）。

动态是通过事件实现的，比如：点击某个格子就会产生这个格子的点击事件；每一个事件会对应一个事件处理器（函数），我们可以在处理器里面控制整个页面的所有格子。