开发工具转换

登录百度小程序开发工具，在工具菜单，有一个一键转换微信的小程序为百度小程序。（前提：有审核通过的appid，并且登录开发者工具）

npm 工具

wx2swan

1
2
3
4
5
6

// 安装： 
npm i -g wx2swan

// 转换：
// wx2swan 微信小程序的目录 (生成swan的目录)
wx2swan ./test/demo ./test/swanDemo

手工转换

微信小程序如何转换成百度小程序1

微信小程序如何转换成百度小程序2

参考链接

微信小程序如何转换成百度小程序1

微信小程序如何转换成百度小程序2

微信和小程序大同小异, 这里通过对比两者的不同点帮助知识迁移.

基础

框架

配置

window对象设置

微信

1
2
3
4
5
6

{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTitleText": "微信接口功能演示",
    "enablePullDownRefresh":true,
    "disableScroll":true
  }

支付宝

1
2
3
4
5
6

{
	"titleBarColor: "#ffffff",
	"defaultTitle": "页面标题",
	"pullRefresh": true,
	"allowsBounceVertical": "YES"
}

tabBar

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

{
"tabBar": {
        "color": "#999",
        "selectedColor": "#333",
        "backgroundColor": "#ffffff",
        "list": [
            {
                "pagePath": "pages/index/index",
                "text": "首页",
                "iconPath": "icons/1.png"
                "selectedIconPath": "icons/1_c.png",
            }
        ]
    }
}

支付宝

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

{
  "tabBar": {
    "textColor": "#999",
    "selectedColor": "#333",
    "backgroundColor": "#ffffff",
    "items": [
      {
        "pagePath": "pages/index/index",
        "name": "首页"
        "icon":"icons/1.png",
        "activeIcon":"icons/1_c.png"
      }
    ]
  }
}

逻辑层

JS模块化, 支付宝支持 ES6 语法

支付宝支持引入社区上的第三反方NPM，微信则对引入的NPM有规定的格式。

微信

1
2
3

const foo = require('foo');
...
module.exports.bar = bar;

支付宝

1
2
3

import foo from 'foo'
...
export default bar;

视图层

if for

支付宝条件循环和列表循环和微信不同的地方是修改了命名空间, 如 wx:if->a:if

数据绑定

支付宝支持对象扩展符...

1

<template is="objectCombine" data="{{...obj1, ...obj2, e: 5}}"></template>

自定义脚本

微信中使用wxs, 支付宝中使用sjs

自定义组件

支付宝

示例

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

// /components/customer/index.json
{
  "component": true
}

// /components/customer/index.js
Component({
  mixins: [], // minxin 方便复用代码
  data: { x: 1 }, // 组件内部数据
  props: { y: 1 }, // 可给外部传入的属性添加默认值
  didMount(){}, // 生命周期函数
  didUpdate(){},
  didUnmount(){},
  methods: { // 自定义事件
    handleTap() {
  	  this.setData({ x: this.data.x + 1}); // 可使用 setData 改变内部属性
    }, 
  },
})

1
2
3
4
5
6
7
8

<!-- // /components/customer/index.axml -->
<view>
  <view>x: {{x}}</view>
  <button onTap="handleTap">plusOne</button>
  <slot>
    <view>default slot & default value</view>
  </slot>
</view>

使用

1
2
3
4
5
6

// /pages/index/index.json
{
  "usingComponents": {
    "customer": "/components/customer/index"
  }
}

1
2
3
4

<!-- /pages/index/index.axml -->
<view>
  <customer />
</view>

组件

支付宝多了很多微信没有的扩展组件, 非常有参考价值

mini-antui

api

常用api对比

参考链接

微信小程序官方文档

支付宝小程序官方文档

支付宝小程序与微信小程序的不同点对比

云开发文档

云学院教程

云开发介绍

传统小程序需要架构完整的小程序请求端来对数据进行处理, 对开发者的运维要求比较高.

云开发为开发者提供完整的云端支持，弱化后端和运维概念，无需搭建服务器，使用平台提供的 API 进行核心业务开发，即可实现快速上线和迭代，同时这一能力，同开发者已经使用的云服务相互兼容，并不互斥。

云开发基本能力

• 数据库：一个既可在小程序前端操作，也能在云函数中读写的 JSON 数据库
• 存储：在小程序前端直接上传/下载云端文件，在云开发控制台可视化管理
• 云函数：在云端运行的代码，微信私有协议天然鉴权，开发者只需编写自身业务逻辑代码

