恐惧就是这样，你直视它、向前一步的时候它就消失了，选择相信自己能克服一切困难，勇敢向前，直面恐惧，就会发现之前的害怕，变成了心里的能量。

大家好，我是柒八九。

今天，我们继续2023前端面试真题系列。我们来谈谈关于CSS的相关知识点。

如果，想了解该系列的文章，可以参考我们已经发布的文章。如下是往期文章。

文章list

1. 2023前端面试真题之JS篇

你能所学到的知识点

1. 盒模型 推荐阅读指数⭐️⭐️⭐️⭐️

2. CSS的display属性有哪些值 推荐阅读指数⭐️⭐️⭐️⭐️

3. position 里面的属性有哪些 推荐阅读指数⭐️⭐️⭐️⭐️

4. flex里面的属性 推荐阅读指数⭐️⭐️⭐️⭐️⭐️

5. flex布局的应用场景 推荐阅读指数⭐️⭐️⭐️⭐️

6. CSS的长度单位有哪些 推荐阅读指数⭐️⭐️⭐️⭐️

7. 水平垂直居中 推荐阅读指数⭐️⭐️⭐️⭐️⭐️

8. {块级格式化上下文|Block Formatting Context} 推荐阅读指数⭐️⭐️⭐️⭐️⭐️

9. 层叠规则 推荐阅读指数⭐️⭐️⭐️⭐️⭐️

10. 重绘和重排 推荐阅读指数⭐️⭐️⭐️⭐️⭐️

11. CSS引入方式(4种) 推荐阅读指数⭐️⭐️⭐️⭐️

12. 硬件加速 推荐阅读指数⭐️⭐️⭐️⭐️⭐️

13. 元素超出宽度...处理 推荐阅读指数⭐️⭐️⭐️⭐️⭐️

14. 元素隐藏 推荐阅读指数⭐️⭐️⭐️⭐️⭐️

15. Chrome支持小于12px 的文字 推荐阅读指数⭐️⭐️⭐️⭐️

好了，天不早了，干点正事哇。

盒模型

一个盒子由四个部分组成：content、padding、border、margin

1. content

   ，即

   实际内容

   ，显示文本和图像

   • content 属性大都是用在::before/::after这两个伪元素中

2. padding

   ，即内边距，内容周围的区域

   • 内边距是透明的

   • 取值不能为负

   • 受盒子的background属性影响

   • padding 百分比值无论是水平还是垂直方向均是相对于宽度计算

3. boreder，即边框，围绕元素内容的内边距的一条或多条线，由粗细、样式、颜色三部分组成

4. margin，即外边距，在元素外创建额外的空白，空白通常指不能放其他元素的区域

标准盒模型

• 盒子总宽度 = width + padding + border + margin;

• 盒子总高度 = height + padding + border + margin

也就是，width/height 只是内容宽高，不包含 padding 和 border 值

IE 怪异盒子模型

• 盒子总宽度 = width + margin;

• 盒子总高度 = height + margin;

也就是，width/height 包含了 padding 和 border 值

更改盒模型

CSS 中的 box-sizing 属性定义了渲染引擎应该如何计算一个元素的总宽度和总高度

box-sizing: content-box|border-box
复制代码

1. content-box (默认值)，元素的 width/height 不包含padding，border，与标准盒子模型表现一致

2. border-box 元素的 width/height 包含 padding，border，与怪异盒子模型表现一致

CSS的display属性有哪些值

CSS display 属性设置元素是否被视为块或者内联元素以及用于子元素的布局，例如流式布局、网格布局或弹性布局。

形式上，display 属性设置元素的内部和外部的显示类型。

1. 外部类型设置元素参与流式布局；

2. 内部类型设置子元素的布局（子元素的格式化上下文）

常见属性值（8个）

1. inline :默认

2. block

3. inline-block

4. flex

5. grid

6. table

7. list-item

8. 双值的：只有Firefox70支持了这一语法

position 里面的属性有哪些

定义和用法：position 属性规定元素的定位类型。
说明：这个属性定义建立元素布局所用的 定位机制 。

• 任何元素都可以定位

• 绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。

• 相对定位元素会相对于它在正常流中的默认位置偏移。

position 有以下可选值：（6个）

CSS 有三种基本的定位机制：普通流、浮动和绝对定位。

flex里面的属性

容器的属性 （6个）

1. flex-direction

   • 决定主轴的方向（即项目的排列方向）

   • row（默认值）：主轴为水平方向，起点在左端。

   • row-reverse：主轴为水平方向，起点在右端。

   • column：主轴为垂直方向，起点在上沿。

   • column-reverse：主轴为垂直方向，起点在下沿。

