国庆长假还没结束，尤大大就把Vue3源码给放了出来，还能不能好好让人好好放个假😨，目前的版本还是 Pre-Alpha，只是大概完成了核心的功能，还不太完整，源码地址：Vue-next， 而正式版本可能要明年才发布了，于是放假回来，便第一时间clone了源码，生啃了起来，还别说，真香~~~😂

源码整体结构还是比较清晰，相比较于Vue2.x做了比较大的调整，代码话说98%都是用ts编写，所以看源码还需要大概了解ts的一些知识。而在还没发布Vue3源码之前，官方也已经给出了 Vue Composition API RFC，可以初步了解Vue3的一些写法和特性，这两天花了些时间大概看了下数据响应部分（网上已经有大佬给出了调试技巧）

关于ios键盘挡住问题（适用于input置底，键盘弹起窗口可滚动）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

/**
  * 解决ios键盘被挡住input问题，适用于input置底，键盘弹起窗口可滚动
  * @param {*} input input类名或选择器
  */
 repairIosInputHidden(input) {
   if (this.isIos()) {
     const inputEl = typeof input === 'string' ? document.querySelector(input) : input;
     let timeout = null;
     // 记录窗口滚动前的滚动高度
     const scrollElement = document.scrollingElement || document.body || document.documentElement;
     const bfscrolltop = scrollElement.scrollTop || window.pageYOffset;
     const setScrollTop = (h) => {
       scrollElement.scrollTop = h;
     };
     const scrollToBottom = () => {
       const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
       setScrollTop(scrollHeight);
     };
     // input聚焦键盘弹起，获取窗口可滚动高度scrollHeight，延时赋值，此时已经是最大可滚动高度了，
     // 即键盘弹出后滚动条会滚动到底部，input会显示在键盘之上
     inputEl.onfocus = () => {
       // 让input显示在可视区域，兼容部分机型原生键盘挡住问题
       inputEl.scrollIntoView(true);
       timeout = setTimeout(() => {
         scrollToBottom();
       }, 300);
     };
     // input失去焦点后，恢复原来滚动位置
     inputEl.onblur = () => {
       clearTimeout(timeout);
       setScrollTop(bfscrolltop);
     };
   }
 }

点击双击事件并存

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

<template>
  <div class="touch-wrapper" @click.stop="onTap">
    <slot></slot>
  </div>
</template>

<script>
let lastClickTime = 0;
let clickTimer;

export default {
  name: 'BaseTouch',
  props: {
    // 单击事件延迟时间
    delay: {
      type: Number,
      default: 300
    }
  },
  methods: {
    onTap(e) {
      const nowTime = new Date().getTime();
      // 在规定时间内再触发点击事件时执行doubleTap，即此时为双击事件，否则为单击事件
      if (nowTime - lastClickTime < this.delay) {
        lastClickTime = 0;
        if (clickTimer) {
          clearTimeout(clickTimer);
        }
        this.$emit('double-tap', e);
      } else {
        lastClickTime = nowTime;
        clickTimer = setTimeout(() => {
          this.$emit('tap', e);
        }, this.delay);
      }
    }
  }
};
</script>

定义

Promise 对象用于表示一个异步操作的最终状态（完成或失败），以及其返回的值。

Promise：为构造函数，接受一个函数作为参数，该函数接收resolve和reject两个参数，由JavaScript引擎提供，无需自己实现。

resolve：其作用是将Promise对象的状态从Pending变为Resolved,在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；

reject：其作用是将Promise对象的状态从从Pending变为Rejected,在异步操作失败时调用，并将异步操作抛出的错误，作为参数传递出去。

Promise对象只有三种状态:

1. 未完成：pending
2. 已完成：resolved(也称fulfilled)
3. 失败：rejected

定义

async function 声明用于定义一个返回 AsyncFunction 对象的异步函数。异步函数是指通过事件循环异步执行的函数，它会通过一个隐式的 Promise 返回其结果。但是如果你的代码使用了异步函数，它的语法和结构会更像是标准的同步函数。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  var result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: 'resolved'
}

asyncCall();

// calling
// resolved

简介

