什么是微服务架构？​

企业为什么采用微服务？​

复杂度

快速交付

可靠的性能和可伸缩性

期望程序可用

康威定律（由Melvin R. Conway在1968年4月的文章“How do Committees Invent”中首次提到）指出“设计系统的组织其产生的设计等价于组织间的沟通结构”。基本上，它所表明的是，团队内部以及与其他团队之间的沟通方式直接反映在他们生产的代码中。

什么是云？​

基于云的计算模型是什么样的？​

应用程序可伸缩性​

服务发现、监控、分布式跟踪、安全性、管理

客户端负载均衡、动态伸缩。

什么是软件架构？​

什么是n层架构​

什么是单体架构​

什么是前后端分离​

微服务架构 与单体架构的区别？​

微服务架构提供了更大的灵活性和可维护性。

什么是spring bean？​

IoC Inversion of Control

如果说数据结构和算 法是教你如何写出高效代码， 那设计模式讲的是如何写出可扩展、可读、可维护的高质量代码

1. 命名不规范

2. 类设计不合理

3. 分层不清晰

4. 没有模块化概念

5. 代码结构混乱

6. 高度耦合

7. 聊一聊你对设计模式相关知识的重要性的看法;

8. 在你过往的项目开发中，有没有用过某种设计模式?是在什么场景下应用的?解决了什 么问题?

9. 除了我今天提到的这些，你觉得还有哪些其他的代码评价标准非常重要?聊一聊你心目中的 好代码是什么样子的?

你要考察候选人的设计能力、代码能力，那设计模式相关 的问题便是一个很好的考察点。

代码质量低还会导致线上 bug 频发，排查困难。整个团队都陷在成天修改无意 义的低级 bug、在烂代码中添补丁的事情中。而一个设计良好、易维护的系统，可以解放 我们的时间，让我们做些更加有意义、更能提高自己和团队能力的事情。

还有，如果你是一个技术 leader，负责一个项目整体的开发工作，你就需要为开发进度、 开发效率和项目质量负责。你也不希望团队堆砌垃圾代码，让整个项目无法维护，添加、修 改一个功能都要费老大劲，最终拉低整个团队的开发效率吧?

在技术这条职场道路上，当成长到一定阶段之后，你势必要承担一些指导培养初级员 工、新人，以及 code review 的工作。这个时候，如果你自己都对“什么是好的代码?如 何写出好的代码?”不了解，那又该如何指导别人，如何让人家信服呢?

面向对象

什么是面向对象编程？​

什么是面向对象编程语言?​

什么是面向对象分析和面向对象设计？​

nrm​

NPM镜像源管理工具。

可以简单且快速的切换不同的npm镜像源。

为什么使用nrm?​

1. 有些npm库在某个镜像经常性访问失败，下载不了npm依赖。(nrm可以快速切换npm源)。
2. 内置了常用的镜像，不需要手动添加。
3. 一般公司会有私有npm镜像，很方便添加并使用。

如何使用？​

安装​

npm install -g nrm

查看安装版本​

一般这一步可以校验是否已经正确安装。

nrm --version

结果：1.2.5

卸载​

npm uninstall -g nrm

查看所有的镜像​

nrm ls

结果：

* npm ---------- https://registry.npmjs.org/
  yarn --------- https://registry.yarnpkg.com/
  tencent ------ https://mirrors.cloud.tencent.com/npm/
  cnpm --------- https://r.cnpmjs.org/
  taobao ------- https://registry.npmmirror.com/
  npmMirror ---- https://skimdb.npmjs.com/registry/

*号表示正在使用的镜像

添加私服​

add <registry> <url> [home] Add one custom registry
nrm add private_registry http://192.168.1.20:4873/

使用添加的私服​

use <registry>  Change registry to registry
nrm use private_registry

测试镜像速度​

test [registry] Show response time for specific or all registries
# 测试全部
nrm test
# 测试指定镜像
nrm test private_registry

帮助​

帮助手册，查看具体的命令说明。

nrm --help

multipass​

轻量级的Ubuntu虚拟机，只能虚拟Ubuntu。

支持Linux、Windows、MacOS。

为什么使用multipass？​

1. 很简单就虚拟出一个Ubuntu。
2. 特别适合学习Ubuntu

如何使用？​

安装​

brew install --cask multipass

查看安装版本​

multipass version

Multipass app​

安装成功后，桌面有一个Multipass app。

图形化管理实例。

卸载​

brew uninstall multipass

查看所有的镜像​

multipass find

启动实例​

multipass launch --name foo

查看所有的实例​

multipass list

删除实例​

multipass delete foo

清除所有删除的实例​

multipass purge

帮助​

multipass help

字符​

空白元字符​

字符集​

锚点​

标志​

反向引用与环视​

量词​

很多时候，浮动被用于Web布局(还需要依赖清除浮动属性)。事实上，浮动并不是为布局而生。

浮动​

什么是浮动？​

如果把一个元素设置为浮动，那么其他的内容就会围绕这个元素进行流动。

浮动元素会脱离正常的文档流，但是依然对布局有影响。

为什么使用浮动？​

现实中的报刊，都会有一些图片围绕着文字。那么这种场景就特别适合浮动。

浮动API​

浮动元素相对于父级元素进行浮动的。

Name: float
Value: left | right | none | inherit
Initial: none

left​

浮动元素会自动生成display:block属性并浮动在左边。

right​

浮动元素会自动生成display:block属性并浮动在右边。

注意点​