2. flex-wrap

   • flex-wrap属性定义，如果一条轴线排不下，如何换行

   • nowrap:(默认）：不换行。

   • wrap:换行，第一行在上方。

   • wrap-reverse:换行，第一行在下方

3. flex-flow

   • flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

4. justify-content

   • justify-content属性定义了项目在主轴上的对齐方式。

   • flex-start（默认值）：左对齐

   • flex-end：右对齐

   • center： 居中

   • space-between：两端对齐，项目之间的间隔都相等。

   • space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

5. align-items

   • align-items属性定义项目在交叉轴上如何对齐。

   • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

   • flex-start：交叉轴的起点对齐。

   • flex-end：交叉轴的终点对齐。

   • center：交叉轴的中点对齐。

   • baseline: 项目的第一行文字的基线对齐。

6. align-content

   • align-content属性定义了多根轴线的对齐方式。

   • 如果项目只有一根轴线，该属性不起作用。

项目的属性（6个）

1. order

   • order属性定义项目的排列顺序。

   • 数值越小，排列越靠前，默认为0。

2. flex-grow

   • flex-grow属性定义项目的放大比例

   • 默认为0，即如果存在剩余空间，也不放大

   • 如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）

3. flex-shrink

   • flex-shrink属性定义了项目的缩小比例，

   • 默认为1，即如果空间不足，该项目将缩小。

   • 如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小

4. flex-basis

   • flex-basis属性定义了在分配多余空间之前，项目占据的{主轴空间|main size}。

   • 浏览器根据这个属性，计算主轴是否有多余空间。

   • 它的默认值为auto，即项目的本来大小。

5. flex

   • flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

   • flex: 1 = flex: 1 1 0%

   • flex: auto = flex: 1 1 auto

6. align-self

flex:1 vs flex:auto

flex:1 和 flex:auto 的区别，可以归结于flex-basis:0和flex-basis:auto的区别

当设置为0时（绝对弹性元素），此时相当于告诉flex-grow和flex-shrink在伸缩的时候不需要考虑我的尺寸

当设置为auto时（相对弹性元素），此时则需要在伸缩时将元素尺寸纳入考虑

flex布局的应用场景

1. 网格布局

   • Grid- display:flex

   • Grid-Cell - flex: 1; flex:1使得各个子元素可以等比伸缩,flex: 1 = flex: 1 1 0%

2. 百分比布局

   • 

   • col2 - flex: 0 0 50%;

   • col3 - flex: 0 0 33.3%;

   • 

3. 圣杯布局

   • 页面从上到下，分成三个部分：头部（header），躯干（body），尾部（footer）。其中躯干又水平分成三栏，从左到右为：导航、主栏、副栏

   • 

   • container - display: flex; - flex-direction: column;- min-height: 100vh;

   • header/footer - flex: 0 0 100px;

   • body - display: flex; - flex:1

   • content - flex: 1;

   • ads/av - flex: 0 0 100px;

   • nav - order: -1;

   • 

4. 侧边固定宽度

   • 侧边固定宽度，右边自适应

   • 

   • aside1 - flex: 0 0 20%;

   • body1 - flex:1

5. 流式布局

   • 每行的项目数固定，会自动分行

   • 

   • container2 - display: flex; - flex-flow: row wrap;

   • 

CSS的长度单位有哪些

1. 相对长度

   • 相对长度单位指的是这个单位没有一个固定的值，它的值受到其它元素属性（例如浏览器窗口的大小、父级元素的大小）的影响，在响应式布局方面相对长度单位非常适用

   • 

2. 绝对长度

   • 绝对长度单位表示一个真实的物理尺寸，它的大小是固定的，不会因为其它元素尺寸的变化而变化

   • 

水平垂直居中

1. 宽&高固定

   1. absolute + 负 margin

   2. absolute + margin auto

   3. absolute + calc

2. 宽&高不固定

   1. absolute + transform: translate(-50%, -50%);

   2. flex布局

   3. grid 布局

宽&高固定

absolute + 负 margin

.parent {

+  position: relative;

}



.child {

  width: 300px;

  height: 100px;

  padding: 20px;



+  position: absolute;

+  top: 50%;

+  left: 50%;

+  margin: -70px 0 0 -170px;

}



复制代码

• 初始位置为方块1的位置

• 当设置left、top为50%的时候，内部子元素为方块2的位置

• 设置margin为负数时，使内部子元素到方块3的位置，即中间位置

absolute + margin auto

absolute + calc

宽&高不固定

absolute + transform: translate(-50%, -50%);

.parent {

  position: relative;

}

.child {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

}

复制代码

flex布局

.parent {

  display: flex;

  justify-content: center;

  align-items: center;

}

复制代码

grid布局

.parent {

  display:grid;

}

.parent .child{

  margin:auto;

}

复制代码

{块级格式化上下文|Block Formatting Context}

{块级格式化上下文|Block Formatting Context}(BFC)，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则：(6个)

1. 内部的盒子会在垂直方向一个接一个的放置

2. 对于同一个BFC的俩个相邻的盒子的margin会发生重叠，与方向无关。

3. 每个元素的左外边距与包含块的左边界相接触（页面布局方向从左到右），即使浮动元素也是如此

4. BFC的区域不会与float的元素区域重叠

5. 计算BFC的高度时，浮动子元素也参与计算

6. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然

触发条件 （5个）RFODP

1. 根元素，即HTML元素

2. 浮动元素：float值为left、right

3. overflow值不为 visible，为 auto、scroll、hidden

4. display的值为inline-block、table、inline-table、flex、inline-flex、grid、inline-grid

5. position 的值为absolute或fixed

应用场景

1. 防止

   margin

   重叠

   • 将位于同一个BFC的元素，分割到不同的BFC中

2. 高度塌陷

   • 计算BFC的高度时，浮动子元素也参与计算

   • 子元素浮动

   • 父元素 overflow: hidden;构建BFC

3. 多栏自适应

   • BFC的区域不会与float的元素区域重叠

   • aside -float:left

   • main -margin-left:aside-width -overflow: hidden构建BFC

层叠规则

所谓层叠规则，指的是当网页中的元素发生层叠时的表现规则。

z-index:z-index属性只有和定位元素(position不为static的元素)在一起的时候才有作用。

CSS3中，z-index已经并非只对定位元素有效，flex盒子的子元素也可以设置z-index属性。

层叠上下文的特性

• 层叠上下文的层叠水平要比普通元素高

• 层叠上下文可以阻断元素的混合模式

• 层叠上下文可以嵌套，内部层叠上下文及其所有元素均受制于外部的层叠上下文

• 每个层叠上下文和兄弟元素独立

  • 当进行层叠变化或渲染的时候，只需要考虑后代元素

• 每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中

层叠上下文的创建（3类）

由一些CSS属性创建

1. 天生派

   • 页面根元素天生具有层叠上下文

   • 根层叠上下文

2. 正统派

   • z-index值为数值的定位元素的传统层叠上下文

3. 扩招派

   • 其他CSS3属性

根层叠上下文

指的是页面根元素,页面中所有的元素一定处于至少一个层叠结界中

定位元素与传统层叠上下文

对于position值为relative/absolute的定位元素,当z-index值不是auto的时候，会创建层叠上下文。

CSS3属性（8个）FOTMFIWS

1. 元素为flex布局元素(父元素display:flex|inline-flex),同时z-index值不是auto - flex布局

2. 元素的opactity值不是1 - {透明度|opactity}

3. 元素的transform值不是none - {转换|transform}

4. 元素mix-blend-mode值不是normal - {混合模式|mix-blend-mode}

5. 元素的filter值不是none - {滤镜|filter}

6. 元素的isolation值是isolate - {隔离|isolation}

7. 元素的will-change属性值为上面②~⑥的任意一个（如will-change:opacity）

8. 元素的-webkit-overflow-scrolling设为touch

重绘和重排

页面渲染的流程， 简单来说，初次渲染时会经过以下6步：

1. 构建DOM树；

2. 样式计算；

3. 布局定位；

4. 图层分层；

5. 图层绘制；

6. 合成显示；

在CSS属性改变时，重渲染会分为回流、重绘和直接合成三种情况，分别对应从布局定位/图层绘制/合成显示开始，再走一遍上面的流程。

元素的CSS具体发生什么改变，则决定属于上面哪种情况：

• 回流（又叫重排）：元素位置、大小发生变化导致其他节点联动，需要重新计算布局；

• 重绘：修改了一些不影响布局的属性，比如颜色；

• 直接合成：合成层的transform、opacity修改，只需要将多个图层再次合并，而后生成位图，最终展示到屏幕上；

触发时机

回流触发时机

回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流。

• 添加或删除可见的DOM元素

• 元素的位置发生变化

• 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）

• 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代

• 页面一开始渲染的时候（这避免不了）

• 浏览器的窗口尺寸变化（因为回流是根据视口的大小来计算元素的位置和大小的）

• 获取一些特定属性的值

  • offsetTop、offsetLeft、 offsetWidth、offsetHeight

  • scrollTop、scrollLeft、scrollWidth、scrollHeight

  • clientTop、clientLeft、clientWidth、clientHeight

  • 这些属性有一个共性，就是需要通过即时计算得到。因此浏览器为了获取这些值，也会进行回流。

重绘触发时机

触发回流一定会触发重绘

除此之外还有一些其他引起重绘行为：

• 颜色的修改

• 文本方向的修改

• 阴影的修改

浏览器优化机制

由于每次重排都会造成额外的计算消耗，因此大多数浏览器都会通过队列存储重排操作并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列。

当你获取布局信息的操作的时候，会强制队列刷新，例如offsetTop等方法都会返回最新的数据。

因此浏览器不得不清空队列，触发回流重绘来返回正确的值

减少回流

1. 对于那些复杂的动画，对其设置 position: fixed/absolute，尽可能地使元素脱离文档流，从而减少对其他元素的影响

2. 使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘

3. 在使用 JavaScript 动态插入多个节点时, 可以使用DocumentFragment.创建后一次插入.

4. 通过设置元素属性display: none，将其从页面上去掉，然后再进行后续操作，这些后续操作也不会触发回流与重绘，这个过程称为离线操作

CSS引入方式(4种)

1. 内联方式

   • <div style="background: red"></div>

2. 嵌入方式

   • 在 HTML 头部中的 <style> 标签下书写 CSS 代码

3. 链接方式

   • 使用 HTML 头部的 <head> 标签引入外部的 CSS 文件。

   • <link rel="stylesheet" type="text/css" href="style.css">

4. 导入方式

   • 使用 CSS 规则引入外部 CSS 文件

比较链接方式和导入方式

链接方式（用 link ）和导入方式（用 @import）都是引入外部的 CSS 文件的方式

• link 属于 HTML，通过 <link> 标签中的 href 属性来引入外部文件，而 @import 属于 CSS，所以导入语句应写在 CSS 中，要注意的是导入语句应写在样式表的开头，否则无法正确导入外部文件；

• @import 是 CSS2.1 才出现的概念，所以如果浏览器版本较低，无法正确导入外部样式文件；

当 HTML 文件被加载时，link 引用的文件会同时被加载，而 @import 引用的文件则会等页面全部下载完毕再被加载；

硬件加速

浏览器中的层分为两种：渲染层和合成层。

渲染层

渲染层的概念跟层叠上下文密切相关。简单来说，拥有z-index属性的定位元素会生成一个层叠上下文，一个生成层叠上下文的元素就生成了一个渲染层。

层叠上下文的创建（3类）

由一些CSS属性创建

1. 天生派

   • 页面根元素天生具有层叠上下文

   • 根层叠上下文

2. 正统派

   • z-index值为数值的定位元素的传统层叠上下文

3. 扩招派 (CSS3属性)

   1. 元素为flex布局元素(父元素display:flex|inline-flex),同时z-index值不是auto - flex布局

   2. 元素的opactity值不是1 - {透明度|opactity}

   3. 元素的transform值不是none - {转换|transform}

   4. 元素mix-blend-mode值不是normal - {混合模式|mix-blend-mode}

   5. 元素的filter值不是none - {滤镜|filter}

   6. 元素的isolation值是isolate - {隔离|isolation}

   7. 元素的will-change属性值为上面②~⑥的任意一个（如will-change:opacity）

   8. 元素的-webkit-overflow-scrolling设为touch

合成层

只有一些特殊的渲染层才会被提升为合成层，通常来说有这些情况：

1. transform:3D变换：translate3d，translateZ；

2. will-change:opacity | transform | filter

3. 对 opacity | transform | fliter 应用了过渡和动画（transition/animation）

4. video、canvas、iframe

硬件加速

浏览器为什么要分层呢？答案是硬件加速。就是给HTML元素加上某些CSS属性，比如3D变换，将其提升成一个合成层，独立渲染。

之所以叫硬件加速，就是因为合成层会交给GPU（显卡）去处理，在硬件层面上开外挂，比在主线程（CPU）上效率更高。

利用硬件加速，可以把需要重排/重绘的元素单独拎出来，减少绘制的面积。

避免重排/重绘，直接进行合成，合成层的transform 和 opacity的修改都是直接进入合成阶段的；

• 可以使用transform:translate代替left/top修改元素的位置；

• 使用transform:scale代替宽度、高度的修改；

元素超出宽度...处理

单行 (AKA: TWO)

1. text-overflow:ellipsis：当文本溢出时，显示省略符号来代表被修剪的文本

2. white-space:nowrap:设置文本不换行

3. overflow:hidden：当子元素内容超过容器宽度高度限制的时候，裁剪的边界是border box的内边缘

p{

    text-overflow: ellipsis;

    white-space: nowrap;

    overflow: hidden;

    width:400px;

  }

复制代码

多行

1. 基于高度截断（伪元素 + 定位）

2. 基于行数截断（）

基于高度截断

关键点 height + line-height + ::after + 子绝父相

核心的css代码结构如下：

.text {

    position: relative;

    line-height: 20px;

    height: 40px;

    overflow: hidden;

  }

.text::after {

    content: "...";

    position: absolute;

    bottom: 0;

    right: 0;

    padding: 0 20px 0 10px;

}

复制代码

基于行数截断

关键点：box + line-clamp + box-orient + overflow

1. display: -webkit-box：将对象作为弹性伸缩盒子模型显示

2. -webkit-line-clamp: n：和①结合使用，用来限制在一个块元素显示的文本的行数(n)

3. -webkit-box-orient: vertical：和①结合使用 ，设置或检索伸缩盒对象的子元素的排列方式

4. overflow: hidden

p {

  width: 300px;

  display: -webkit-box;

   -webkit-line-clamp: 3;

  -webkit-box-orient: vertical;

  overflow: hidden;

}

复制代码

元素隐藏

可按照隐藏元素是否占据空间分为两大类(6 + 3)

1. 元素不可见，不占空间

   (

   3absolute

   +

   1relative

   +

   1script

   +

   1display

   )

   1. <script>

   2. display:none

   3. absolute + visibility:hidden

   4. absolute + clip:rect(0,0,0,0)

   5. absolute + opacity:0

   6. relative+left负值

2. 元素不可见，占据空间

   (3个)

   1. visibility:hidden

   2. relative + z-index负值

   3. opacity:0

元素不可见，不占空间

<script>

<script type="text/html">

  <img src="1.jpg">

</script>

复制代码

display:none

其他特点：辅助设备无法访问，资源加载，DOM可访问

对一个元素而言，如果display计算值是none，则该元素以及所有后代元素都隐藏

.hidden {

   display:none;

}

复制代码

absolute + visibility

.hidden{

  position:absolute;

  visibility:hidden;

}

复制代码

absolute + clip

.hidden{

 position:absolute;

 clip:rect(0,0,0,0);

}

复制代码

absolute + opacity

.hidden{

 position:absolute;

 opacity:0;

}

复制代码

relative+负值

.hidden{

 position:relative;

 left:-999em;

}

复制代码

元素不可见，占据空间

visibility:hidden

visibility 的继承性

• 父元素设置visibility:hidden，子元素也看不见

• 但是，如果子元素设置了visibility:visible，则子元素又会显示出来

.hidden{

 visibility:hidden;

}

复制代码

relative + z-index

.hidden{

 position:relative;

 z-index:-1;

}

复制代码

opacity:0

.hidden{

 opacity:0;

 filter:Alpha(opacity=0)

}

复制代码

总结

最常用的还是display:none和visibility:hidden，其他的方式只能认为是奇招，它们的真正用途并不是用于隐藏元素，所以并不推荐使用它们。

关于display: none、visibility: hidden、opacity: 0的区别，如下表所示：

Chrome支持小于12px 的文字

Chrome 中文版浏览器会默认设定页面的最小字号是12px，英文版没有限制

原由 Chrome 团队认为汉字小于12px就会增加识别难度

• 中文版浏览器 与网页语言无关，取决于用户在Chrome的设置里（chrome://settings/languages）把哪种语言设置为默认显示语言

• 系统级最小字号 浏览器默认设定页面的最小字号，用户可以前往 chrome://settings/fonts 根据需求更改

解决方案（3种）

1. zoom

2. transform:scale()

3. -webkit-text-size-adjust:none

zoom

zoom 可以改变页面上元素的尺寸，属于真实尺寸。

其支持的值类型有：

• zoom:50%，表示缩小到原来的一半

• zoom:0.5，表示缩小到原来的一半

.span10{

        font-size: 12px;

        display: inline-block;

        zoom: 0.8;

    }

复制代码

transform:scale()

用transform:scale()这个属性进行放缩

使用scale属性只对可以定义宽高的元素生效，所以，需要将指定元素转为行内块元素

.span10{
        font-size: 12px;
        display: inline-block;
        transform:scale(0.8);
    }
复制代码

text-size-adjust

该属性用来设定文字大小是否根据设备(浏览器)来自动调整显示大小

属性值：

• auto：默认，字体大小会根据设备/浏览器来自动调整；

• percentage：字体显示的大小

• none:字体大小不会自动调整

存在兼容性问题，chrome受版本限制，safari可以。

后记

分享是一种态度。

全文完，既然看到这里了，如果觉得不错，随手点个赞和“在看”吧。

作者：前端小魔女
来源：https://juejin.cn/post/7203153899246780453

IM 的聊天框架是否可以，作为组件，集成到UE工程中？这个方向，我们可以做出哪些努力？

你好

我是小李，今年还不到23周岁，是一个工作不到4年的前端程序员。

你可能好奇为什么一个23岁的人能有3年多的经验，这也是面试时很多HR问我的问题。

其实答案很简单，我17岁的时候就开始上班了。

讲讲我的故事：

我从前是一个不爱学习的坏学生，迷恋游 戏导致从老师口中的优等生变成一个没考上高中的学渣。知道中考结果的时候对我震惊很大，但也在意料之中。该怎么办，去电子厂打工，还是去上职校？

最终选择还是去了济南某3+2大专，因为非常喜欢玩游戏，所以选择了计算机专业。但我选的班级又跟普通3+2大专有所不同，因为他是跟北大某鸟联合创办的就业班。在学校学了很多东西，Java，C#,前端，数据库，设计都有，毕竟外面的培 训机构一般是学三个月，我们学了两年。但当时也是年纪尚小，也没学会多少东西就面临着第一次实习。（我们3+2是上两年学实习一年再上两年）

进入社会开始工作：

第一次步入社会找工作的时光也挺怀念，同学们三五结伴出去，穿着西装打好领带出去面试。没错穿西装，学校强制要求的，一群17 18岁的小孩穿西装去面试。那时候有很多培训机构给以招人的名义让你去面试，然后忽悠要培训，我们回来就把不靠谱的公司写黑板上，当时写了一黑板的公司名称。

后来侥幸让一家算上老板行政共三个人的公司录取，写VB.NET（现在后端技术已经忘干净了）。但干了一周就跑了，一个人当八个人干，天天加班。

然后就开始面试，顺利的被某内的人事忽悠学了设计，学习三个月，两万块钱。因为老师一直催要实习证明，自己比较着急，某内当时以UI设计师的岗位邀我去面试，后来说技术不行，但给你一个内部培训的机会，那个人事给我说了很多，弄得我当时脑子一片空白，糊里糊涂就签了培训合同，后来想明白已经为时已晚。

其实我当时在某内学的还算不错，因为在前两年的课程中学过一些PS的东西，当时想要不以后就转行做设计师吧，就放弃了后两年大专的课程，去考了个成考大专。找工作的时候还算顺利，被一家医疗器械公司录取，做起了平面设计。

在这家医疗器械公司认识了很多朋友，并且现在还有几个一直保持联系，体会到了挣钱的不容易。一次公司要做一个简单的企业宣传网站，知道我是学软件开发的，就安排给了我。当时设计工作很闲，这个网站不需要后端，前端死页面贴几张图那种。这个网站做了三个周左右吧，当时技术菜，并且前端课程中占比很少，就边做边查资料，搞定自适应，调浏览器的兼容性。在做的过程中，突然有了不甘的心理，学了两年的软件就此转行真的不甘心，每天上下班近三个小时的车程就在看前端教学视频（当时看的是渡一教育，那个老师讲的很好）。

随后工作了一段时间就提了离职，离职原因：我要做软件开发，我要当程序员。

离职后找了几家工作，有一家正好招前端和设计的，看我两个都会，把我招了去面试。很巧面试官了解我的学历情况他说他也是北大某鸟的，也是我这种3+2，不过是济南另一个校区的。技术没怎么问，就问我会不会，会不会的我都回答了会，然后济南项目部的老大就问我能不能接受出差，去上海总部，我说能，第一天面试入职第二天早上六点就坐上了去上海的火车（那时我还没18岁）。

坐了12个多小时的火车腰酸背痛，虽然是硬卧但也不舒服。出了车站第一次去大城市，看着外面的灯红酒绿，感叹着十里洋场烟花地的美丽。后来上海的同事说要在站内坐地铁去，就去售票机买了地铁票，坐了人生中的第一次地铁。

出了地铁按着导航到了五角场，晚上的五角场真好看。跟着导航进入了五角场的一个商场，不争气的手机进去就没信号了，说实话当时真的慌，偌大个商场找不到出口在哪，东西南北也分不清，拎着个行李箱满地跑。后来上海的同事来接的我，才安全到公司。

到了公司没有想象的这么好，公司主要做硬件的，各种设备各种工具堆得满办公室都是，每个人就一个小隔间作为办公桌。公司领导看我没吃饭给我订了盒饭，大概到了11点跟着加班的同事回了宿舍。宿舍的环境也是相当的差，马桶是坏的，要自己用舀水冲，幸好住的地方离五角场近，没事可以去那里玩玩。

就这样过了两周吧，老板突然说要拉我去现场，他开车带着我们走了好久，打开地图看居然都出了上海，到了江苏。目的地是江苏的一个汽车组装厂，公司做的物联网系统要放在一辆概念车的展车上，为近期的虹桥车展做准备。组装厂是封闭的，24小时开着灯，不看手机不知道外面是白天还是黑天。每天都有饭送到跟前，睡醒了吃，吃完了干活，累了就睡觉那种。

终于熬到了车展，第一次逛了虹桥会展中心，真的很大，看到很多很帅的车。车展后待了没几天就提了离职，这种睡醒上班，累了就睡的工作太折磨人了。其实一直是想去外滩看看的，但到离职也没去成。

离职后就回了家，在家玩了一段时间又回到了济南，找了一个外包公司的工作。这家外包公司主要用的技术是uniapp框架，员工近百人，入职要求很低，只要是一周内能用uniapp框架做项目就行。我之前看过vue的视频，学起来uniapp也很容易，成功入职。

这里的门槛低，接的项目多，做成的却没几个，平均一个月一个App项目，隔三岔五就有找上门的甲方。最终以公司发不下来工资结束了这份工作。

这时候到了2019年12月份也是武汉疫情爆发的时候，因为是农村，可以出门但不能出村，整天和发小一起打王者，放了个小长假。

年后三月份，看着疫情没有那么严重了，就签了离乡保证书（就是出了当地无论目的地有没有住处能不能找到工作你都不能回来），回了济南。

因为会了uniapp这项技能入职了一家做养老项目的公司。开始后端就两个，前端没有，是一个实施在弄前端，他也会，但会的不多。公司不大，到最后也才不到十个人，前端基本上是我自己在弄，或者我写一个简单的页面让几个实施去改成类似的页面。就这样过了一年，感觉项目没有前景，并且公司一年涨薪50元人民币感觉太少了就离职再次去了上海。

为什么选择上海，对比北京这里住房比较方便，北京住四环五环工作地点却在二环每天要挤地铁太麻烦，对比广东深圳那两个又太远了。

到了上海，第一目的地是北蔡。在家的时候联系了一个租房中介，想在浦东找一份工作。跟着中介到了小区，算是个老破小吧，房子很旧，小区门口的垃圾堆了很多。到了屋子里床垫里面的弹簧都出来了，窗子的玻璃坏了一半，另一半是塑料布糊上去了，风一刮哗哗的响。那也没办法，1900多的房租押一付一还要给中介一千多的中介费，也可能被坑了，但就这样吧，一个外地人到一个城市现找工作只能这样。出门去超市买了床被子还不是棉的，自己带的夏凉被当褥子垫身子底下。三月份的上海到了晚上比北方好不了多少，床垫的弹簧硌的腰疼，冷风通过墙上空调管道开的洞传到屋子里，被子上盖着羽绒服也不顶用，第二天睡醒浑身疼。后来的几天都是穿着一份睡，但也好不了太多。

紧接着就是找工作，不得不说大城市工作机会就是多，但外包外派也多，前两周只考虑浦东和黄浦的工作，面了好多，要么是技术不行被拒要么工资给的低，有几个拿学历低压低工资，但我都没去。到了第三周有点着急，因为就准备找一个月的工作，找不到就回山东，所以把面试范围扩大到了整个上海，只要是不太偏远都行。第二天下午去杨浦面了一家互联网公司，面的时候很不顺利，面技术的时候面了两个多小时。那天就早晨吃了一块面包，面到一半又饿又渴，头晕眼花的。当时我的vue技术也不算是很好，之前主要做uniapp项目了，面完认为自己会凉，可能公司缺人吧，说来试岗一周，可以的话就留下。当时自己感觉这里的办公环境还不错，旁边就是复旦大学，就同意了。

试岗开始是熟悉项目，后来上手做一些东西，前端老大就是面试我的小哥。不懂的他也教我，开始跟他关系不是很好，可能他教我的时候太凶了，我没事就不理他。试岗还算顺利，不是什么很难的东西，但签正式合同的时候我就傻眼了，为什么是一份外派合同，就是说是外派到这个公司的，我问他周围的同事，他们也是这样，我之前是一直抵制进外派的，面试的时候也没跟我说，没办法，在这里待了一周了，每天工作很轻松，外派就外派吧。

每天工作进行着，就是浦东到杨浦通勤时间太久了，就不要租房押金到杨浦复旦大学的对面小区租了一个2360一个月，小区离公司园区就隔着复旦大学。

在公司的工作比较清闲每天准时下班，很少有加班，有很长一段时间没有工作，每天就干坐着翻掘金看技术文档看一天，这段时间对我技术提升很大，小哥有时也会教我一些新东西，慢慢接触发现他人也挺好。当时感觉自己学历不够，报了个网络教育的专升本。周六周天就去外面玩，晚上去黄埔江边吹一吹江风。

突然有一天中午吃饭的时候发现公司园区被封了一栋楼，说是有密接，从这开始上海疫情来了。公司一天天人越来越少，新闻中确诊人数日渐增加。后来上海政府要“鸳鸯锅”式封城法，先封浦东，再封浦西，以黄浦江为界，各封一周。我当时就猜一周是不行的，就准备了两周的泡面零食应对疫情管控。只能说我还是太天真了，疫情封了两个多月，这两个多月我都在吃泡面，一天吃两桶，吃多了不够吃的，买泡面只能通过美团跑腿买，两箱桶面要了我230多块钱。每天核酸检测，抗原检测，新闻上确诊人数疯狂的增加。泡面吃腻了怎么办，就把社区发的油菜叶跟泡面一起泡，但量很少，几次就吃完了。

过了差不多两个月，疫情得到缓解，风险等级也渐渐下降，居家办公的也开始去公司上班了。那时候接近项目交付，开始了加班，有时候加到一两点，但我工作不忙，很多都是后端服务器的问题，我在那加班也只是应对突发问题。后来在上海的那段时间非常想家，我猜应该是因为疫情的太折磨人感觉家无比的温暖，没多久就离职回家。

在家休息了一个多月又回到了济南，找到了一份薪资还算可以的工作，在上海攒了点钱，考了摩托车驾-照，买了辆摩托车。奈何公司产品经理太垃圾，也到了年底，准备离职年后重新找。（谁也不想到最后做出一堆垃圾项目）

时间回到了现在，从老家过完年回济南两周了，年前裸辞的多潇洒年后找工作多狼狈。

boos上投了好多，但都是送达。就算是已读不回也行，但大部分都是HR根本没有看。后来在开发群里问了都是这样，很多公司都是在裁人，很少有招的。找了两周工作回我的大部分是外派，弄得我很焦虑，我在想是不是一线城市好找些，要不卖了摩托车再去上海深圳闯一闯又或者回老家找个稳定的工作开始与柴米油盐为伴。

不知不觉写了这么多了，我还以为第一次写不了几个字呢。写了一半的时候跟我妈打了个电话，平时我很少与家人联系，都是她们主动跟我打电话，我妈让我不急慢慢找，打完电话后焦虑的心情放松了下来。

作者：世间有灵
来源：juejin.cn/post/7199235508665008188

开头

本文是数据可视化开始的开发细节第五章。关于画布中的元素的各种鼠标拖拽操作。

简单声明
本人只是一个菜鸡，以下方法仅个人思路，如有错误，轻喷🙏🏻 。

开头说明
下面所说的元素表示的是组或者组件的简称。

开始

大屏设计当中，不乏需要调整图表组件的位置和尺寸。
相较于网页低代码，图表大屏低代码可能需要更复杂的操作，比如嵌套成组、多选、单元素拖拽缩放、多元素拖拽缩放。
并且需要针对鼠标的动作做相应的区分，当中包含了相当的细节，这里就一一做相应的讲解。

涉及的依赖

• react-rnd
  react-rnd是一个包含了拖拽和缩放两个功能的react组件，并且有非常丰富的配置项。
  内部是依赖了拖拽(react-draggable)和缩放（re-resizable）两个模块。
  奈何它并没有内置多元素的响应操作，本文就是针对它来实现对应的操作。

• react-selecto
  react-selecto是一个简单的简单易用的多选元素组件。

• eventemitter3
  eventemitter3是一个自定义事件模块，能够在任何地方触发和响应自定义的事件，非常的方便。

相关操作

多选

画布当中可以通过鼠标点击拖拽形成选区，选区内的元素即是被选中的状态。

这里即可以使用react-selecto来实现此功能。

从图上操作可以看到，在选区内的元素即被选中（会出现黑色边框）。

  import ReactSelecto from 'react-selecto';

  const Selecto = () => {

    return (
      <ReactSelecto
        // 会被选中元素的父容器 只有这个容器里的元素才会被选中  
        dragContainer={'#container'}
        // 被选择的元素的query 
        selectableTargets={['.react-select-to']}
        // 表示元素有被选中的百分比为多少时才能被选中
        hitRate={10}
        // 当已经存在选中项时，按住指定按键可进行继续选择  
        toggleContinueSelect={'shift'}
        // 可以通过点击选择元素
        selectByClick
        // 是否从内部开始选择（？）
        selectFromInside
        // 拖拽的速率（不知道是不是这个意思）
        ratio={0}
        // 选择结束
        onSelectEnd={handleSelectEnd}
      ></ReactSelecto>
    );
  };
复制代码

这里有几个需要注意的地方。

• 操作互斥
  画布当中的多选和拖拽都是通过鼠标左键来完成的，所以当一个元素是被选中的时候，鼠标想从元素上开始拖拽选择组件是不被允许的，此时应该是拖拽元素，而不是多选元素。

而元素如果没有被选中时，上面的操作则变成了多选。

• 内部选中
  画布当中有组的概念，它是一个组与组件无限嵌套的结构，并且可以单独选中组内的元素。
  当选中的是组内的元素时，即说明最外层的组是被选中的状态，同样需要考虑上面所说的互斥问题。

单元素拖拽缩放

单元素操作相对简单，只需要简单使用react-rnd提供的功能即可完成。

多元素拖拽缩放

这里就是本文的重点了，结合前面介绍的几个依赖，实现一个简单的多选拖拽缩放的功能。

具体思路

多个元素拖拽，说到底其实鼠标拖拽的还是一个元素，就是鼠标拖动的那一个元素。
而其余被选中的元素，仅仅需要根据被拖动的元素的尺寸位置变动来做相应的加减处理即可。

相关问题

• 信息计算
  联动元素的位置尺寸信息该如何计算。

• 组件间通信
  因为每一个图表组件并非是单纯的同级关系，如果是通过层层props传递，免不了会有多余的刷新，造成性能问题。
  而通过全局的dva状态同样在更新的时候会让组件刷新。

• 数据刷新
  图表数据是来自于dva全局的数据，现在频繁自刷新相当于是一直更新全局的数据，同样会造成性能问题。

• 其他
  一些细节问题

解决方法

• 信息计算
  关于位置的计算相对简单，只需要单纯的将操作的元素的位置和尺寸差值传递给联动组件即可。

• 组件间通信
  根据上面问题的解析，可以使用eventemitter3来完成任意位置、层级的数据通信，并且它和react渲染无任何关系。

import { useCallback, useEffect } from 'react'
import EventEmitter from 'eventemitter3'

const eventemitter = new EventEmitter()

const SonA = () => {

  console.log('刷新')

  useEffect(() => {
    const listener = (value) => {
      console.log(value)
    }
    eventemitter.addListener('change', listener)
    return () => {
      eventemitter.removeListener('change', listener)
    }
  }, [])

  return (
    <span>son A</span>
  )

}

const SonB = () => {

  const handleClick = useCallback(() => {
    eventemitter.emit('change', 'son B')
  }, [])

  return (
    <span>
      <button onClick={handleClick}>son B</button>
    </span>
  )

}

const Parent = () => {

  return (
    <div>
      <SonA />
      <br />
      <SonB />
    </div>
  )

}

运行上面的例子可以发现，点击SonB组件的按钮，可以让SonA接收到来自其的数据，并且并没有触发SonA的刷新。
需要接收数据的组件只需要监听(addListener)指定的事件即可，比如上面的change事件。
而需要发送数据的组件则直接发布(emit)事件即可。
这样就避免了一些不必要的刷新。

• 数据刷新
  频繁刷新全局数据，会导致所有依赖其数据的组件都会刷新，所以考虑为需要刷新数据的组件在内部单独维护一份状态。
  当开始操作时，记录下状态，标识开始使用内部状态表示图表的信息，结束操作时处理下内部数据状态，将数据更新到全局中去。

  import { useMemo, useEffect, useState, useRef } from 'react'
  import EventEmitter from 'eventemitter3'

  const eventemitter = new EventEmitter()

  const Component = (props: {
    position: {left: number, top: number}
  }) => {

    const [ position, setPosition ] = useState({
      left: 0,
      top: 0
    })

    const isDrag = useRef(false)

    const dragStart = () => {
      isDrag.current = true 
      setPosition(props.position)
    }

    const drag = (position) => {
      setPosition(position)
    }

    const dragEnd = () => {
      isDrag.current = false 
      // TODO 
      // 更新数据到全局
    }

    useEffect(() => {
      eventemitter.addListener('dragStart', dragStart)
      eventemitter.addListener('drag', drag)
      eventemitter.addListener('dragEnd', dragEnd)
      return () => {
        eventemitter.removeListener('dragStart', dragStart)
        eventemitter.removeListener('drag', drag)
        eventemitter.removeListener('dragEnd', dragEnd)
      }
    }, [])

    return (
      <span
        style={{
          left: (isDrag.current ? position : props.position).left,
          top: (isDrag.current ? position : props.position).top
        }}
      >图表组件</span>
    )

  }

上面的数据更新还可以更加优化，对于短时间的多次更新操作，可以控制一下更新频率，将多次更新合并为一次。

• 其他

  • 控制刷新
    这里的控制刷新指的是上述的内部刷新，不需要每次都响应react-rnd发出的相关事件，可以做对应的节流(throttle)操作，减少事件触发频率。

  • 通信冲突问题
    因为所有的组件都需要监听拖拽的事件，包括当前被拖拽的组件，所以在传递信息时，需要把自身的id类似值传递，防止冲突。

  • 组件的缩放属性
    这里是关于前文说到的成组的逻辑相关，因为组存在scaleX和scaleY两个属性，所以在调整大小的时候，也要兼顾此属性（本文先暂时不考虑这个问题）。

  • 单元素选中情况
    自定义事件的监听是无差别的，当只选中了一个元素进行拖拽缩放操作时，无须触发相应的事件。

最后的DEMO

成品

其实在之前就已经发现其实react-selecto的作者也有研发其他的可视化操作模块，包括本文所说的多选拖拽的操作，但是奈何无法满足本项目的需求，故自己实现了功能。
如果有兴趣可以去看一下这个成品moveable。

总结

通过上面的思路，即可完成一个简单的多元素拖拽缩放的功能，其核心其实就是eventemitter3的自定义事件功能，它的用途在平常的业务中非常广泛。
比如我们完全可以在以上例子的基础上，加上元素拖拽时吸附的功能。

结束

结束🔚。

顺便在下面附上相关的链接。

试用地址
试用账号
静态版试用地址
操作文档
代码地址

作者：写代码请写注释
来源：juejin.cn/post/7202445722972815417

ESlint 概述

ESLint 是一个代码检查工具，通过静态的分析，寻找有问题的模式或者代码。默认使用 Espree 解析器将代码解析为 AST 抽象语法树，然后再对代码进行检查。

抽象语法树（Abstract Syntax Tree，AST），或简称语法树（Syntax tree），是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构。

随着前端工程化体系的不断发展，Eslint 已经前端工程化不可缺失的开发工具。它解决了前端工程化中团队代码风格不统一的问题，避免了一些由于代码规范而产生的 Bug, 同时它提高了了团队的整体效率。

运行机制

Eslint的内部运行机制不算特别复杂，主要分为以下几个部分:

• preprocess，把非 js 文本处理成 js

• 确定 parser（默认是 espree）

• 调用 parser，把源码 parse 成 SourceCode（AST）

• 调用 rules，对 SourceCode 进行检查，返回 linting problems

• 扫描出注释中的 directives，对 problems 进行过滤

• postprocess，对 problems 做一次处理

• 基于字符串替换实现自动 fix

具体描述，这里就不补充了。详细的运行机制推荐大家去学习一下Eslint的底层实现原理和源码。

常用规则

为了让使用者对规则有个更好的理解, Eslint 官方将常用的规则进行了分类并且定义了一个推荐的规则组 "extends": "eslint:recommended"。具体规则详情请见官网

示例规则如下:

• array-element-newline ：<string|object>
  "always"(默认) - 需要数组元素之间的换行符
  "never" - 不允许数组元素之间换行
  "consistent" - 数组元素之间保持一致的换行符

配置详解

Eslint 配置我们主要通过.eslintrc配置来描述

extends

extends 的内容为

一个 ESLint配置文件，一旦扩展了(即从外部引入了其他配置包)，就能继承另一个配置文件的所有属性(包括rules, plugins, and language option在内)，然后通过 merge合并/覆盖所有原本的配置。最终得到的配置是前后继承和覆盖前后配置的并集。

extends属性的值可以是：

• 定义一个配置的字符串(配置文件的路径、可共享配置的名称，如eslint:recommended 或 eslint:all)

• 定义规则组的字符串。plugin:插件名/规则名称 (插件名取eslint-plugin-之后的名称)

 "extends": [
    "eslint:recommended",
    "plugin:react/recommended"
  ],

parserOptions

指定你想要支持的 JavaScript 语言选项。默认支持 ECMAScript 5 语法。你可以覆盖该设置，以启用对 ECMAScript 其它版本和 JSX 的支持。

"parserOptions": {
  "ecmaVersion": 6,
  "sourceType": "module",
  "ecmaFeatures": {
     "jsx": true
  }
}

rules

ESLint 拥有大量的规则。你可以通过配置插件添加更多规则。使用注释或配置文件修改你项目中要使用的规则。要改变一个规则，你必须将规则 ID 设置为下列值之一：

• "off" 或 0 - 关闭规则

• "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)

• "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

"plugins": [
  "plugin-demo",
],
"rules": {
  "quotes": ["error", "double"], // 修改eslint recommended中quotes规则
  "plugin-demo/rule1": "error", // 配置eslint-plugin-plugin-demo 下rule1规则
}

对于 Eslint recommended 规则组中你不想使用的规则，也可以在这里进行关闭。

plugin

ESLint 支持使用第三方插件。要使用插件，必须先用 npm进行安装

"plugins": [
   "plugin-demo", // // 配置 eslint-plugin-plugin-demo 插件
],

这里做一下补充，extends 和 plugin 的区别在于，extends 是 plugin 的子集。就好比如 Eslint 中除了 recommended 规则组还有其他规则

自定义Eslint插件

团队开发中，我们经常会使用一些 eslint 规则插件来约束代码开发，但偶尔也会有一些个性定制化的团队规范，而这些规范就需要通过一些自定义的 ESlint 插件来实现。

我们先看一段简短的代码:

import { omit } from 'lodash';

上述代码是我们在使用lodash的一个习惯性写法，但是这段代码会导致全量引入lodash,造成工程包体积偏大。

正确的引用方式如下:

import omit from 'lodash/omit';

// 或
import { omit } from 'lodash-es';

我们希望可以通过插件去约束开发者的使用习惯。但是 Eslint 自带的规则对于这个定制化的场景就无法满足了。此时, 就需要去使用 Eslint 提供的开放能力去定制化一个 Eslint 规则。接下来我将从创建到使用去实现一个lodash引用规范的Eslint自定义插件

创建

工程搭建

Eslint 官方提供了脚手架来简化新规则的开发, 如不使用脚手架搭建，只需保证和脚手架一样的结构就可以啦。

创建工程前，先全局安装两个依赖包：

$ npm i -g yo
$ npm i -g generator-eslint

再执行如下命令生成 Eslint 插件工程。

$ yo eslint:plugin

这是一个交互式命令，需要你填写一些基本信息，如下

$ yo eslint:rule

? What is your name? // guming-eslint-plugin-custom-lodash 

? What is the plugin ID? // 插件名 (eslint-plugin-xxx)

? Type a short description of this plugin: // 描述你的插件是干啥的

? Does this plugin contain custom ESLint rules? Yes // 是否为自定义Eslint 校验规则

? Does this plugin contain one or more processors? No // 是否需要处理器

接下来我们为插件创建一条规则，执行如下命令:

$ npx yo eslint:rule

这也是一个交互式命令，如下：

? What is your name? // guming-eslint-plugin-custom-lodash

? Where will this rule be published? ESLint Plugin

? What is the rule ID? // 规则名称 lodash-auto-import

? Type a short description of this rule: // 规则的描述

? Type a short example of the code that will fail: // 这里写你这条规则校验不通过的案例代码

填写完上述信息后， 我们可以得到如下的一个项目目录结构：

guming-eslint

├─ .eslintrc.js

├─ .git

├─ README.md

├─ docs

│    └─ rules

│           └─ lodash-auto-import.md

├─ lib // 规则

│    ├─ index.js

│    └─ rules

│           └─ lodash-auto-import.js

├─ node_modules

├─ package-lock.json

├─ package.json

└─ tests // 单测

       └─ lib

            └─ rules

                └─ lodash-auto-import.js

eslint 规则配置

Eslint 官方制定了一套开发自定义规则的规范。我们只需要根据规范配置相应的内容就可以轻松的实现我们的自定义Eslint规则。具体配置详情可见官网

相关配置的说明如下:

module.exports = {

  meta: {

    // 规则的类型 problem|suggestion|layout

    // problem: 这条规则识别的代码可能会导致错误或让人迷惑。应该优先解决这个问题

    // suggestion: 这条规则识别的代码不会导致错误，但是建议用更好的方式

    // layout: 表示这条规则主要关心像空格、分号等这种问题

    type: "suggestion",

    // 对于自定义规则，docs字段是非必须的

    docs: {

      description: "描述你的规则是干啥的",

      // 规则的分类，假如你把这条规则提交到eslint核心规则里，那eslint官网规则的首页会按照这个字段进行分类展示

      category: "Possible Errors",

      // 假如你把规则提交到eslint核心规则里

      // 且像这样extends: ['eslint:recommended']继承规则的时候，这个属性是true，就会启用这条规则

      recommended: true,

      // 你的规则使用文档的url

      url: "https://eslint.org/docs/rules/no-extra-semi",

    },

    // 定义提示信息文本 error-name为提示文本的名称 定义后我们可以在规则内部使用这个名称

    messages: {

      "error-name": "这是一个错误的命名"

    },

    // 标识这条规则是否可以修复，假如没有这属性，即使你在下面那个create方法里实现了fix功能，eslint也不会帮你修复

    fixable: "code",

    // 这里定义了这条规则需要的参数

    // 比如我们是这样使用带参数的rule的时候，rules: { myRule: ['error', param1, param2....]}

    // error后面的就是参数，而参数就是在这里定义的

    schema: [],

  },

  create: function (context) {

    // 这是最重要的方法，我们对代码的校验就是在这里做的

    return {

      // callback functions

    };

  },

};

本次Eslint 校验规则是推荐使用更好的lodash引用方式，所以常见规则类型 type为 suggestion

AST 结构

Eslint 的本质是通过代码生成的 AST 树做代码的静态分析，我们可以使用 astexplorer 快速方便地查看解析成 AST 的结构。

我们将如下代码输入

import { omit } from 'lodash'

得到的 AST 结构如下:

{

  "type": "Program",

  "start": 0,

  "end": 29,

  "body": [

    {

      "type": "ImportDeclaration",

      "start": 0,

      "end": 29,

      "specifiers": [

        {

          "type": "ImportSpecifier",

          "start": 9,

          "end": 13,

          "imported": {

            "type": "Identifier",

            "start": 9,

            "end": 13,

            "name": "omit"

          },

          "local": {

            "type": "Identifier",

            "start": 9,

            "end": 13,

            "name": "omit"

          }

        }

      ],

      "source": {

        "type": "Literal",

        "start": 21,

        "end": 29,

        "value": "lodash",

        "raw": "'lodash'"

      }

    }

  ],

  "sourceType": "module"

}

分析 AST 的结构，我们可以知道:

• type 为 包的引入方式

• source 为 资源名(依赖包名)

• specifiers 为导出的模块

节点访问方法

Eslint 规则中的 create 函数create (function) 返回一个对象，其中包含了 ESLint 在遍历 JavaScript 代码的抽象语法树 AST (ESTree 定义的 AST) 时，用来访问节点的方法。其中， 访问节点的方法如下:

• VariableDeclaration，则返回声明中声明的所有变量。

• 如果节点是一个 VariableDeclarator，则返回 declarator 中声明的所有变量。

• 如果节点是 FunctionDeclaration 或 FunctionExpression，除了函数参数的变量外，还返回函数名的变量。

• 如果节点是一个 ArrowFunctionExpression，则返回参数的变量。

• 如果节点是 ClassDeclaration 或 ClassExpression，则返回类名的变量。

• 如果节点是一个 CatchClause 子句，则返回异常的变量。

• 如果节点是 ImportDeclaration，则返回其所有说明符的变量。

• 如果节点是 ImportSpecifier，ImportDefaultSpecifier 或 ImportNamespaceSpecifier，则返回声明的变量。

本次我们是校验资源导入规范，所以我们使用ImportDeclaration获取我们导入资源的节点结构

代码修复

report()函数返回一个特定结构的对象，它用来发布警告或错误, 我们可以通过配置对象去配置错误AST 节点，错误提示的内容(可使用 meta 配置的 meaasge 名称)以及修复方式

实例配置代码如下

context.report({

    node: node,

    message: "Missing semicolon",

    fix: function(fixer) {

        return fixer.insertTextAfter(node, ";");

    }

});

编写代码

了解完上述内容，我们就可以开始愉快的编写代码了。

自定义规则代码如下:

 // lib/rules/lodash-auto-import.js



/**

 * @fileoverview 这是一个lodash按需引入的eslint规则

 * @author guming-eslint

 */

"use strict";



//------------------------------------------------------------------------------

// Rule Definition

//------------------------------------------------------------------------------



/** @type {import('eslint').Rule.RuleModule} */



const SOURCElIST = ["lodash", "lodash-es"];

module.exports = {

  // eslint-disable-next-line eslint-plugin/prefer-message-ids

  meta: {

    type: "suggestion", // `problem`, `suggestion`, or `layout`

    docs: {

      description: "这是一个lodash按需引入的eslint规则",

      recommended: true,

      url: null, // URL to the documentation page for this rule

    },

    messages: {

      autoImportLodash: "请使用lodash按需引用",

      invalidImport: "lodash 导出依赖不为空",

    },

    fixable: "code",

    schema: [],

  },



  create: function (context) {



    // 获取lodash中导入的函数名称，并返回

    function getImportSpecifierArray(specifiers) {

      const incluedType = ["ImportSpecifier", "ImportDefaultSpecifier"];

      return specifiers

        .filter((item) => incluedType.includes(item.type))

        .map((item) => {

          return item.imported ? item.imported.name : item.local.name;

        });

    }



    // 生成修复文本

    function generateFixedImportText(importedList, dependencyName) {

      let fixedText = "";

      importedList.forEach((importName, index) => {

        fixedText += `import ${importName} from "${dependencyName}/${importName}";`;

        if (index != importedList.length - 1) fixedText += "\n";

      });

      return fixedText;

    }



    return {

      ImportDeclaration(node) {

        const source = node.source.value;

        const hasUseLodash = SOURCElIST.inclues(source);



        // 使用lodash

        if (hasUseLodash) {

          const importedList = getImportSpecifierArray(node.specifiers || []);



          if (importedList.length <= 0) {

            return context.report({

              node,

              messageId: "invalidImport",

            });

          }



          const dependencyName = getImportDependencyName(node);

          return context.report({

            node,

            messageId: "autoImportLodash",

            fix(fixer) {

              return fixer.replaceTextRange(

                node.range,

                generateFixedImportText(importedList, dependencyName)

              );

            },

          });

        }

      },

    };

  },

};

配置规则组

// lib/rules/index.js



const requireIndex = require("requireindex");

// 在这里导入了我们上面写的自定义规则

const rules = requireIndex(__dirname + "/rules");

module.exports = {

    // rules是必须的

    rules,

    // 增加configs配置

    configs: {

        // 配置了这个之后，就可以在其他项目中像下面这样使用了

        // extends: ['plugin:guming-eslint/recommended']

        recommended: {

            plugins: ['guming-eslint'],

            rules: {

                'guming-eslint/lodash-auto-import': ['error'],

            }

        }

    }

}

补充测试用例

// tests/lib/rules/lodash-auto-import.js

/**

 * @fileoverview 这是一个lodash按需引入的eslint规则

 * @author guming-eslint

 */

"use strict";



//------------------------------------------------------------------------------

// Requirements

//------------------------------------------------------------------------------



const rule = require("../../../lib/rules/lodash-auto-import"),

  RuleTester = require("eslint").RuleTester;



//------------------------------------------------------------------------------

// Tests

//------------------------------------------------------------------------------



const ruleTester = new RuleTester();

ruleTester.run("lodash-auto-import", rule, {

  valid: ['import omit from "lodash/omit";', 'import { omit } from "lodash-es";'],



  invalid: [

    // eslint-disable-next-line eslint-plugin/consistent-output

    {

      code: 'import {} from "lodash";',

      errors: [{ message: "invalidImport" }],

      output: 'import xxx from lodash/xxx'

    },

    {

      code: 'import {} from "lodash-es";',

      errors: [{ message: "invalidImport" }],

      output: 'import { xxx } from lodash-es'

    },

    {

      code: 'import { omit } from "lodash";',

      errors: [{ message: "directlyImportLodash" }],

      output: 'import omit from "lodash/omit";',

    },

    {

      code: 'import { omit as _omit } from "lodash";',

      errors: [{ message: "directlyImportLodash" }],

      output: 'import omit from "lodash/omit";',

    },

    {

      code: 'import { omit, debounce } from "lodash";',

      errors: [{ message: "directlyImportLodash" }],

      output:

        'import omit from "lodash/omit"; \n import debounce from "lodash/debounce";',

    },

  ],

});

可输入如下指令，执行测试

$ yarn run test

注意事项

开发这个插件的一些注意事项如下

• 多个模块导出

• lodash 具名导出和默认导出

• 模块别名(as)

使用

插件安装

• npm 包发布安装调试

$ yarn add eslint-plugin-guming-eslint

• npm link 本地调试(推荐使用) 插件项目目录执行如下指令

$ npm link

项目目录执行如下指令

$ npm link eslint-plugin-guming-eslint

项目配置

添加你的 plugin 包名（eslint-plugin- 前缀可忽略） 到 .eslintrc 配置文件的 extends 字段。

.eslintrc 配置文件示例：

module.exports = {

  // 你的插件

  extends: ["plugin:guming-eslint/recommended"],

  parserOptions: {

    ecmaVersion: 7,

    sourceType: "module",

  },

};

效果

作者：古茗前端团队
来源：juejin.cn/post/7202413628807938108

功能截图

特别说明：由于本项目是用于教学案例，并没有上线的二维码供大家体验。

开发版本

• 微信开发者工具版本：1.06

• 调试基础库：2.30

代码仓库

• gitee：gitee.com/guigu-fe/gu…

• github：github.com/xiumubai/gu…

建议全文参考源代码观看效果更佳，代码可直接在微信开发者工具当中打开预览，appid需要替换成自己的。

获取用户信息变化

用户头像昵称获取规则已调整，现在微信小程序已经获取不到用户昵称和头像了，只能已通过用户回填（提供给用户一个修改昵称和头像的表单页面）的方式来实现。不过还是可以获取到code跟后端换取token的方式来进行登录。

具体参考 *用户信息接口调整说明*、小程序用户头像昵称获取规则调整公告

vant weapp组件库的使用

1.需要使用npm构建的能力，用 npm 构建前，请先阅读微信官方的 npm 支持。初始化package.json

npm init

2.安装@vant/weapp

# 通过 npm 安装
npm i @vant/weapp -S --production

# 通过 yarn 安装
yarn add @vant/weapp --production

# 安装 0.x 版本
npm i vant-weapp -S --production

2.修改 app.json 将 app.json 中的 "style": "v2" 去除，小程序的新版基础组件强行加上了许多样式，难以覆盖，不关闭将造成部分组件样式混乱。 3.修改 project.config.json 开发者工具创建的项目，miniprogramRoot 默认为 miniprogram，package.json 在其外部，npm 构建无法正常工作。 需要手动在 project.config.json 内添加如下配置，使开发者工具可以正确索引到 npm 依赖的位置。

{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./miniprogram/"
      }
    ]
  }
}