本项目是基于 Taro + Dva + TypeScript 开发的音乐播放器小程序，是个人用于学习taro框架开发的，功能也相对简单，当然也存在一些不足，前期是用taro的redux版本开发，后面发现业务代码和页面耦合度高，就加入了dva，一个基于 redux 和 redux-saga 的数据流方案，这里只用了dva的一个核心 dva-core，用于model层来降低耦合，用 dva-model-extend 复用 model，大大提升了开发体验，效果不错。后台是网易云音乐NeteaseCloudMusicApi 提供的API，目前该项目还没有正式上线到小程序。

优化的原则和方向

前端性能优化的原则其实就是更好的用户体验，具体实现的目标大体有两个：

1. 合理使用内存或缓存，减少请求；
2. 减少CPU或者GPU的计算，达到更快的展现。

前端在性能优化的方向大体有两个：

1. 减少页面体积，提升网络加载
2. 优化页面渲染

初步

最近一段时间在阅读Vue源码，从它的核心原理入手，开始了源码的学习，而其核心原理就是其数据的响应式，讲到Vue的响应式原理，我们可以从它的兼容性说起，Vue不支持IE8以下版本的浏览器，因为Vue是基于 Object.defineProperty 来实现数据响应的，而 Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器的原因；Vue通过Object.defineProperty的 getter/setter 对收集的依赖项进行监听,在属性被访问和修改时通知变化,进而更新视图数据；

受现代JavaScript 的限制 (以及废弃 Object.observe)，Vue不能检测到对象属性的添加或删除。由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让Vue转换它，这样才能让它是响应的。

前言

三月中旬跳完槽之后就好好久没写博客了，跳到某公司之后，怀揣着满腔热水的我又投入了工作中，从面试、办理离职到入职只用了一个星期。这效率也没谁了，入职之后给了一个小项目，用Vue全家桶开发一个简易的个人博客。因为之前自学了解过，于是很快就上手，原本要求用两周的时间用了三天就完成了全部的功能，于是就一周之后就开始安排到项目组进行实际的开发中了，最后被安排到招聘组负责校招的前端开发。一去就搞事情，给我安排了后台移动端的开发，就是为了方便领导手机上使用，基于内部项目都是用了Vue，最后确定用Vue+一个移动端的基于Vue的UI框架Vux进行开发，于是就进入了移动端的踩坑之旅，之前比较少接触移动端开发。
项目开发是基于Vue的UI框架Vux，其实就是一套基于We-UI的一套移动端UI框架，但根据实际情况，一些布局还是得自己去重构。于是就愉快的踩起了移动端开发的坑。

闭包是JavaScript语言的一大特点，可以说再开发的过程中，它无处不在，即使有时候我们都没有发现它的存在。接触JavaScript以来，虽然说是一直有对闭包了解，但是实际应用起来或者分析一些代码的时候却有些吃力。现在回过头总结，才又进一步的揭开了闭包的一层面纱。而在讲闭包之前，我们要先明白JavaScript中又一个重要的知识，那就是JavaScript的内存机制以及作用域，这两个是我们有效理解闭包原理的前提吧。前面我们已经讲了JavaScript的内存机制，那么在这里先理解什么是作用域和作用域链。

作用域与作用域链

之前我们已经了解了JavaScript内存以及垃圾回收的机制了，在讲作用域之前，其实还有一个知识点，那就是JavaScript的执行环境产生的变量对象。

因为现在的公司要求布局的兼容性要兼容到至少IE7，所以对于flexbox这种布局也没有了解太多，之前有听说过flex布局，听起来是一种比较高大上，可以自适应不同尺寸屏幕的布局方式，但是没有正式的去学习了解。flexbox是CSS3算是比较新的一个特性，最近刚好有时间也有兴趣就了解了，觉得还是要做一下总结，不然很快又忘了😰。

flexbox布局意为弹性布局，是css3的弹性盒子模式，用它可以告别float布局，也可以简单实现垂直居中，并且具有响应式，就是可以自动调整，计算元素在容器空间中的大小，可以说：完美~~~（此处应有标志性动作)

Flex布局背后的主要思想是给容器控制项目（Flex项目）的宽度、高度的能力，使用Flex项目可以自动填满容器的可用空间（主要是适应所有类型的显示设备和屏幕大小）。Flex容器使用Flex项目可以自动放大与收缩，用来填补可用的空闲空间。