自助建设视频网站网站关键词怎么写
项目遇到的问题难点?
老项目版本过低(angular4),相关框架太少,需要升级成新框架。
 1.single-spa
 2.qiankun
 3.iframe
样式环境隔离/js隔离/公共依赖的加载
JS
原型,原型链,new
原型是存放公共属性地方,所有实例都能访问到这些属性
 实例的__proto__指向构造函数的prototype,这就是原型链
 new 是个语法糖,new Pro() 首先创建了一个空对象obj;obj的__proto__指向构造函数的原型;obj成为this的上下文;如果函数没有返回对象则返回this
事件循环机制(宏任务、微任务)
js任务分同步任务和异步任务,同步任务在执行栈执行,一旦遇到异步任务就会将异步任务交给一步模块处理,然后继续执行同步任务。当异步任务有了结果之后,就会在队列里面放一个事件。执行栈执行同步任务完成后,就会读取这个队列,去除队列中的异步任务压入执行栈执行。
 队列中任务分为宏任务和微任务。宏任务包括从队列中获取任务的回调以及放入执行栈中执行。微任务是宏任务执行完成后立即执行的任务。
异步编程
Generator
this的指向
- 严格模式无显示绑定this指向window
 - 非严格模式
 
普通函数 this指向调用函数环境,无明确调用环境时只想window
 new 指向实例
 call,apply,bind
 箭头函数
事件模型
冒泡和捕获,默认是冒泡
防抖和节流
addEventListener
数组常用方法
不改变原数组
 map/filter/foreach/every/some/find/findindex/join/reduce/slice/concat
 改变原数组
 push/pop/shift/unshift/revese/sort/splice
数组去重
1.Arrary.form(new Set(arr))
 2.filter && indexOf
 3.Map
 4.loadsh.uniqWith + loadsh.isEqual
数组排序
1.sort
 2.冒泡排序
 3.快速排序
 4.loadsh.sortBy
数据类型的判断方法
isArray
 typeof
 instanceof
 prototype.toString.call()
 constructor
loadash:
 isUndefined
 isNull
 isNil
TS
interface 和 type的区别
interface 只能描述对象,不能描述原始类型
 type 既可以描述对象也能描述原始类型
 type 可以动态计算属性
 interface 可以重名,重名的会进行合并。type 不能重名
 继承方式:
 interface extends;
 type 使用 &
总结: type 功能比interface强大;优先使用interface
vue
vue2和vue3 的区别
1.编译阶段
diff 算法优化
 一个组件实例对应一个watcher,用到的属性都会标记依赖,属性改变时回通知watcher,关联的组件都会被更新。vue2 更新时会遍历所有的静态节点和动态节点;vue3 在编译阶段做出了优化。
- diff算法优化
 - 增加静态标记,数据更新比较时跳过静态标记的节点
 - 静态提升,被静态标记的节点只会被创建一次,后面在重新渲染时直接复用,
 - 事件监听缓存,事件监听被视为动态节点绑定,开启了事件缓存,diff时直接使用缓存
 - ssr优化-静态内容到达一定量级时会用createStaticVNode在客户端生成一个 static node 然后直接innerHtml
 
2.源码体积
 vue3 源码体积更小,移除了一些不常用的api,同时降低内部模块的耦合性,在tree shanking时,任何一个依赖如ref、reavtived、computed仅仅在使用时会被打包
3.响应式系统
 defineProperty
 proxy
 直接监听整个对象,不需要递归的去监听每个属性。可以监听添加删除和数组
组件的通信
props
 emits
 expose && ref
 v-model
 provide && inject
 pinia
 vuex
 eventsbus
 slot
CSS
盒子模型
box-sizing:
 标准盒模型:content-box width = content
 IE盒模型:border-box width = content + padding + border
BFC
块级格式化上下文
如何创建BFC
- float的值不是none。
 - position的值不是static或者relative。
 - display的值是inline-block、table-cell、flex、table-caption或者inline-flex
 - overflow的值不是visible
 
BFC 布局规则
- BFC就是一个块级元素,块级元素会在垂直方向一个接一个的排列
 - BFC就是页面中的一个隔离的独立容器,容器里的标签不会影响到外部标签
 - 垂直方向的距离由margin决定, 属于同一个BFC的两个相邻的标签外边距会发生重叠
 - 计算BFC的高度时,浮动元素也参与计算
 
BFC 解决的问题
- Float 高度塌陷
 - Margin 边距重叠
 
