读书：前端开发核心知识进阶

黄鑫元
215 阅读4分钟

最近读了一本书《前端开发核心知识进阶》，这篇文章用来记录一下学习收货内容。

JS基础

this相关

  1. 使用new方法调用构造函数时，构造函数内的this会被绑定到新创建的对象上。
  2. 通过call/apply/bind方法显式调用函数时，函数体内的this会被绑定到指定参数对象上。

call/apply是直接进行相关函数调用的，bind不会执行相关函数，而是会返回一个新的函数，这个新的函数已经自动绑定了新的this指向，开发者可以手动调用它。

  1. 通过上下文调用函数时，函数体内的this会被绑定到该对象上。
const foo = {
    bar: 10,
    fn: function() {
        console.log(this)
        console.log(this.bar)
    }
}
foo.fn()

// {bar: 10, fn: f}
// 10
  1. 箭头函数中，this指向是由外层函数作用域决定。
const foo = {
    bar: 10,
    fn: () => {
        console.log(this)
        console.log(this.bar)
    }
}
foo.fn()

// Window {...}
// undefined

因为此时外层函数的作用域是整体的window，故而箭头函数作用域为全局，受外层调用位置影响。

综上，如果不涉及this指向，那么是否写箭头函数随意，如果涉及到this，为了保证定义位置即使调用位置，最好不要用箭头函数

HTML和CSS

BFC(Block Formatting Context)

可以翻译成块级格式化上下文。是一种特殊的布局区域。

BFC特点

  • BFC区域不会与浮动元素重叠，而是会依次排列。
  • 浮动元素的高度也会参与BFC高度计算。

如何形成BFC

  • 内联块（display: inline-block）
  • 具有overflow且值不是visible的块元素
  • display: flow-root元素
  • column-span: all元素

举例1：清除浮动影响

<body>
  <div class="left"></div>
  <div class="right"></div>
</body>

body {
  width: 600px;
  positive: relative;
}

.left {
  width: 80px;
  height: 150px;
  float: left;
  background: blue;
}

.right {
  height: 200px;
  background: red;
}

image.png

得到的是类似这样的有浮动的渲染效果，如果想要红色和蓝色紧挨着排列，可以对right操作使其成为BFC

.right {
  height: 200px;
  background: red;
  overflow: hidden;
}

image.png

举例2：高度塌陷

<div class="root">
  <div class="child child1"></div>
  <div class="child child2"></div>
</div>

.root {
  border: 5px solid blue;
  width: 300px;
}

.child {
  border: 5px solid red;
  width: 100px;
  height: 100px;
  float: left;
}

此时，因为child是float，无法撑起root。

image.png

可以对root操作，使其成为BFC，从而被float撑起。

.root {
  border: 5px solid blue;
  width: 300px;
  overflow: hidden;
}

image.png

举例3：边距折叠

<div class="root">
  <p>paragraph 1</p>
  <p>paragraph 2</p>
</div>

p {
  color: blue;
  background: red;
  width: 400px;
  line-height: 100px;
  text-align: center;
  margin: 40px;
}

此时中间的margin发生了重叠

image.png

如果想要避免重叠，需要加一个隔断，增加BFC即可增加隔断，去除重叠。

<div class="root">
  <p>paragraph 1</p>
  <div class="wrapper"></div>
  <p>paragraph 2</p>
</div>

p {
  color: blue;
  background: red;
  width: 400px;
  line-height: 100px;
  text-align: center;
  margin: 40px;
}

.wrapper {
  overflow: hidden;
}

元素居中

目前有如下样式，实现里面元素的内容居中。

<div class="root">
  <div class="box fixed-size">text</div>
</div>

.root {
  border: 1px solid red;
  width: 300px;
  height: 300px;
}

.box {
  background: green;
}

.box .fixed-size {
  width: 100px;
  height: 100px;
}

image.png

方式1：absolute+transform

top和left的50%是指相对定位元素高度和宽度的50%，transform的50%是指自身元素高度和宽度的50%

.root {
  border: 1px solid red;
  width: 300px;
  height: 300px;
  position: relative;
}

.box {
  background: green;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.box .fixed-size {
  width: 100px;
  height: 100px;
}

image.png

方式2：line-height

首先用line-height替代height这样就可以接下来使用vertical-align，root里使用font-size是0，用于实现对齐，所以需要在box上重新声明一下font-size，另外line-height为initial也是取消继承之前的line-height高度。

display: inline-block将块级元素变成行内元素，可以理解为一行中某段内容，要想让该行内容居中，需要设置父级元素text-align: center，可以理解为该行文字居中，因为是inline-block，自然水平居中了。

总的来说这种实现思路就是让一行中的内容居中，所不同的是，该行用line-height撑起来，比较高而已。

.root {
  border: 1px solid red;
  line-height: 300px;
  width: 300px;
  text-align: center;
  font-size: 0px;
}

.box {
  font-size: 16px;
  background: green;
  display: inline-block;
  
  vertical-align: middle;
  line-height: initial;
  text-align:left;
}

.box .fixed-size {
  width: 100px;
  height: 100px;
}

HTML新标签

progress进度条，meter度量衡

<a href="sms: 110">打电话</a>调起打电话功能

CSS响应式中的%

  • position: relative : 相对自身，left相对自身width, top相对自身height
  • position: relative : 相对视口
  • margin和padding：相对视口
  • font-size：相对父元素
  • line-height: 相对font-size

React新特性

React.suspense和React.lazy配合实现懒加载和按需加载，比如那个loading转圈圈的东西，可以不再用setState来做判断，而是用更优雅的方式。

// 该组件是动态加载的
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    // 显示 <Spinner> 组件直至 OtherComponent 加载完成
    <React.Suspense fallback={<Spinner />}>
      <div>
        <OtherComponent />
      </div>
    </React.Suspense>
  );
}
avatar
文章
阅读
粉丝