云开发流程

1. 点击IDE云开发按钮开通
2. 初始化
3. 开发(调用api,使用云服务)
4. 上传发布

云开发项目初始化

• cloudfunctionRoot 方法存储云函数
• wx.cloud.init 方法初始化函数
• env 定义服务默认环境

cloudfunctionRoot

project.config.json 中增加了字段 cloudfunctionRoot 用于指定存放云函数的目录

云开发能力从基础库 2.2.3 开始支持, 如果兼容之前的版本, 要在 app.json 中添加 "could":true 字段

wx.cloud.init

在小程序端开始使用云能力前，需先调用 wx.cloud.init 方法完成云能力初始化（注意小程序需先开通云服务，开通的方法是点击工具栏左上角的 “控制台” 按钮）。因此，如果要使用云能力，通常我们在小程序初始化时即调用这个方法。

env

env 是 wx.cloud.init 的一个参数
开通云开发之前会分配两个环境, 一般一个作为正式环境, 一个作为测试环境

基本操作

云数据库

简而言是, 就是 MongoDB.

有方便的权限管理

云存储

• wx.cloud.uploadFile 上传文件
• wx.cloud.downloadFile 下载文件
• wx.cloud.deleteFile 删除文件
• wx.cloud.getTempFileURL 换取临时链接

云函数

详情见文档

云开发的云函数的独特优势在于与微信登录鉴权的无缝整合。当小程序端调用云函数时，云函数的传入参数中会被注入小程序端用户的 openid，开发者无需校验 openid 的正确性，因为微信已经完成了这部分鉴权，开发者可以直接使用该 openid。与 openid 一起同时注入云函数的还有小程序的 appid。

从小程序端调用云函数时，开发者可以在云函数内使用 wx-server-sdk 提供的 getWXContext 方法获取到每次调用的上下文（appid、openid 等），无需维护复杂的鉴权机制，即可获取天然可信任的用户登录态（openid）。

• TCBRouter koa风格的路由, 云函数只能使用20个, 通过TCBRouter可以解决这个问题
• 可以简单对接模板消息
  • 每一次 form 表单提交时可以获取到用于发布模板消息的 from_id
  • from_id 仅能推送一次模板消息
  • 支付后, 使用 prepay_id 可以推送三次模板消息

demo

https://github.com/taohong000/yun_mybook

原文链接: https://segmentfault.com/a/1190000007688656

英文pdf: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

常用 General

基础编辑 Basic editing

导航 Navigation

搜索和替换 Search and replace

多光标和选择 Multi-cursor and selection

丰富的语言编辑 Rich languages editing

编辑器管理 Editor management

文件管理 File management

显示 Display

调试 Debug

集成终端 Integrated terminal

官方文档-代码导航

主命令框

最重要的功能就是F1或Ctrl+Shift+P打开的命令面板了，在这个命令框里可以执行VSCode的任何一条命令，甚至关闭这个编辑器。
按一下Backspace会进入到Ctrl+P模式里
在Ctrl+P下输入>又可以回到Ctrl+Shift+P模式。
在Ctrl+P窗口下还可以直接输入文件名，跳转到文件

快速文件导航

在浏览项目时，Explorer非常适合在文件之间导航。但是，当您处理任务时，您会发现自己在同一组文件之间快速跳转。VS Code提供了两个功能强大的命令，可以通过易于使用的键绑定在文件中导航和跨文件导航。

按住Ctrl键并按Tab键查看编辑器组中打开的所有文件的列表。要打开其中一个文件，请再次使用Tab选择要导航到的文件，然后释放Ctrl以将其打开。

或者，您可以使用Alt + Left和Alt + Right在文件和编辑位置之间导航。如果您在同一文件的不同行之间跳转，这些快捷方式允许您轻松地在这些位置之间导航。

提示：键入Ctrl + P（快速打开）时，可以按名称打开任何文件。

转到定义

如果某种语言支持它，您可以按F12转到符号的定义。

如果按Ctrl键并将鼠标悬停在符号上，将显示声明的预览：

提示：您可以使用Ctrl +单击跳转到定义，或使用Ctrl + Alt +单击打开侧面的定义。

转到类型定义

某些语言还支持通过从编辑器上下文菜单或命令选项板运行“ 转到类型定义”命令来跳转到符号的类型定义。这将带您到符号类型的定义。命令editor.action.goToTypeDefinition默认情况下不绑定到键盘快捷键，但您可以添加自己的自定义键绑定。

