12. CI/CD
缩略词 CI / CD 具有几个不同的含义。CI/CD 中的"CI"始终指持续集成，它属于开发人员的自动化流程。成功的 CI 意味着应用代码的新更改会定期构建、测试并合并到共享存储库中。该解决方案可以解决在一次开发中有太多应用分支，从而导致相互冲突的问题。
CI/CD 中的"CD"指的是持续交付和/或持续部署，这些相关概念有时会交叉使用。两者都事关管道后续阶段的自动化，但它们有时也会单独使用，用于说明自动化程度。
持续交付通常是指开发人员对应用的更改会自动进行错误测试并上传到存储库（如 GitHub 或容器注册表），然后由运维团队将其部署到实时生产环境中。这旨在解决开发和运维团队之间可见性及沟通较差的问题。因此，持续交付的目的就是确保尽可能减少部署新代码时所需的工作量。
持续部署（另一种"CD"）指的是自动将开发人员的更改从存储库发布到生产环境，以供客户使用。它主要为了解决因手动流程降低应用交付速度，从而使运维团队超负荷的问题。持续部署以持续交付的优势为根基，实现了管道后续阶段的自动化。
参考 CI/CD是什么？如何理解持续集成、持续交付和持续部署
13. JS数据类型
JS的数据类型
- string
- number
- boolean
- null
- undefined
- symbol
- bigint
- object
判断数据类型typeof，重点注意null，function的判断和我们说的数据类型不一致
typeof 'a' // string typeof 1 // number typeof true // boolean typeof null // object typeof undefined // undefined typeof Symbol(1) // symbol typeof BigInt(1) // bigint typeof {} // object typeof [] // object typeof function(){} // function 复制代码
判断数据类型Object.prototype.toString.call，比typeof更加全面准确，所以在JS库中经常看见。
Object.prototype.toString.call('a') // [object String] Object.prototype.toString.call(1) // [object Number] Object.prototype.toString.call(true) // [object Boolean] Object.prototype.toString.call(null) // [object Null] Object.prototype.toString.call(undefined) // [object Undefined] Object.prototype.toString.call(Symbol(1)) // [object Symbol] Object.prototype.toString.call(BigInt(1)) // [object BigInt] Object.prototype.toString.call({}) // [object Object] Object.prototype.toString.call([]) // [object Array] Object.prototype.toString.call(function(){}) // [object Function] Object.prototype.toString.call(new RegExp()) // [object RegExp] Object.prototype.toString.call(new Date()) // [object Date] 复制代码
我们一般使用slice(8, -1)来获取上述结果后半部分来判断类型
还有个经常使用的就是instanceof，通过递归对比原型链来判断是否为其实例
[] instanceof Object // true [] instanceof Array // true (function(){}) instanceof Object // true (function(){}) instanceof Function // true // 注意 null instanceof Object // false 复制代码
14.关于百分比
width：父元素width
height：父元素height
margin-left/right/top/right：父元素width
padding-left/right/top/right：父元素width
position:relative/absolute：分别对应父元素width/height
补充：bode-radius：50%，发现会自动对宽高radius都自动成50%
补充：行内元素设置margin/padding-top无效，margin/padding-left有效
15. 两栏布局
- 浮动+margin
<style> /* 注意要清除浮动 */ /* 不清楚浮动将导致底部标签上移 因为浮动元素不占位（脱离文档流） */ .box::after { content: ''; display: block; clear: left; } .left { float: left; width: 100px; height: 100vh; background: deeppink; opacity: 0.5; } .right { height: 100vh; margin-left: 100px; background: deepskyblue; } </style> <div class="box"> <div class="left"></div> <div class="right"></div> </div> 复制代码
- 浮动+BFC，其实和上面一样的实现，只是我们利用BFC来替代margin
<style> /* 注意要清除浮动 */ .box::after { content: ''; display: block; clear: left; } .left { float: left; width: 100px; height: 100vh; background: deeppink; opacity: 0.5; } .right { height: 100vh; overflow: hidden; background: deepskyblue; } </style> <div class="box"> <div class="left"></div> <div class="right"></div> </div> 复制代码
- FLEX就不提了
16. 三栏布局
- 左右浮动+margin
<style> /* 注意要清除浮动 */ .box::after { content: ''; display: block; clear: left; } .left { float: left; width: 100px; height: 100vh; background: deeppink; opacity: 0.5; } .right { float: right; width: 200px; height: 100vh; background: deepskyblue; opacity: 0.5; } .center { height: 100px; margin-left: 100px; margin-right: 200px; background: black; } </style> </head> <div class="box"> <div class="left"></div> <div class="right"></div> <div class="center"></div> </div> 复制代码
- 圣杯布局（左浮动+负边距+负定位）（相比于上面是将center放在了前面，听说有利于SEO）
<style> /* 注意要清除浮动 */ .box::after { content: ''; display: block; clear: left; } .box { margin: 0 200px 0 100px; } .left { position: relative; left: -100px; float: left; width: 100px; height: 100vh; margin-left: -100%; background: deeppink; opacity: 0.5; } .right { position: relative; right: -200px; float: left; width: 200px; height: 100vh; margin-left: -200px; background: deepskyblue; opacity: 0.5; } .center { float: left; width: 100%; height: 100px; background: black; } </style> <div class="box"> <div class="center"></div> <div class="left"></div> <div class="right"></div> </div> 复制代码
- 双飞翼（左浮动+负边距+内部margin）（和圣杯布局差不多，就是最后的定位改为了内部margin）
<style> /* 注意要清除浮动 */ .box::after { content: ''; display: block; clear: left; } .left { float: left; width: 100px; height: 100vh; margin-left: -100%; background: deeppink; opacity: 0.5; } .right { float: left; width: 200px; height: 100vh; margin-left: -200px; background: deepskyblue; opacity: 0.5; } .center { float: left; width: 100%; } .inner { height: 200px; margin-left: 100px; margin-right: 200px; background: black; } </style> <div class="box"> <div class="center"> <div class="inner"></div> </div> <div class="left"></div> <div class="right"></div> </div> 复制代码
16. JS继承方式
- 原型链
- 构造函数（经典）继承
- 组合继承（原型构造）继承
- 原型式（直接继承对象）
- 寄生式继承（直接继承对象再扩展实例）
- 寄生组合式继承（组合继承中添加第三方函数来优化）
17. 设计模式
- 创建型
- 工厂模式
- 单例模式
- 原型模式
- 结构型模式
- 适配器模式
- 代理模式
- 行为型模式
- 策略模式
- 迭代器模式
- 观察者模式(订阅-发布模式)
- 命令模式
- 状态模式
18. vue3和vue2相比
- 性能优化
相比于vue2的响应式实现，vue3使用proxy实现提升了不少性能
- treeShaking
对于Vue2来说，很多功能函数等都是挂载在Vue原型中，无法使用treeshaking。而在
Vue3中，将其抽离为单独模块，可以分离导出。而体现在其它API则例如createApp，createStore，createRouter的import方式。treeShaking可以使app的体积大大减少。
- 组合API（composition API）
Vue2之前是导出一个对象，我们称之为组合式API，我们将不同的功能以类别聚合在一起，例如watch，computed，methods。但是Vue3添加了setUp，并且在其中可以引用生命周期，watch，computed等函数。可以将我们的函数以功能来聚合，这样逻辑更加紧密，也可以很好的进行抽离。
- 生命周期
增加setUp以替代crated，beforeCreate，其调用在beforeCreate之前。并且修改了原来的beforeDestroy，destroyed，改为和mount对称的beforeUnmount，unmounted。并且通过函数onBeforeMount等暴露生命周期。
- 响应式API
Vue3对于响应式的实现修改是比较大的，所以也暴露了一些相关的API
- reactive 创建响应式对象变量
- ref 包装响应式基本类型变量
- toRefs 结构响应式对象变量
- 一些小变化
- 不再需要唯一根节点
- Teleport组件可以将子节点分离到其它地方
- Suspense异步组件的等待状态
- 去掉父子组件通信的sync语法
- v-model可以绑定多个值，默认为modelValue
- v-for和v-if的优先级，在3中if大于for
- template可以绑定key
- 去除filter
- mixin行为改变
- for中refs数组自定义函数
19. Object.is
// 判断值是否全等 Object.is(val1, val2) // 和===区别在于 +0 === -0 NaN !== NaN Object.is(+0, -0) // false Object.is(NaN, NaN) // true 复制代码
20. isNaN 和 Number.isNaN
// isNaN 会使用Number()进行转化 Number.isNaN不会，即Number只对数值类型有效 isNaN(NaN) // true Number.isNaN(NaN) // true isNaN('a') // true Number.isNaN('a') // false 复制代码
21. sticky
.sticky { position: sticky; top: 20px; /* 当元素距离可视顶部大于20px时相对于static定位，当小于等于20px时相对于fixed定位 */ } 复制代码
22. proxy 和 defineProperty
- proxy 是生成代理实例来代理对象，defineProperty是劫持对象下某个属性的set/get
- defineProperty的set中没有返回值，proxy的set要在操作成功返回true否则可能会抛出类型错误
- proxy的可代理的方法多，且不影响代理对象
