以四条链串一串前端的那些事儿2
2020-06-22 本文已影响0人
cemcoe
一个简单的html文件如下。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>demo</li>
<li>demo</li>
<li>demo</li>
</ul>
</body>
</html>
它的DOM模型可以是这样色儿的：
仅代表文档结构
在写 html 时你会发现，一层套一层，html 中有 head 和 body，body 里有 ul，ul里有三个li。他们是有层级关系的。
不妨将各个标签看成一个组件，其实也就找到了组件模型，如果将各标签换成函数，其实也是作用域链的模型，将其换成对象，那么原型链其实也就出来了。
这种结构更像是一个洋葱的结构。
万物基于洋葱
这几种链要做的事情其实就是如何找到特定的那一片洋葱并对其进行操作即DOM，各瓣洋葱间如何进行空气的交换即作用域链，如何用一瓣洋葱搞出整个洋葱即原型链，如何将做好的洋葱瓣拼成一个完整的洋葱即组件化。
不妨将这四个链称为“洋葱组合”。类比虽然形象，但两者一定会有不同，仅供理解。
这时我们的逻辑图长这样：
四条链.png
好嘞，扯回DOM。有了DOM后，我们或者说是我，对其的操作是使用CSS选择器并添加样式，比如下面的样子。
ul li span {
background-color: #f40;
}
DOM 给出了文档模型配合 CSS 和 JavaScript 可以对网页做一些操作。
既然谈到了 CSS，那就不得不提 CSS 选择器和继承，说到继承，想到面向对象，对象，想到 ES6 中的 class 关键字和 JavaScript 中的面向对象是基于原型链的。
此时我的图长这样：
让我们聚焦到CSS上，CSS是网页的化妆师，重点在如何使用CSS进行网页的布局，而在这其中的重点在于如何进行垂直和水平的居中。
CSS 中的点在于布局方案，盒模型，响应式布局等，目前在移动端主要使用定位和flex布局进行。在响应式布局上，做企业静态官网可能会使用到媒体查询，但大部分场景会使用到rem的布局方法进行。
这时我们的导图长这样：
四条链.png