转到引用

语言还可以通过按Ctrl+F12支持跳转到符号的实现。对于接口，它显示了该接口的所有实现者，对于抽象方法，这显示了该方法的所有具体实现。

转到符号

您可以使用Ctrl+Shift+O在文件内导航符号。通过键入：符号将按类别分组。按向上或向下键并导航到所需的位置。

按名称打开符号

某些语言支持使用Ctrl+T跨文件跳转到符号。键入要导航到的类型的第一个字母，无论哪个文件包含它，然后按Enter键。

窥视

我们认为没有什么比一个大的上下文切换更糟糕了，当你想要的只是快速检查一些东西。 这就是为什么我们支持偷看的编辑。 当您执行Peek References搜索（通过Shift+F12 ）或Peek Definition （通过Alt+F12 ）时，我们将结果嵌入到内联中：

您可以在窥视编辑器中的不同引用之间导航，并在那里进行快速编辑。 单击隐藏的编辑器文件名或双击结果列表将在外部编辑器中打开引用。

提示：此外，如果您按下Escape或在peek编辑器区域中双击，则会关闭查看窗口。您可以使用editor.stablePeek 设置禁用此行为。

##错误和警告
警告或错误可以通过已配置的任务，丰富的语言服务或者在后台不断分析代码的连接器(linters)生成。由于我们喜欢无错误的代码，警告和错误会出现在多个地方：

• 在状态栏中，有一个所有错误和警告计数的摘要。
• 您可以单击摘要或按Ctrl+Shift+M以显示“问题”面板，其中包含所有当前错误的列表。
• 如果打开包含错误或警告的文件，它们将与文本和概述标尺一起呈现。

提示：要循环显示当前文件中的错误或警告，可以按F8或Shift+F8 ，这将显示详细说明问题的内联区域和可能的代码操作（如果可用）：

警告和错误可以提供代码操作（也称为快速修复）以帮助解决问题。 这些将作为灯泡显示在左边距的编辑器中。 单击灯泡将显示“代码操作”选项或执行操作。

查找替换

• 查找 Ctrl+F
• 查找替换 Ctrl+H
• 整个文件夹中查找 Ctrl+Shift+F
• 匹配符：
  • * to match one or more characters in a path segment
  • ? to match on one character in a path segment
  • ** to match any number of path segments ,including none
  • {} to group conditions (e.g. {**/*.html,**/*.txt} matches all html and txt files)
  • [] to declare a range of characters to match (e.g., example.[0-9] to match on example.0,example.1,…

插件

Bookmarks

这是一款给文件打上书签, 方便快速跳转的插件

基础概念

Box

一个页面是由很多个 Box 组成的，元素的类型和 display 属性决定了这个 Box 的类型。不同类型的 Box，会参与不同的 Formatting Context。

Block level 的 box 会参与形成 BFC，比如 display 值为 block，list-item，table的元素。

Inline level 的 box 会参与形成 IFC，比如 display 值为 inline，inline-table，inline-block 的元素。

W3C文档block-level

FC(Formatting Context)

它是W3C CSS2.1规范中的一个概念，定义的是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

常见的Formatting Context 有：Block Formatting Context（BFC | 块级格式化上下文） 和 Inline Formatting Context（IFC |行内格式化上下文）。

CSS3 新增规范，GFC（GridLayout Formatting Contexts）以及 FFC（Flex Formatting Context）。

BFC

BFC 布局规则

1. 内部的Box会在垂直方向，一个接一个地放置。
2. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3. 每个元素的左外边缘（margin-left)， 与包含块的左边（contain box left）相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。除非这个元素自己形成了一个新的BFC。
4. BFC的区域不会与float box重叠。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6. 计算BFC的高度时，浮动元素也参与计算

W3C文档block-formatting

怎样形成一个BFC？

1. 根元素或其它包含它的元素
2. 浮动 (元素的 float 不是 none)
3. 绝对定位的元素 (元素具有 position 为 absolute 或 fixed)
4. 非块级元素具有 display: inline-block，table-cell, table-caption, flex, inline-flex
5. 块级元素具有overflow ，且值不是 visible

BFC用处

1. 清除浮动
2. 布局：自适应两栏布局
3. 防止垂直margin合并

IFC

布局规则

