11月22-11月28总结，pc端适配、uniapp小程序下载三种情况、原型、继承、好用的函数、计算机组成原理、小程序和游览器的线程区别、深入vue、发布订阅模式与观察者模式

pc端适配

VW和VH

x/100vw = z/1920，一边是vw，一边是设计稿的
x代表转化后的多数个vw，z代表在设计稿获取的宽度
写一个宽高的sass函数

注意：要知道移动端文字最小只能去到10像素，pc端大多只能去到12像素

1.zoom整体缩放，火狐支持较低
2.transform：scale（）整体放大缩小，ie9以下不支持
3.监听窗口大小变化，px转rem，可能出现文字掉下第二行
3.媒体查询，是完美适配，但是代码量会比较多

最后我感觉可以通rem是最完美的。
可以参考H5适配的做法，做一个pc的px转rem的插件，通过修改1rem等于多少px，和不同分辨率下的html的font-size的大小，设置每个元素（宽高，border等）的最终大小，每个元素的值通过sass的函数名来设置。max-height和max-width可以根据需要使用

// PX 转 rem 
@function px2Rem($px, $base-font-size: 19.2px) {
	// 省略一大堆代码
    @return ($px / $base-font-size) * 1rem; 
}

测试

@media only screen and (max-width: 1366px) {
   html{
        font-size:13.66px;
    }
}
#test{
   width:px2Rem(273px) 
}
//输出
#test{
   width:14.21875rem;
}

一、小程序下载三种情况

1.网络图片下载到本地

uni.downloadFile({url}）

2.临时图片下载

uni.saveImageToPhotosAlbum({ filePath:res.tempFilePath}）

3.canvas数据图片下载：canvas转本地图片地址，再调用临时图片下载

   uni.canvasToTempFilePath({
      canvasId:'firstCanvas',
      destWidth:295,
      destHeight:413,
      success:(res) => {
        uni.saveImageToPhotosAlbum({
          filePath:res.tempFilePath,
          success:(_res) => {
            // 3秒后展示分享页
            setTimeout(() => {
              this.showSharePage()
            },3000)
          }
        })
      }
    })

二、原型：

确定原型和实例的关系
instance instanceof Object
isPrototypeOf() ：Object.prototype.isPrototypeOf(instance)

三、继承：

构造函数继承：
缺点：父辈的原型没被继承，每次创建子的实例都要调用一次父辈方法
优点：避免引用类型的属性被共享，可以向父辈传参

原型链继承：
缺点：引用类型的属性被共享，不可向父辈传参

组合继承：
优点：融合原型链继承和构造函数继承的优点
缺点：两次调用父辈方法，子类继承的父类属性，一组在子类实例上，一组在子类原型上，多余的属性。

优化2：

优化最终版：

四：好用的函数

随机数：

性能计算

五、计算机组成原理

又例如从键盘输入a+b这个指令，如何通过cpu的调度输出到屏幕上呢？
控制器-输入设备-存储器-运算器-存储器

js里面0.1 + 0.2 是不等于0.3的，为什么呢？
计算机存储数据是以二进制的形式存储的，十进制转二进制的时候0.1是取不到一个完整的二进制，0.2同理。取得到完整的二进制比如0.25的二进制是0.01，因此0.25+0.25===0.5//true

3.高级语言一般有两种方式转换为机器语言
1.一种是直接借助编译器，将高级语言转换为二进制代码，比如c，这样c运行起来就特别快，因为编译后是机器语言，直接就能在系统上跑，但问题是，编译的速度可能会比较慢。
2.一种是解释性的，比如 js，是将代码翻译一行成机器语言（中间可能会先翻译为汇编代码或者字节码），解释一行，执行一行

七、同一个页面下，小程序和游览器差不多用两个线程管理

小程序：
渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。
游览器：
游览器的界面使用了GUI渲染线程进行渲染；逻辑层采用JS引擎线程运行JS脚本。JS引擎一直等待着任务队列中任务的到来
事件触发线程：
归属于浏览器而不是JS引擎，用来控制事件循环，当JS引擎执行代码块如setTimeOut时（也可来自浏览器内核的其他线程,如鼠标点击、AJAX异步请求等），会将对应任务添加到事件线程中，当对应的事件符合触发条件被触发时，该线程会把事件添加到待处理队列的队尾，等待JS引擎的处理
定时触发器线程：
传说中的setInterval与setTimeout所在线程，浏览器定时计数器并不是由JavaScript引擎计数的,
因此通过单独线程来计时并触发定时
异步http请求线程：
在XMLHttpRequest在连接后是通过浏览器新开一个线程请求，将检测到状态变更时，如果设置有回调函数，异步线程就产生状态变更事件，将这个回调再放入事件队列中。再由JavaScript引擎执行。

八、深入vue

生命周期：
vue响应式原理：
8.1.概念：
1.数据驱动；
2.响应式的核心原理：
2.1.vue2:给data属性赋值一个对象，利用object.defineProperty会把对象的属性设置get和set，当调用属性和设置属性时候，数据劫持更新视图,（遍历循环对象的属性赋值，递归）
2.2.vue3:proxy代理data的属性
3.发布订阅模式和观察者模式：
3.1发布订阅模式：发布者，订阅者，调度中心。
3.2观察者模式：vue响应式也用了。发布者：[] ，添加观察者的数组中，发布通知；观察者：updata，
8.2.模拟vue：
8.2.1接受初始化参数，把data注入vue中并转成gerrer/setter（_proxyData）；
8.2.2调用observer监听data的所有属性，（对象中的属性也是响应式；
8.2.3给属性赋值对象，对象的属性也是响应式的,）；
8.2.4调用compiler解析指令或主差值表达式；
8.2.5dep类观察者模式，dep是通知watcher更新视图，watcher更新视图，
8.3.面试经常问的问题：给一个vue实例新增一个成员是否是响应式，给属性赋值是否是响应式，
8.4.为学习vue源码做铺垫

九、发布订阅模式与观察者模式

发布订阅模式与观察者模式和区别
前者需要一个调度中心，后者没有调度中心并且订阅需要知道观察者的存在