不管是什么元素，浮动后都会得到display:block块级框。因此没必要手动申明display:block。​

多个浮动元素不会发生重叠​

浮动元素比父级元素还要高，那么会影响浮动元素的后代元素(后面的元素)​

浮动元素会浮动到负外边距上，看上去比父元素更宽​

如果浮动元素与内容重叠，那么内容都会在浮动元素之上渲染。​

• 行内元素：边框、背景、内容都会在浮动元素之上渲染。
• 块级元素：边框、背景在浮动元素之下，内容在浮动元素之上渲染

清除浮动​

清除浮动是为了不让内容跟随浮动元素进行流动。

清除浮动API​

Name: clear
Value: none | left | right | both | inherit
Initial: none

left​

左边远离浮动元素

right​

右边远离浮动元素

both​

左右两边都远离浮动元素

注意点​

clear原理是增加了元素的上外边距(marginTop)，很多时候不知道元素需要下移左右，因此会给浮动元素添加下边距。

实践​

想要一个左右布局，就可以简单是使用float: right。

引用​

https://drafts.csswg.org/css2/#propdef-float

https://drafts.csswg.org/css2/#propdef-clear

https://developer.mozilla.org/zh-CN/docs/Web/CSS/float

https://zh.learnlayout.com/

React 团队发布了一个useEvent RFC。

用于定义始终稳定的函数引用的事件处理hook，解决hook存在的闭包陷阱问题。

能够代替部分useEffect，简化心智负担。

目前还没有发布。

这个话题比较大，仅仅代表个人初浅的想法。

学习的逻辑​

graph
    A("信息(别人创造的知识和垃圾)") --> B("掌握的知识(专业知识+修养)") --> C("能力(生活+工作)")
    style A fill:#52c41a,color:white,stroke:#52c41a
    style B fill:#1890ff,color:white,stroke:#1890ff
    style C fill:#fa8c16,color:white,stroke:#fa8c16

使用JavaScript进行实践。

在JavaScript中，正则表达式也是对象，这些模式用于RegExp的exec和test以及String 的match replace search等方法

正则表达式很少有最终方案，更常见的情况是取决于对不确定性的容忍程度，同时存在多种解决方法。

在需要使用正则时搜一搜，复制粘贴改一改。有些时候看不太懂，只要能够跑的通就满意了，心里没有底，到底正不正确。又需要临时抱佛脚，并没有系统的去学习。学过之后过一段时间，就会忘记，反反复复，因此记录下来。

美国一位知名程序员杰米·加文斯基（Jamie Zawinski）说过一句话：

如果你有一个问题，你想到可以用正则来解决，那么你有两个问题了。

正则很难掌握和利用的工具。

既然这么难，使用的时候搜索以下，就解决问题了。为什么还要学习呢？

如果不熟悉一个技能的时候，遇见问题也想不到可以使用这个技术，根本就不会考虑这个技术。

什么是正则表达式​

维基百科中的解释：

正则表达式（英语：Regular Expression，常简写为 regex、regexp 或 RE），又称正则表示式、正则表示法、规则表达式、常规表示法，是计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列匹配某个句法规则的字符串。在很多文本编辑器里，正则表达式通常被用来检索、替换那些匹配某个模式的文本。

简单来说正则就是用来匹配和处理文本的字符串。

为什么要使用正则表达式​

工作时经常用到正则表达式，例如文件格式匹配。

graph LR
A(正则表达式功能) --> B("搜索(爬虫、查找某种类型文件）")
A --> C("替换(比如把一些网址替换成超链接)")
A --> D("校验(手机号、邮箱、身份证、银行可)")

style A fill:#1890ff,color:white,stroke:#1890ff
style B fill:#fa8c16,color:white,stroke:#fa8c16
style C fill:#fa8c16,color:white,stroke:#fa8c16
style D fill:#fa8c16,color:white,stroke:#fa8c16

使用 Docusaurus 构建、GitHub 源代码管理、Vercel 自动部署。

Emotion是一个专门为使用 JavaScript 编写 CSS 样式而设计的库

使用Emotion有两种主要的方法，一种是框架无关的；另一种是与 React 一起使用。

官网

GitHub

传统开发模式​

一般而言，在 Web 开发中，我们都是 CSS、HTML、JavaScript 三者进行分离的。

HTML 负责网页的结构。

CSS 负责网页上面各个元素的展示样式（效果）。

JavaScript 负责网页与用户的交互（逻辑）。

将计算机程序分隔为不同部分的设计原则，就是关注点分离原则（Separation of concerns SoC）。因此 HTML、CSS、JavaScript 三者就是典型的应用关注点分离原则。

flowchart LR
    HTML(HTML  结构) <---> CSS(CSS 效果)
    HTML <--> JavaScript(JavaScript 行为)
    style HTML fill:#52c41a,color:white,stroke:#52c41a
    style CSS fill:#1890ff,color:white,stroke:#1890ff
    style JavaScript fill:#fa8c16,color:white,stroke:#fa8c16

什么是 CSS-in-JS​

CSS-in-JS是一种样式技术，使用 JavaScript 编写 CSS，也就是把 CSS 集成到 JavaScript 中。与我们的认知是背道而驰的

解析此 JavaScript 时，会生成 CSS（通常作为<style>元素）并附加到 DOM 中。

当时学习 Activiti 工作流时，数据表特别多，有些不懂什么意思，因此总结起来。

因为 MySQL 用得最多，所以都是用 MySQL 进行说明。