在行内格式化上下文中，框(boxes)一个接一个地水平排列，起点是包含块的顶部。水平方向上的 margin，border 和 padding在框之间得到保留。框在垂直方向上可以以不同的方式对齐：它们的顶部或底部对齐，或根据其中文字的基线对齐。包含那些框的长方形区域，会形成一行，叫做行框。

行盒(line box)

1. 包含来自同一行的盒的矩形区域叫做行盒(line box)
2. line box的宽度由包含块和float情况决定,一般来说,line box的宽度等于包含块两边之间的宽度,然而float可以插入到包含块和行盒边之间,如果有float,那么line box的宽度会比没有float时小
3. line box的高度由line-height决定,而line box之间的高度各不相同(比如只含文本的line box高度与包含图片的line box高度之间)
4. line box的高度能够容纳它包含的所有盒,当盒的高度小于行盒的高度(例如,如果盒是baseline对齐)时,盒的竖直对齐方式由vertical-align属性决定
5. 当一行的行内级盒的总宽度小于它们所在的line box的宽度时，它们在行盒里的水平分布由text-align属性决定。如果该属性值为justify，用户代理可能会拉伸行内盒（不包括inline-table和inline-block盒）里的空白和字（间距）

行内盒(inline box)

1. 一个inline box是一个（特殊的）行内级盒，其内容参与了它的包含行内格式化上下文
2. 当一个inline box超出一个line box的宽度时，它会被分成几个盒，并且这些盒会跨多line box分布。如果一个inline-block无法分割（例如，如果该inline box含有一个单个字符，或者特定语言的单词分隔规则不允许在该inline box里分隔，或如果该inline box受到了一个值为nowrap或者pre的white-space的影响），那么该inline box会从line box溢出
3. 当一个inline box被分割后，margin，border和padding在发生分割的地方（或者在任何分割处，如果有多处的话）不会有可视化效果
4. 同一个line box里的inline box也可能因为双向（bidirectional）文本处理而被分割成几个盒

Line boxes are created as needed to hold inline-level content within an inline formatting context. Line boxes that contain no text, no preserved white space, no inline elements with non-zero margins, padding, or borders, and no other in-flow content (such as images, inline blocks or inline tables), and do not end with a preserved newline must be treated as zero-height line boxes for the purposes of determining the positions of any elements inside of them, and must be treated as not existing for any other purpose.

需要盛放（hold）一个行内格式化上下文中的行内级内容时，创建一个line box。不含文本、保留空白符（preserved white space）、margin，padding或者border非0的行内元素、其它流内内容（例如，图片，inline block或者inline table），并且不以保留换行符（preserved newline）结束的line box必须被当作一个0高度的line box，为了确定它里面所有元素的位置，而其它时候（for any other purpose）必须当它不存在

W3C inline-formatting

GFC

GFC(GridLayout Formatting Contexts)直译为”网格布局格式化上下文”，当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，我们可以通过在网格容器（grid container）上定义网格定义行（grid definition rows）和网格定义列（grid definition columns）属性各在网格项目（grid item）上定义网格行（grid row）和网格列（grid columns）为每一个网格项目（grid item）定义位置和空间。

那么GFC有什么用呢，和table又有什么区别呢？首先同样是一个二维的表格，但GridLayout会有更加丰富的属性来控制行列，控制对齐以及更为精细的渲染语义和控制。

FFC

FFC(Flex Formatting Contexts)直译为”自适应格式化上下文”，display值为flex或者inline-flex的元素将会生成自适应容器（flex container）.

Flex Box 由伸缩容器和伸缩项目组成。通过设置元素的 display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为 flex 的容器被渲染为一个块级元素，而设置为 inline-flex 的容器则渲染为一个行内元素。

伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。简单地说，Flexbox 定义了伸缩容器内伸缩项目该如何布局。

参考链接

1. BFC与IFC概念理解+布局规则+形成方法+用处
2. 行内格式化上下文(Inline formatting contexts)
3. [译]:BFC与IFC
4. W3C normal flow
5. css3之BFC、IFC、GFC和FFC

概览

任务队列

Js 中，有两类任务队列：宏任务队列（macro tasks）和微任务队列（micro tasks）。宏任务队列可以有多个，微任务队列只有一个。那么什么任务，会分到哪个队列呢？

• 宏任务：script（全局任务）, setTimeout, setInterval, setImmediate, I/O, UI rendering.
• 微任务：process.nextTick, Promise, Object.observer, MutationObserver.

执行顺序

先执行主线程，再取微任务，再取宏任务

float 的9条规则

###　规则1