注意： 由于目前新版开发者工具创建的小程序目录文件结构问题，npm构建的文件目录为miniprogram_npm，并且开发工具会默认在当前目录下创建miniprogram_npm的文件名，所以新版本的miniprogramNpmDistDir配置为'./'即可。 4.构建 npm 包 打开微信开发者工具，点击 工具 -> 构建 npm，并勾选 使用 npm 模块 选项，构建完成后，即可引入组件。

使用组件

引入组件

// 通过 npm 安装
// app.json
"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

使用组件

<van-button type="primary">按钮</van-button>

如果预览没有效果，从新构建一次npm，然后重新打开此项目。

自定义tabbar

这里我的购物车使用了徽标，所以需要自定义一个tabbar，这里自定义以后，会引发后面的一系列连锁反应（比如内容区域高度塌陷，导致tabbar遮挡内容区域），后面会讲如何计算。效果如下图：

1. 配置信息

• 在 app.json 中的 tabBar 项指定 custom 字段，同时其余 tabBar 相关配置也补充完整。

• 所有 tab 页的 json 里需声明 usingComponents 项，也可以在 app.json 全局开启。

示例：

{
  "tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [{
      "pagePath": "page/component/index",
      "text": "组件"
    }, {
      "pagePath": "page/API/index",
      "text": "接口"
    }]
  },
  "usingComponents": {}
}