![](https://i.bmp.ovh/imgs/2021/11/f954aa01aa7d87d8.gif)




## 前言

打工人的无奈，公司要求每个人都要进行培训。为了完成它，上网找出好几个demo，都没有勾起我动手实现一波的欲望。日常浏览掘金时，偶然看到一篇[【中秋】纯CSS实现日地月的公转](https://juejin.cn/post/7006507905050492935?share_token=f590fc56-341d-48e7-bdd4-69c57fe98419)，决定就是它了。

实现效果: [日地月公转 (codepen.io)](https://codepen.io/lihai-boop/pen/RwZzawj)

## 实现日地月公转

### HTML5布局

布局方面非常简单，使用三个`div` 分别表示日，地，月，另外再加`div.contian` 进行包裹

```html
<div class="contian">
    <div class="sun"></div>
    <div class="earth">
        <div class="moon"></div>
    </div>
</div>
```

### 设置全局背景

`body` 天生自带`margin:8px;` 影响布局，去除即可

`html，body` 均为块级元素，独占一行，但高度不会占满窗口高度。我们需要让其撑满整个窗口，设置它们的高度为`height:100vh;`

```css
html,
body {
    margin: 0;
    padding: 0;
    background-color: #2f3141;
    height: 100vh;
}
```

### 定位居中

我们需要将所有内容都相对浏览器窗口居中展示，居中方式有：`flex,grid` 布局，定位以及设置`margin` 等。

这里绘图说明下如何`margin`居中:

给内容具体的宽高并设置`margin-left:aute;margin-right:aute;` 另外通过`calc((100vh - 内容高度) / 2)`

得到`margin-top` 的值。
![image.png](http://112.124.1.74/static/img/b25372865c1bce01b6be3704a870c7ac.image.png)
当然使用`margin`居中麻烦，这里我只提供一个思路。

日地月居中，我选择使用定位完成

`body` 是占满窗口的，我们以`body` 进行绝对定位。定位前需要给`body`设置相对定位属性`position: relative;` 然后给`div.contian` 添加绝对定位属性`position: absolute;`

```css
html,
body {
    margin: 0;
    padding: 0;
    background-color: #2f3141;
    position: relative;
    height: 100vh;
}

.contian {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 500px;
    height: 500px;
    border: 1px solid #ccc;
    transform: translate(-50%, -50%);
}
```

绝对定位时，`top,left` 值是以`div.contian` 左上角为准，所以当`left:50%;right:50%` `div.contian` 并没有达到居中的效果，`left,right` 值页面需要减`div.contian`自身宽高的值。

为了达到效果，我使用了 `transform: translate(-50%, -50%);` 让其以自身的宽高为准向X轴，Y轴，各移动`-50%` 。

设置`transform` 可以理解为创建了一个三维坐标如下图，不同的是Z轴是正对屏幕，面对屏幕前的您。这里对`transform` 不做过多文字描述
![image.png](http://112.124.1.74/static/img/0c1a97d1e254a027f892f35a97da6cc2.image.png)
为了更直观的看到效果，我给`div.contian`加了一个`border`边框
![image.png](http://112.124.1.74/static/img/cc25b1a86c2a5d07897435f9e8a4871c.image.png)
### 模拟实现太阳

同理，使`div.sun` 相对`div.contian` 绝对定位居中。设置`border-radius:50%`绘制成圆形,`backgroud`使用线性渐变` linear-gradient`填充；为了效果更佳，给`div.sun` 一定的外阴影

给`div.sun`元素设置宽高，给外阴影  `box-shadow: 0 0 8px 8px rgba(242, 120, 75, 0.2);`

```css
.sun {
    position: absolute;
    border-radius: 50%;
    height: 200px;
    width: 200px;
    left: 50%;
    top: 50%;
    background: linear-gradient(#fcd670, #f2784b);
    transform: translate(-50%, -50%);
    box-shadow: 0 0 8px 8px rgba(242, 120, 75, 0.2);
}
```

太阳效果如图：
![image.png](http://112.124.1.74/static/img/bc1daf33e432fc5063c2e0247967e773.image.png)
### 模拟实现地球

#### 地球公转轨道

地球会绕太阳进行运动，运动的轨道是一个圆形的，我们可以给`div.earth` 宽高设置与最外层`div.contian` 一致

为直观我也给`div.earth`添加了一个`border` 属性

```css
.earth {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    border:1px solid #f2784b;
}
```

这个圆边框将用于地球公转运动轨道

#### 伪元素`::before`实现行星

行星都用一个圆进行模拟，同理使用 `border-radius: 50%;` 给背景渐变色。将地球定位至地球公转轨道正上文 也就是`div.earth` 的正上方

```css
.earth {
  //...
  position: relative;
}
.earth::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: linear-gradient(#19b5fe, #7befb2);
    border-radius: 50%;
}
```

地球效果如图：
![image.png](http://112.124.1.74/static/img/d47a58cdabec6d91b1b0691cde23e0a8.image.png)
#### 伪元素`::after`实现行星尾巴

行星尾巴使用`border` 模拟，设置`::after`伪元素`width:100%;heigth:100%;`,占满`div.earth`

给`::after`伪元素`border-top:px solid silver;border-left:22px solid transparent;`

将`div.earth`的`border`去除，这个时候我们可以清楚的看到行星尾巴已经出来了
![image.png](http://112.124.1.74/static/img/c0a98bb635ad3fc388ac10164e39c829.image.png)
但行星尾巴并没有与地球交接在一起，这里可以通过设置`transform`中的`rotateZ`,让其绕Z轴逆时针旋转一定角度
![image.png](http://112.124.1.74/static/img/e59943bb834af655162fa7d97821bb0d.image.png)
此时，地球完成了，只差让其绕太阳旋转

给`div.earth`元素添加`animation`属性，定义动画关键帧`keyframes` ,让`div.earth` 一直Z轴是顺时针旋转

```css
.earth {
    width: 500px;
    height: 500px;
    border-radius: 50%;
    position: relative;
    animation: rotate 20s linear infinite;
}

@keyframes rotate {
    0% {
        transform: rotateZ(0deg);
    }

    100% {
        transform: rotateZ(360deg);
    }

}

.earth::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: linear-gradient(#19b5fe, #7befb2);
    border-radius: 50%;
}
 .earth::after {
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      border-top: 2px solid silver;
      border-right: 2px solid transparent;
      border-radius: 50%;
      transform: rotateZ(-52deg);
  }
```

添加动画属性后效果：


![image.png](http://112.124.1.74/static/img/147574d00fac81af05e4ad978a83d72c.image.png)
### 模拟实现月亮

```html
<div class="earth">
    <div class="moon"></div>
</div>
```

html布局上，`div.moon`被`div.earth`包裹，所以我们依然通过定位，将`div.moon` 固定至地球公转轨道正上文 也就是`div.earth` 的正上方

月亮公转轨道圆应大于地球

```css
.moon {
    position: absolute;
    left: 50%;
    top: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid #19b5fe;
    transform: translate(-50%, -50%);
}
```

为直观我给`div.moon` 添加了`border`
![image.png](http://112.124.1.74/static/img/147574d00fac81af05e4ad978a83d72c.image.png)
留下的就是使用`div.moon`的伪元素模拟出月亮与月亮旋转的尾巴,思路与模拟实现地球相同

到此，文章不再添加文字描述思路

最后将不必要的`border`删除，一个有手就会的日地月公转就完成了

完整代码不贴出来了，想要源码移步[日地月公转 (codepen.io)](https://codepen.io/lihai-boop/pen/RwZzawj)

当然，还可以扩展实现3D效果的公转自转，有兴趣的小家伙可以实现下
![image.png](http://112.124.1.74/static/img/e361013156bc3cd0880e65b81046b32d.image.png)
[实现行星公转自转 (codepen.io)](https://codepen.io/lihai-boop/pen/porMoMW)
## 总结

文章使用定位，`transform`,`animation` 等css3属性，从0到1实现了日地月公转

有手就会系列——实现日地月公转

五年后的自己，你好！你是否已经达成自己的职业目标？五年前的你，凭一腔热血选择互联网行业，并立志做出自己的成绩。

​		不管五年后的你如何，希望今天我写给你的话，可以让你想起当年下定决心。激励你继续努力下去,切勿懒散！

​		一, 我知道生活，工作压力大，但不要将全部压力自己担着。三十岁前拿命挣钱，三十岁后拿钱换命。每天再累也不要忘记锻炼身体，身体健康才是资本，不要懒。因为你没有经济资本生病，这是最重要的一点！

​      二,学习学习还是学习。2020年春节发生的一场疫情，全国人民被迫按下的暂停键，全民宅家。在这段时间里，我阅读专业，理财类书籍逐渐养成读书的习惯。希望五年后的你还保持着，我向往与b站知识区的up主们一样才华横溢。理性的眼光看待生活中的事情 。

​		三,成为高级前端工程师，现在的我面临的是就业压力。我相信凭现在我的能力在小公司找一份工作很容易了，但这不是我想要的，我想要的是进入大厂工作学习。为此我每天都在学习，写代码，无论当前目标能不能实现。希望五年后的你没有放弃提高专业能力的想法，珍惜一切机会提升自己，早日成为高级前端工程师，始终向进入一线大厂奋斗。

​		四，学习理财知识，培养财商。职业是不能帮你实现财富自由的。五年后的你，工作稳定，有一定的抗风险能力，也多多少少有一些存款，希望你尝试定投基金或股票。

​		五, 工作再忙也不要忘记陪陪父母。父母思想老旧，相处起来伤脑筋，希望你可以收敛自己的浮躁，多一点耐心对待父母,找时间带父母一起去旅游。她们真的劳累大半辈子了。

​	   一共五点要求，希望五年后的你能看到我今天写的话。反省自己做到了多少，写这么多的目的还是希望你不忘初心，不要浪费青春。不要重走父母的道路，一辈子都在底层混日子，看不到出头之日。  

**文章发布时间为：2020-10-05**

写给五年后的自己

标题没毛病，叫我靓仔🤵‍♂️就好了！！！

![image_aW2MlUTedo.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a2199655ba63461a8b5c24b8193c149f~tplv-k3u1fbpfcp-watermark.image?)



## 回顾上半年

*   吃饭的工具升级，手机、电脑💻全部换成了苹果设备；

    设备升级，给我的收益🉐是️工作效率提升。

    对我最有用的功能是捆绑应用——提醒事项，它能每天提醒我需要去完成的事项。
    
    ![image_duzBiNBLZ2.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ec6abeca73c94c308e0ece649e859f1a~tplv-k3u1fbpfcp-watermark.image?)

    合理安排时间，五月初至现在已经坚持有两个月啦。

    不追求事事都完成✅，每天心里有点小目标，不摆烂！！！

*   坚持运动；  

    ![image_MwgRt0s-Uu.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0e72d01f247e470db9789149bcb9190f~tplv-k3u1fbpfcp-watermark.image?)
    ![image_NPqQyfhJDs.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3149605598604495aff32a2faf636aeb~tplv-k3u1fbpfcp-watermark.image?)
    
    ![image_xjSh67JoEn.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/87a9c8cd12354637b3876c9bfcf3bbf3~tplv-k3u1fbpfcp-watermark.image?)
    
    ![image_C1y4COA-GT.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8571d04e57274f618a34c32f24be4c79~tplv-k3u1fbpfcp-watermark.image?)


    每天工作时长8小时，坐的时间占5-6小时，导致有段时间腰酸背痛。意识到这样早晚要嗝屁💀了，从三月份开始逐渐去养成运动的习惯。室外行走散步，室内练某几项动作。

    身体是革命的本钱嘛！

*   坚持阅读专业文章、输出文章；

    上半年输出原创文章6篇，掘金平台共输出原创文章数13篇

    **推荐一读**：

    [定义一个常量，它真的不变吗？](https://juejin.cn/post/7113830483837845518 "定义一个常量，它真的不变吗？ - 掘金 (juejin.cn)")

    [仿Mac程序坞放大动画](https://juejin.cn/post/7098327859122405383 "仿Mac程序坞放大动画 - 掘金 (juejin.cn)")

    [玩转nodeJs文件模块](https://juejin.cn/post/7072972877628178440 "玩转nodeJs文件模块 - 掘金 (juejin.cn)")

    [50+行代码搞定一行命令更新Npm包](https://juejin.cn/post/7068969844607189029 "50+行代码搞定一行命令更新Npm包 - 掘金 (juejin.cn)")

    [Github Actions实现仓库自动同步Gitee并更新文档](https://juejin.cn/post/7049317964281020446 "Github Actions实现仓库自动同步Gitee并更新文档 - 掘金 (juejin.cn)")

    [有手就会系列——实现日地月公转](https://juejin.cn/post/7035597833864478733 "有手就会系列——实现日地月公转 - 掘金 (juejin.cn)")

    [ffmpeg视频压缩踩坑总结](https://juejin.cn/post/7025189268733558791 "ffmpeg视频压缩踩坑总结 - 掘金 (juejin.cn)")

    [实现懒加载的四种方式](https://juejin.cn/post/7004460061984555021 "实现懒加载的四种方式 - 掘金 (juejin.cn)")

    [深入剖析This机制](https://juejin.cn/post/6979944155610873887 "深入剖析This机制 - 掘金 (juejin.cn)")

    曾信誓旦旦在朋友圈立下冲掘金Lv4，但现在才渣渣Lv2🤕 ，离Lv4还差个十万八千里，有点小尴尬。这方面还要多勤快点，量变引起质变。

    时光不负，创作不停！

*   活跃Github社区；

    开源一个工具库:&#x20;

    [CatsAndMice/medash: 前端JavaScipt业务代码工具库🚀 🚀 (github.com)](https://github.com/CatsAndMice/medash "CatsAndMice/medash: 前端JavaScipt业务代码工具库🚀 🚀 (github.com)")

    **推荐一读**中有两篇是介绍开发工具库中实现自动化的实践。最近把工具库自动化完善了下，并且增加自动生成文档的功能，后续我会针对该功能再输出一篇实现自动化生成文档的文章。

    开源一个Git小脚本:&#x20;

    [CatsAndMice/coco-git: 一个自动创建、推送git tag脚本 (github.com)](https://github.com/CatsAndMice/coco-git "CatsAndMice/coco-git: 一个自动创建、推送git tag脚本 (github.com)")

    欢迎Star😁。

    2021下半年至2022年上半年Github commit量:
  ![image_LyW9D4dCLA.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/51a3534052ce425da26e2bb0d9e2c03f~tplv-k3u1fbpfcp-watermark.image?)

*   学习

    大二开始敲代码，到今天已经有2.5年。在校喜欢看视频，也像大部分人一样全网收集学习资料，然后就没有然后了，我百度网盘一堆资料，收藏等于学会。

    工作后，基本不看视频，也不喜欢电子书，更不会去收集大把资料，偏向于买有点深度的实体书。

    Vue.js 官方团队成员霍春阳今年出了本新书《Vue.js设计与实现》，所以上半年一直在啃它，并且在Github创建了一个仓库，用于跟着作者思路自己也敲一遍，抄也要抄一遍，完成阅读进度70%。

    [CatsAndMice/vue3\_source\_code\_learn: Learn Vue3 (github.com)](https://github.com/CatsAndMice/vue3_source_code_learn "CatsAndMice/vue3_source_code_learn: Learn Vue3 (github.com)")

    硬骨头🦴，为了以后面试吹牛逼，必须敲碎咽下去。

    重温了一遍《JavaScript设计模式与开发实践》，设计模式编程内功，永远不过时。每隔一段时间再看都能有不一样的认知。
   
    ![image_7-RnAJDvJV.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/6cbb4b093cfb4ed08f798804f12085dd~tplv-k3u1fbpfcp-watermark.image?)

    专业/理财类书籍是我比较喜欢看的种类，跟money挂钩嘛🪝。

*   今年上半年最最最高兴的一件事——升职加薪。

    敏感话题，一笔带过。
    
    ![image_RRHKNQORI6.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/58cf26f077254b55aa755caec5dd43bc~tplv-k3u1fbpfcp-watermark.image?)

回顾完。

## 下半年展望

*   [ ] 坚持运动；

*   [ ] 坚持使用提醒事项应用；

     > 养成不易，不能轻易废了！！！

*   [ ] 坚持输出原创文章，冲掘金Lv4；

    > 撸起裤腿冲就完事。

*   [ ] 学做饭,这项我一直有在行动，奈何手艺不佳；

    > 会做饭的靓仔肯定少💪。

*   [ ] 《Vue.js设计与实现》未读章节收尾；

*   [ ] 读完《数据结构与算法JavaScript描述》，创建仓库同步练习；

    > 这本书是我大学买的，一直放着都积灰了。

嗯，够了，工作、生活琐事它们占我大部分时间。Flag立太多，完不成没有意义。

靓仔的年中总结

![image.png](http://112.124.1.74/static/img/d58668947fe99e6e69234b045464b5c4.image.png)
1. **ES2019-2022新特性均再nodeJs，浏览器版本支持环境下演示；如实际操作中报错，请考虑兼容性**，推荐使用bebal
2. 文章列举的特性并不是ES2019-2022全部特性，只摘录其中个人认为较实用的




### ES2019

#### `try...catch(e)...`简化  

`try...catch(e)...`其中`e`变成可选，不需要再额外处理

```js
try {
    throw new Error(1);
} catch {
    console.log('报错了!');
}
```



#### `Symbol([description])` 可获取描述 

增加获取`descruption`描述的属性`descruption`

```js
let sb = Symbol('symbol');
console.log(sb.description);//symbol
```



#### `Object.fromEntries(iterable)`

`Object.fromEntries(iterable)`将键值对列表转换成一个对象，`iterable`可为`Array,Map`以及其它**可迭代对象**

```js
const myMap = new Map([['key1', 'value1'], ['key2', 'value2']]);
console.log(Object.fromEntries(myMap));//{ key1: 'value1', key2: 'value2' }
```



```js
let oneArr = [['key1', 'value1'], ['key2', 'value2']];
console.log(Object.fromEntries(oneArr));//{ key1: 'value1', key2: 'value2' }
```

`Object.entries()`与`object.fromEntries()`相反

```js
let obj = { key1: 'value1', key2: 'value2' }
console.log(Object.entries(obj));//[[ 'key1', 'value1' ], [ 'key2', 'value2' ]]
```



#### `Array.flat(num)` 

`Array.flat(num)`多维数组拍平，`num`表示拍平几维数组，传入`infinity`无论多少维都会被拍平,`num`默认为1

```js
let arr = [['key1', 'value1'], ['key2', 'value2']];
console.log(arr.flat(),arr);//[ 'key1', 'value1', 'key2', 'value2' ] [[ 'key1', 'value1' ], [ 'key2', 'value2' ]]
```



```js
let arr = [['key1', 'value1'], ['key2', 'value2', ['key3', 'value3']]];
console.log(arr.flat());[ 'key1', 'value1', 'key2', 'value2', [ 'key3', 'value3' ] ]
console.log(arr.flat(2));//[ 'key1', 'value1', 'key2', 'value2', 'key3', 'value3' ]
```



```js
let arr = [['key1', 'value1'], ['key2', 'value2', ['key3', 'value3']]];
console.log(arr.flat(Infinity));//[ 'key1', 'value1', 'key2', 'value2', 'key3', 'value3' ]
```



#### `Array.flatMap()`  

`Array.flatMap()` 等价于`Array.map(val=>[val*2]).flat()`

```js
let arr = [1,2,3];
console.log(arr.flatMap(val => val * 2));//[ 2, 4, 6 ]
//当数组结构层次为1时，flatMap与map方法一致
console.log(arr.map(val=>val*2));//[ 2, 4, 6 ]
```



```js
let arr = [1,2,3];
let arr = [1, 2, 3];
console.log(arr.map(val => [val * 2]));//[ [ 2 ], [ 4 ], [ 6 ] ]
//flatMap 
console.log(arr.flatMap(val => [val * 2]));//[ 2, 4, 6 ]
```



#### `String.trimStart()`与`String.trimEnd()` 

`trimLeft，trimRight`分别是`trimStart,trimEnd`的别名，作用为删除字符串开头或结尾的空格

```js
let str1 = ' 2',
    str2 = '2 '
console.log(str1.trimStart());//"2"
console.log(str1.trimLeft());//"2"

console.log(str2.trimEnd());//"2"
console.log(str2.trimRight());//"2"

```





### ES2020

#### 统一全局环境命名`globalThis`

浏览器全局环境是`window`,nodeJs全局环境是`global`; ES2020增加`globalThis`,统一nodeJS与浏览器全局对象

浏览器环境

```js
window === globalThis;//true
```

nodeJs环境

```js
global === globalThis;//true
```



#### 可选链操作符`?.`

> 我愿称之为最强

```js
globalThis.a ? globalThis.a() : null;
```

   判断`a`函数是否存在，存在则执行；

不了解决`?.`前,实际开发用三元运算，知道后`?.`一把梭

```js
globalThis.a?.();
```



```js
let obj = {
    name:'js',
    age:25,
    sex:'male'
}
let sex = obj?.sex;//相当于 let sex = obj?obj.sex:undefined;
```



#### 动态`import`引入

该特性出来前,使用`import`加载文件，必须声明在文件最上层；对执行过程中无法通过判断来是否加载`import`引入的模块，做不到按需加载。

```js
//报错!
if(a){
 import './...';  
}
```



动态引入 ,动态引入会返回一个`promise`

```js
if(a){
    import('./..').then(res=>{
        //...
    })
}
```

当然可能使用`await`,**新特性中`await`**可以在单独使用，不一定要嵌套在`async`下

```js
if(a){
   await import('./..');
}
```





#### `BigInt`允许超出安全数字范围`Math.pow(2,53) - 1`

```js
const previousMaxSafe = BigInt(Number.MAX_SAFE_INTEGER);//9007199254740991n
const maxPlusOne = previousMaxSafe + 1n;//9007199254740992n
```



#### 空值合并运算符`??`

当左侧为`null`或`undefined`时，返回右侧值

```js
let value = globalThis.value ?? 1;
console.log(value);//1
```



```js
let value = 0 ?? 1;
console.log(value);//0
```





### ES2021

#### 数字支持`_`分隔

```js
let value = 1_000_000;
console.log(value);//1000000
```



#### 逻辑空赋值`??=,||=,&&=`

当左侧为`null或undefined`时对其赋值，`||=,&&=`同理

```js
let a;
a??=1; // 当a为null或undefined时，a被赋值为1
console.log(a);//1
```



#### `String.prototype.replaceAll()`替换全部

```js
'1 2 3 1'.replace('1','2');//"2 2 3 1"
'1 2 3 1'.replaceAll('1','2')//"2 2 3 2"
```



#### `Promise.any()`

`Promise.any()`浏览器暂未全部支持，已列案([TC39 第四阶段草案](https://github.com/tc39/proposal-promise-any))

`Promise.any()`接收一个[`Promise`](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)可迭代对象，只要其中的一个 `promise` 成功，就返回那个已经成功的 `promise`

```js
const promise1 = new Promise((resolve,reject)=>{
    reject(1);
})
const promise2 = new Promise((resolve,reject)=>{
    reject(2);
})
const promise3 = new Promise((resolve,reject)=>{
    reject(3);
})

Promise.any([promise1,promise2,promise3]).then(res=>{
    console.log('有promise已成功!');
})
```





### ES2022(待扩展补充)

#### `class`增加定义私有类字段

定义私有方法,私有字段，使用`#`作为前缀

```js
class Person{
    //私有方法
    #getAge(){
     return this.age;
	}
}
```



### 最后

期待各位同学指点补充！

觉得文章有用的同学点赞一波!



### 参考

[解读ES2020（ES11）新特性 - 简书 (jianshu.com)](https://www.jianshu.com/p/3e59df36342a)

[类元素 - JavaScript | MDN (mozilla.org)](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Classes/Public_class_fields)

[[译\]ECMAScript 2021: 最终功能集确定｜技术点评 (juejin.cn)](https://juejin.cn/post/6939061526154182686)

ES2019-2022实用新特性

> 环境基于window,文件中的配置路径为绝对路径。window中配置nginx，路径要使用`//`代替`\`

业务需求：一个服务器运行两个vue项目，并且要求端口号必须是一致的。

实现效果：http://localhost:8080/，http://localhost:8080/screen。




#### 一，Vue路由Hash模式配置nginx

路径为`/`访问项目配置：

将Vue-router插件中基础路径选项`base`设置为`/`。

`router/index.js`

```js
const router = new VueRouter({
  base:'/',
  routes,
})
```

打包好的文件`dist`的绝对路径复制，打开nginx配置文件`nginx.conf`,在servera选项中配置路径

```shell
server:{
	# ....
    location / {
        root   D://nginx-1.18.0//html//app//dist//;
        index  index.html index.htm;
    }
	#....
}
```

[![6w3fw8.png](https://img-blog.csdnimg.cn/img_convert/66fab763f1951ec09bc65d61c92bf426.png)](https://imgtu.com/i/6w3fw8)



路径为`/screen`访问项目配置：

`router/index.js`

```js
const router = new VueRouter({
  base:'/screen',
  routes,
})
```

`vue.config.js`

```js
module.exports = {
    publicPath:'/screen/',
    //...
}
```

`base`选项与`publicPath`选项值要一致；<a href='https://cli.vuejs.org/zh/config/#publicpath'>关于`publicPath`的介绍</a>

```shell
server:{
	# ....
    location /screen {
        alias   D://nginx-1.18.0//html//screen//dist//;
        index  index.html index.htm;
    }
	#....
}
```

<img  src="https://s3.ax1x.com/2021/03/13/6w8thQ.png"/>




`nginx.conf`

```shell
#user  nobody;
worker_processes  1;
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
#pid        logs/nginx.pid;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';
    #access_log  logs/access.log  main;
    sendfile        on;
    #tcp_nopush     on;
    #keepalive_timeout  0;
    keepalive_timeout  65;
    #gzip  on;
    server {
        listen       8080;
        server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location /screen {
        	alias   D://nginx-1.18.0//html//screen//dist//;
        	index  index.html index.htm;
    	}
        location / {
        	root   D://nginx-1.18.0//html//app//dist//;
        	index  index.html index.htm;
    	}
        #error_page  404              /404.html;
        # redirect server error pages to the static page /50x.html
        #
       # error_page   500 502 503 504  /50x.html;
       # location = /50x.html {
       #     root   html;
       # }
        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}
        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}
        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }
    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;
    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}
    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;
    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;
    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;
    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;
    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}
}
```

Hash模式配置完成了！

#### 二，Vue路由History模式配置nginx

同Hash模式配置nginx,History模式配置nginx对Vue文件的操作是一样的。唯独在`nginx.conf`需要添加`try_files`选项配置。

演示的两个Vue项目中`router/index.js`将`History`模式打开

`router/index.js`

```js
const router = new VueRouter({
  mode:'history'
 //...
})
```

`nginx.conf`

```shell
#...
server:{
	# ....
	location / {
		root D://nginx-1.18.0//html//app//dist//;
		index index.html index.htm;
		try_files  try_files $uri $uri/ /index.html;
	}
    location /screen {
        alias   D://nginx-1.18.0//html//screen//dist//;
        index  index.html index.htm;
        try_files $uri $uri/ /screen/index.html;
    }
	#....
}
#...
```

这样Vue路由History模式就配置好了。

#### 三，`nginx.conf`文件中`root`与`alias`的区别

`root`,`alias`都是指定文件路径的方式

`alias`指定文件路径的后面必须以`/`结束 ,`root`指定文件路径以`/`结束不是必须的。

* 当url没有前缀

  url没有前缀时，使用`root`,`alias`没有什么区别

  `root`

  ```shell
  location / {
      root D://nginx-1.18.0//html//app//dist//;
      index index.html index.htm;
  }
  ```

  `alias`

  ```shell
  location / {
      alias D://nginx-1.18.0//html//app//dist//;
      index index.html index.htm;
  }
  ```

  使用`alias`,`root`都能达到我们想要的效果

* 当url有前缀

  url有前缀后，`root`,`alias`各自有不同的表现

  `root`

  ```shell
  location /screen {
      root D://nginx-1.18.0//html//app//dist//;
      index index.html index.htm;
  }
  ```

  指定的文件路径会变成:root路径+location路径；服务器就会去`D:\\nginx-1.18.0\html\app\dist\screen`路径下寻找`index.html`文件，但该路径下没有。访问时是`404`页面

  `alias`

  ```shell
  location /screen {
      alias D://nginx-1.18.0//html//app//dist//;
      index index.html index.htm;
  }
  ```

  指定的文件路径不会发生变化，`alias`路径替换`location`路径

#### 四，`try_files`的作用

> try_files相当于重定向的作用

```shell
location /screen {
    root D://nginx-1.18.0//html//app//dist//;
    index index.html index.htm;
    try_files $uri $uri/ /screen/index.html;
}
```

try_files语法:

```shell
try_files file... uri
```

该语法表示:

try_files后面可以定义多个文件路径和最后一个作为内部跳转的uri，文件路径是`root`和`alias`指令合在一起构造而成的

例如：访问http://localhost/screen, `$uri`就是`/screen`     

`try_files`第一个值是`$uri`, `root+$uri`为`D:\nginx-1.18.0\html\app\dist\screen` 明显服务器查找不到该文件夹；

 `try_files`第二个值是`$uri/`, `root+$uri/`为`D:\nginx-1.18.0\html\app\dist\screen\` 明显服务器也查找不到该文件夹;

最后只能返回`/screen/index.html`,其中`/screen`会被`root`或`alias`替换 ，实际路径为`D:\nginx-1.18.0\html\app\dist\index.html`

前端工程师还需要知道的知识点:<a href="https://blog.csdn.net/kong2030/article/details/82014438?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control&dist_request_id=&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.control">nginx匹配规则及优先级</a>

#### 参考

https://juejin.cn/post/6926785971287490573