Fork me on GitHub
一共有 58 篇文章，分页：1 / 12

CSS3 Flexbox 网格布局 / Grid System 的一个简单实现


/*less*/

@gap: 10px;  /*空隙*/

.grid {
  box-sizing: border-box;
  background-color: #eee;
  display: flex;
  flex-wrap: wrap;
  padding: @gap/2;
  &>* {
    box-sizing: border-box;
    margin: @gap/2;
  }
  .full {
    flex: 0 0 calc(100% - @gap);
  }
  .half {
    flex: 0 0 calc(50% - @gap);
   }
  .third {
    flex: 0 0 calc(33.33333% - @gap);
  }
  .two-third {
    flex: 0 0 calc(66.66666% - @gap);
  }
  .fourth {
    flex: 0 0 calc(25% - @gap);
  }
}

事件机制详解

事件流

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

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) 由于人眼对绿色最敏感，所有绿色分量占比会多一些

我们常用的RGB和RGBA格式属于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，新事件会送入到队列中，等待被后面的循环执行
}
阅读全文 »»
« 更早的文章