Fork me on GitHub
一共有 57 篇文章,分页:1 / 12

事件机制详解

事件流

当用户鼠标点击或者程序主动触发都会产生事件,比如用户点击了网页,那这个过程到底发生了什么?

graph LR 用户-->鼠标 鼠标-->操作系统 操作系统-->浏览器 浏览器-->网页

此时网页已经知道了用户点击了鼠标,那么首先它需要知道当前鼠标指针所在的屏幕坐标screenX,screenY,这个可以通过操作系统 API 得到

  • 捕获/碰撞检测

得到屏幕坐标之后,接下来需要知道的就是用户到底点了网页上的具体哪个元素,我们知道网页内所有元素是一颗 dom 树,可以这样理解,渲染到屏幕上就是一个一个层次交叠的方块,每个元素都有自己的坐标xy和宽高这个信息,其中坐标 xy 可以映射为屏幕上的坐标 xy,我们先把这个信息称之为bound,代表了该元素在屏幕上的边界信息

body {x:0,y:0,w:800,h:250} div.wrap {x:50,y:50,w:500,h:150} div.content {x:95,y:140,w:400,h:80}

此时浏览器会从树的根部遍历整棵树,把所有bound包含了screenX,screenY的元素都找出来,假设上图的红点就是我们的点击位置,可以想象为一颗子弹从屏幕外射向屏幕里面,那么我们得到三个元素都和这个子弹发生了碰撞:body > div.wrap > div.content,这个过程称之为捕获阶段

阅读全文 »»

什么是反向代理?

最近有人让我讲解反向代理,简单解释一下

  • 正向代理

客户端把访问请求传给代理nginx,让nginx代为执行访问请求,然后把请求结果还给客户端,这个过程中,nginx根据来源请求,再解析其中的域名,与远端服务器交互

graph BT 客户端-->nginx nginx-->baidu nginx-->google nginx-->facebook

正向代理的作用:解决客户端不能直接访问远端服务器,而代理端所在机器可以访问远端服务器的情况

阅读全文 »»

颜色的世界

颜色表示方法

自然界的颜色有无数种,我们用数字来表示有限的颜色种类,根据三基色原理,人眼对红、绿、蓝最为敏感,大多数的颜色可以通过红、绿、蓝三色按照不同的比例合成产生,比如:红色+绿色=黄色绿色+蓝色=青色红色+青色=白色(二次叠加)

R、G、B 三个字节表示颜色,可以表示 256*256*256 = 16777216 种颜色,这种颜色我们称之为真彩色,是目前电脑能表示的最高色彩,也是普遍认为人眼对颜色的最大分辨能力。

我们平常所说的 RGBA 里的 A(alpha)指的是透明度,透明度不是颜色的一部分,而是用于图层/颜色混合时的叠加度量值

由于早期电脑内存宝贵,一张图片如果使用真彩色存储比较浪费,所以早期电脑程序使用了减配的字节来表示 rgb,比如:

  • 用一个字节表示:RGB332(3+3+2=8 位色):(2^3)(2^3)(2^2)=256(256 Color) 俗称 256 色

  • 用两个字节表示:RGB555(5+5+5=15 位色):(2^5)(2^5)(2^5)=32768(32768/1024=32, 32K Color) 有 1 位未使用

  • 另外一种用两个字节表示:RGB565(5+6+5=16 位色):(2^5)(2^6)(2^5)=65536(65536/1024=32, 64K Color) 由于人眼对绿色最敏感,所有绿色分量占比会多一些

我们常用的RGBRGBA格式属于RGB888,就是 RGB 各个分量分别占用 8 位,除了 RGB,在印刷工业领域还会使用HSL表示法,HSL 分别为 hue(色相)、saturation(饱和度)、lightness(亮度)

他们都是可以通过计算公式互相转换的,在内存存储上有区别之外,本质上没有区别

阅读全文 »»

Js 执行机制/eventloop

基本概念

graph BT stack((stack
函数调用栈)) queue((queue
事件队列)) heap((heap
对象分配区))
function c() {
    a()
    b()
}

function m() {
    c()
}
m()

函数调用栈的过程(从栈底往栈顶看)

b  b入栈,执行,执行完后出栈,栈变短
a  a入栈,执行,往下执行,发现b
c  c执行,发现a
m  入栈,执行 发现调用c,于是c入栈

event loop 简化模型

js是单线程的,事件驱动的,这里的事件包含:I/O、网络、计时器、鼠标、键盘输入等等

while (queue.waitForEvent()) { //等待事件,如有用户点击按钮或者定时器到期
  queue.processNextEvent();//执行事件,这里可能会产出新事件,如:调用了 setTimeout,新事件会送入到队列中,等待被后面的循环执行
}
阅读全文 »»

小程序的登录流程

sequenceDiagram 小程序前端->>微信客户端API: wx.login Note over 小程序前端,微信客户端API: 静默进行,不会弹出授权弹窗 微信客户端API->>小程序前端: code 小程序前端->>小程序服务端: code 小程序服务端->>微信服务端API:code appid secret Note over 小程序服务端,微信服务端API: 请求 jscode2session 接口 微信服务端API->>小程序服务端:openid session_key

如果小程序只需要识别用户,而不需要获得用户的昵称等信息,那么整个过程是没有弹窗授权操作的,如果需要进一步获得用户信息,则需要放置下面这个按钮

阅读全文 »»