原文:The left outer edge of a left-floating box may not be to the left of the left edge of its containing block. An analogous rule holds for right-floating elements.

译文:左浮动的盒子的左边界不会超出容器的左边界，右浮动同理.

规则2

原文:If the current box is left-floating, and there are any left-floating boxes generated by elements earlier in the source document, then for each such earlier box, either the left outer edge of the current box must be to the right of the right outer edge of the earlier box, or its top must be lower than the bottom of the earlier box. Analogous rules hold for right-floating boxes.

译文:如果盒子是左浮动的,那么在html文档中晚出现的左浮动盒子只允许出现在先出现的左浮动盒子的右边或者晚出现的左浮动盒子的顶部必须在早出现左浮动盒子的底部之下。右浮动同理.

规则3

原文:The right outer edge of a left-floating box may not be to the right of the left outer edge of any right-floating box that is next to it. Analogous rules hold for right-floating elements.

译文:左浮动盒子的右外边缘可能不在其旁边的任何右浮动框的左外边缘的右边，右浮动同理.

规则4

原文:A floating box’s outer top may not be higher than the top of its containing block. When the float occurs between two collapsing margins, the float is positioned as if it had an otherwise empty anonymous block parent taking part in the flow. The position of such a parent is defined by the rules in the section on margin collapsing.

译文:浮动盒子的顶部不能超出容器的顶部边界

规则5

原文:The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.

译文:浮动盒子的顶部不会超出在html文档中早出现的的块级元素(block)或者是浮动元素的顶部

规则6

原文:The outer top of an element’s floating box may not be higher than the top of any line-box containing a box generated by an element earlier in the source document.

译文:浮动盒子的顶部不会超出在html文档中早出现的包含盒子的line-box元素顶部

规则7

原文:A left-floating box that has another left-floating box to its left may not have its right outer edge to the right of its containing block’s right edge. (Loosely: a left float may not stick out at the right edge, unless it is already as far to the left as possible.) An analogous rule holds for right-floating elements.

译文:一个左浮动元素右边的另一个左浮动元素的右边界不会超出容器的右边界,右浮动同理

如果一行之内要放第二个浮动元素，如果放不下了，那就换行。

规则8

原文:A floating box must be placed as high as possible.

译文:一个浮动盒子应该放的尽可能的高

规则9

原文:A left-floating box must be put as far to the left as possible, a right-floating box as far to the right as possible. A higher position is preferred over one that is further to the left/right.

译文:一个左浮动元素应该放的尽可能的靠左，右浮动元素应该被放的尽可能的靠右。当元素既可以放置”最高”又可以”最右”的时候，优先考虑”最高”。

为什么盒子五不直接放在盒子一下面，这是因为当一个元素既可以放的最左（最右）和最高的时候，优先选择最高，所以这里就放在了盒子四的下面。

finally

最后说两句，浮动元素其实对在它出现之前的元素影响不大，但是由于浮动是使元素脱离了文档流，那么在浮动元素之后出现的元素：

• 块元素:直接无视浮动元素，该怎么显示就怎么显示，并且会被浮动元素覆盖。
• 行内元素:行内元素会环绕在浮动元素周围。

浮动元素的业界公认特点

1. 元素被视作块级元素，相当于display设置为”block”；
2. 元素具备包裹性，会根据它所包含的元素实现宽度、高度自适应；
3. 浮动元素前后的块级兄弟元素忽视浮动元素的而占据它的位置，并且元素会处在浮动元素的下层（并且无法通过z-index属性改变他们的层叠位置），但它的内部文字和其他行内元素都会环绕浮动元素；
4. 浮动元素前后的行内元素环绕浮动元素排列；
5. 浮动元素之前的元素如果也是浮动元素，且方向相同，它会紧跟在它们后面；父元素宽度不够，换行展示；
6. 浮动元素之间的水平间距不会重叠；
7. 当包含元素中只有浮动元素时，包含元素将会高度塌陷；
8. 浮动元素的父元素的非浮动兄弟元素，忽视浮动元素存在，覆盖浮动元素；
9. 浮动元素的父元素的浮动兄弟元素，会跟随浮动元素布局，仿佛处在同一父元素中。

清除浮动

清除浮动的方法, 主要分为两类

• 利用clear属性清除浮动
• 利用bfc原理包容浮动

参考链接

• W3 float-rules
• CSS Float nine rules
• 回归CSS标准之Float

原因

导致这个问题的本质原因可能是Android在排版计算的时候参考了primyfont字体的相关属性（即HHead Ascent、HHead Descent等），而primyfont的查找是看font-family里哪个字体在fonts.xml里第一个匹配上，而原生Android下中文字体是没有family name的，导致匹配上的始终不是中文字体，所以解决这个问题就要在font-family里显式申明中文，或者通过什么方法保证所有字符都fallback到中文字体。根据这2个思路，目前我找到了2个解决方案：

1. 针对Android 7.0+设备：<html>上设置 lang 属性：<html lang="zh-cmn-Hans">，同时font-family不指定英文，如 font-family: sans-serif 。这个方法是利用了浏览器的字体fallback机制，让英文也使用中文字体来展示，blink早期的内核在fallback机制上存在问题，Android 7.0+才能ok，早期的内核下会导致英文fallback到Noto Sans Myanmar，这个字体非常丑。
2. 针对MIUI 8.0+设备：设置 font-family: miui 。这个方案就是显式申明中文的方案，MIUI在8.0+上内置了小米兰亭，同时在fonts.xml里给这个字体指定了family name：miui，所以我们可以直接设置。

作者：周祺
链接：https://www.zhihu.com/question/39516424/answer/274374076

文字明显偏上的情况

在 Android 设备上文字明显偏上的情况一般有两种:

1. 字体小于12px
2. 文字, 行高, 容器高度为奇数

各个居中方法的对比

字体小于12px

结论: 放大缩小法和添加border有效.

文字, 行高, 容器高度为奇数

结论: 修改容器高度, 放大缩小法和添加border有效.

es6

模块化的使用和编译环境

…

Class 与 JS 构造函数的区别

Promise的用法

1. new Promise 实例，而且要 return
2. new Promise 时要传入函数，函数有 reslove reject 两个参数
3. 成功时执行 resolve() 失败时执行 reject()
4. then 监听结果

ES6 其他常用功能

1. let/const
2. 多行字符串/模版变量
3. 结构赋值
4. 块级作用域
5. 函数默认参数
6. 箭头函数

异步

什么是单线程，和异步有何关系

• 单线程 - 只有一个线程，同时只能做一件事
• 原因 - 避免 DOM 渲染的冲突
• 解决方案 - 异步

什么是 event-loop

• 事件轮询，JS 实现异步的具体解决方案
• 同步代码，直接执行
• 异步函数先放在 异步队列 中
• 待同步函数执行完毕，轮询执行 异步队列 的函数

JS中的异步操作：

1. 定时器都是异步操作
2. 事件绑定都是异步操作
3. AJAX中一般我们都采取异步操作（也可以同步）
4. 回调函数可以理解为异步（不是严谨的异步操作）
   剩下的都是同步处理

Promise 的标准

all/race

• Promise.all 待全部完成后,执行then
• Promise.race 一个promise 完成后,执行then

状态

三种状态：pending fulfilled rejected

then

• Promise 实例必须实现 then 这个方法
• then() 必须可以接收两个函数作为参数
• then() 返回的必须是一个 Promise 实例

async/await 的使用

• 基本语法
• 使用了 Promise ，并没有和 Promise 冲突
• 完全是同步的写法，再也没有回调函数
• 但是：改变不了 JS 单线程、异步的本质

原型

原型如何实际应用

原型如何满足扩展

vdom

…

MVVM

之前使用jquery和现在使用vue或React框架的区别

• 数据和视图的分离，解耦（开放封闭原则）
• 以数据驱动视图，只关心数据变化，DOM 操作被封装

你如何理解MVVM

• Model - 模型、数据
• View - 视图、模板（视图和模型是分离的）
• ViewModel - 连接 Model 和 View

vue 如何实现响应式

vue 三要素

• 响应式：vue 如何监听到 data 的每个属性变化？
• 模板引擎：vue 的模板如何被解析，指令如何处理？
• 渲染：vue 的模板如何被渲染成 html ？以及渲染过程

答案

• 关键是理解 Object.defineProperty
• 将 data 的属性代理到 vm 上

vue 如何解析模版

• 模板：字符串，有逻辑，嵌入 JS 变量……
• 模板必须转换为 JS 代码（有逻辑、渲染 html、JS 变量）
• render 函数是什么样子的
• render 函数执行是返回 vnode
• updateComponent

介绍 vue 的实现流程

1. 解析模板成 render 函数
2. 响应式开始监听
3. 首次渲染，显示页面，且绑定依赖
4. data 属性变化，触发 rerender

组件化

…