xml地图|网站地图|网站标签 [设为首页] [加入收藏]
翻角效果,移动端样式小技巧
分类:web前端

简单的 canvas 翻角效果

2017/12/07 · HTML5 · Canvas

原文出处: 敖爽   

由于工作需求 , 需要写一个翻角效果;图片 1

demo链接

右上角需要从无的状态撕开一个标记 , 且有动画过程 , 上图是实现的效果图 , 不是gif

对这个翻角效果的难点在于没有翻开的时候露出的是dom下面的内容 , 实现角度来说 纯dom + css动画的设计方案并没有相出一个好的对策 ; 于是捡起了好久之前学的入门级别的canvas;

下面说一下实现思路:

  1. 动画拆分 :
    将此动画分解成两部分 , 一部分是翻页出现的黑色三角区域 , 另一个是露出的橘色展示内容
    对于橘色的展示内容区域相对好一些 , 因为是一个规则图形 , 而黑色区域相对较难;

先从基础canvas使用方法说起 :

<div class="container"> <canvas class="myCanvas" width="100" height="100"></canvas> </div>

1
2
3
<div class="container">
    <canvas class="myCanvas" width="100" height="100"></canvas>
</div>

布局如上 , 这里要说一点踩过的坑是 , canvas必须要设置上width 与 height , 此处并非为css中的width与height;而是写在dom上的属性 ; 因为dom上的width与height标识了canvas的分辨率(个人理解); 所以此canvas画布分辨率为100*100 , 而展示尺寸是可以通过css控制;

js中首先要做的是获取canvas对象 ,

var canvas = document.querySelector('.myCanvas'); //获取canvas对应dom var ctx = canvas.getContext('2d'); //此方法较为基础 , 意为获取canvas绘画2d内容的工具(上下文) var cw = 100; //分辨率 , 其实直接从dom上获取可能更好些 var ch = 100; //分辨率 , 其实直接从dom上获取可能更好些

1
2
3
4
var canvas = document.querySelector('.myCanvas'); //获取canvas对应dom
var ctx = canvas.getContext('2d'); //此方法较为基础 , 意为获取canvas绘画2d内容的工具(上下文)
var cw = 100; //分辨率 , 其实直接从dom上获取可能更好些
var ch = 100; //分辨率 , 其实直接从dom上获取可能更好些

ctx这个绘画上下文在这个教程中起到的作用至关重要 ; 它提供了非常强大的api , 比如用于画线 , 填充 , 写文字等 , 这样看来理解为画笔会更为简明一些;

此处效果需要用到的api如下 ( 不做详细解释 , 可w3c自行查询 );

ctx.save() //保存上下文状态 (比如画笔尺寸 颜色 旋转角度) ctx.restore() //返回上次保存的上下文状态 ctx.moveTo(x,y) //上下文移动到具体位置 ctx.lineTo(x,y) //上下文以划线的形式移动到某位置 ctx.stroke() // 画线动作 ctx.quadraticCurveTo() //上下文(画笔)按贝塞尔曲线移动(简单理解为可控的曲线即可) ctx.arc() //画圆 ctx.beginPath() //开启新的画笔路径 ctx.closePath() //关闭当前画笔路径 ctx.createLinearGradient() //创建canvas渐变对象 ctx.fill() //对闭合区域进行填充 ctx.globalCompositeOperation //画笔的重叠模式

1
2
3
4
5
6
7
8
9
10
11
12
ctx.save() //保存上下文状态 (比如画笔尺寸 颜色 旋转角度)
ctx.restore() //返回上次保存的上下文状态
ctx.moveTo(x,y) //上下文移动到具体位置
ctx.lineTo(x,y) //上下文以划线的形式移动到某位置
ctx.stroke() // 画线动作
ctx.quadraticCurveTo() //上下文(画笔)按贝塞尔曲线移动(简单理解为可控的曲线即可)
ctx.arc() //画圆
ctx.beginPath() //开启新的画笔路径
ctx.closePath() //关闭当前画笔路径
ctx.createLinearGradient() //创建canvas渐变对象
ctx.fill() //对闭合区域进行填充
ctx.globalCompositeOperation //画笔的重叠模式

可能方法列举的不够详尽 , 见谅.

首先是绘制黑色翻出的部分 , 图形分解为如下几部分(请根据上图脑补)

  1. 左上角向右下的半弧 ╮
  2. 然后是竖直向下的竖线 |
  3. 然后是向右的半圆 ╰
  4. 再然后是向右的横线
  5. 接着还是向右下的半弧 ╮
  6. 最后是将线连接会起点

于是第一步 我们要先将画笔移动到 起始位置

ctx.moveTo(50,0);

1
ctx.moveTo(50,0);

然后

ctx.quadraticCurveTo(55 , 5 , 55 , 25); // 可以理解为从(50,0)这个点划线到(55,25)这个点 , 中间会受到(55,5)这个点将直线想磁铁一样"吸"成曲线;

1
ctx.quadraticCurveTo(55 , 5 , 55 , 25); // 可以理解为从(50,0)这个点划线到(55,25)这个点 , 中间会受到(55,5)这个点将直线想磁铁一样"吸"成曲线;

于是第一个向右下的半弧完成 , 此时canvas上没有任何绘制内容 , 因为还没有执行过绘制方法例如stroke或fill,

接下来直线向下就是简单的移动

ctx.lineTo(55 , 40);

1
ctx.lineTo(55 , 40);

这个时候我们接下来应该画向右的半圆 , 这个时候再用贝塞尔曲线绘制 实在有些不太合适 , 因为从图上来看 , 这里完全是1/4的圆 , 所以要使用canvas提供的画圆的api

ctx.arc(60 , 40 , 5 , Math.PI , Math.PI / 2 , true);

1
ctx.arc(60 , 40 , 5 , Math.PI , Math.PI / 2 , true);

上述画圆的代码意为 : 以(60,40)点为圆心 , 5为半径 , 逆时针从 180度绘制到90度 , 180度就是圆心的水平向左 到达点(55,40) , 与上一步连接上 , 然后又因为屏幕向下为正 , 90度在圆心正下方 , 所以绘制出此半圆

于是按照相同的步骤 水平向右

ctx.lineTo(75 , 45);

1
ctx.lineTo(75 , 45);

然后再次使用贝塞尔曲线用第一步的思路画出向右下的弧;

ctx.quadraticCurveTo( 95 , 45 , 100 , 50 );

1
ctx.quadraticCurveTo( 95 , 45 , 100 , 50 );

同理 上述贝塞尔曲线可以理解为一条从( 75 , 45 ) 到 ( 100 , 50 )的线被 ( 95 , 45 )”吸”成曲线

最后链接起点 , 闭合绘画区域

ctx.lineTo(50 , 0);

1
ctx.lineTo(50 , 0);

这个时候黑色区域的翻页就画完了 , 然后此时开始填充颜色 ;

var gradient = ctx.createLinearGradient(50 , 50 , 75 , 75); gradient.addColorStop(0 , '#ccc'); gradient.addColorStop(0.7 , '#111'); gradient.addColorStop(1 , '#000');

1
2
3
4
var gradient = ctx.createLinearGradient(50 , 50 , 75 , 75);
gradient.addColorStop(0 , '#ccc');
gradient.addColorStop(0.7 , '#111');
gradient.addColorStop(1 , '#000');

我们通过上述代码创建一个 从( 50 , 50 )点到(75 , 75)点的线性渐变 , 颜色从 #ccc 到 #111 到 #000 ; 创建高光效果;
然后填充:

ctx.fillStyle = gradient; ctx.fill();

1
2
ctx.fillStyle = gradient;
ctx.fill();

于是翻页效果的一半就算完成了。

至此 , 我要说一点我领悟的canvas的绘画”套路”;

对于上述教程中 , 有一步我们使用了一个词叫做 闭合 , 闭合的概念在canvas中是真是存在的 , 对于fill方法来说 填充的区间是有一个空间尺寸才可以的 , 比如我们绘画的这个黑色的三角形 , 加入我们最后没有将终点与起点相连接 , 同样canvas会自动帮我们链接最后一笔绘画的位置到起点 , 强制行程闭合空间 , 而这样我们想再多画几个新的闭合空间就麻烦了 , 所以canvas提供了如下api 新建闭合路径:

ctx.beginPath(); //新建路径 ctx.closePath(); //闭合路径

1
2
ctx.beginPath(); //新建路径
ctx.closePath(); //闭合路径

所以对于我们接下来要绘制右上角橘色区域来说 , 我们在绘制黑色区域之前首先要做的是

ctx.beginPath(); ...

1
2
ctx.beginPath();
...

然后在fill之前 我们应该

ctx.closePath();

1
ctx.closePath();

也就是说beginPath 到 closePath之间标识着我们自己的一个完整的绘画阶段.

那么接下来绘制右上角的橘色区域就简单很多了:

ctx.beginPath(); ctx.moveTo(50,0); ctx.lineTo(100,50); ctx.lineTo(100,0); ctx.lineTo(50,0); ctx.closePath(); ctx.fillStyle = '#ff6600'; ctx.fill();

1
2
3
4
5
6
7
8
ctx.beginPath();
ctx.moveTo(50,0);
ctx.lineTo(100,50);
ctx.lineTo(100,0);
ctx.lineTo(50,0);
ctx.closePath();
ctx.fillStyle = '#ff6600';
ctx.fill();

于是右上角的橘色区域我们就绘制完成了;

文字绘制

接下来绘制”new” , 实际上是使用canvas简单的文本绘制 , 代码如下:

var deg = Math.PI / 180; ctx.globalCompositeOperation = 'source-atop'; //canvas层叠模式 ctx.beginPath(); ctx.font = '14px Arial'; //设置字体大小 字体 ctx.textAlign = 'center'; // 字体对齐方式 ctx.translate(78 , 22); // 移动canvas画布圆点 ctx.rotate(45 * deg); // 旋转画布 ctx.fillStyle = '#fff'; // 设置文字颜色 ctx.fillText('NEW' , 0 , 0); //文字绘制动作 ctx.closePath();

1
2
3
4
5
6
7
8
9
10
var deg = Math.PI / 180;
ctx.globalCompositeOperation = 'source-atop'; //canvas层叠模式
ctx.beginPath();
ctx.font = '14px Arial'; //设置字体大小 字体
ctx.textAlign = 'center'; // 字体对齐方式
ctx.translate(78 , 22);  // 移动canvas画布圆点
ctx.rotate(45 * deg);    // 旋转画布
ctx.fillStyle = '#fff';  // 设置文字颜色
ctx.fillText('NEW' , 0 , 0); //文字绘制动作
ctx.closePath();

对于上述代码中 , 文字的相关api是属于没有难度的 , 只是设置而已 , 需要理解的部分在于 translate和rotate,

这两个方法中 translate的意思为移动canvas画布的( 0 , 0 )点到 (78,22),然后旋转45度, 再将文字渲染在原点 , 实际就是 ( 78 , 22 ) 这个点上, 此时我们对canvas的画笔做出了非常大的修改

比如我们修改了旋转角度以及画布圆点 , 这种操作或许只在我们需要绘制倾斜的new 的时候需要 , 后期可能就不需要使用了 ,

还好canvas的画笔是存在”状态”的, 通过ctx.save();可以保存当前画笔的状态 , 通过ctx.restore();可以恢复到上次画笔保存的状态.

于是我个人理解到 , 在开发canvas动画时 , 一个较好的习惯就是 , 在beginPath之前先ctx.save();保存画笔状态 , 在closePath后ctx.restore();恢复之前的画笔状态 , 这样我们的每一个绘制阶段对于画笔的修改都将是不会有影响的.( 个人经验 )

ctx.globalCompositeOperation = 'source-atop'; //canvas层叠模式

1
ctx.globalCompositeOperation = 'source-atop'; //canvas层叠模式

代码中这部分是指 我们绘制的文字new 与 橘色三角形区域的重叠关系 , 此方法取值较多 , 此处不做过多介绍 , source-atop值可以使重叠区域保留 , 新绘制的内容在重叠区域以外的部分消失 , 以此达到new在里面的效果

到这里我们就开发好了翻角效果的完全展示的状态 , 那么如何让这个区域动起来呢?

此处需要使用h5提供的用于刷帧的函数 requestAnimationFrame ;

此方法可简单理解为 16毫秒的定时器 , 但是厉害的是可以再各个环境中自动匹配到可达到的相对顺畅的帧率 , 实际并不是定时器哈~

我们需要在这个循环执行的函数中 , 将上述的绘制内容重复绘制 , 例如 :

function draw(){ drawMethod(); //绘制三角等内容 window.requestAnimationFrame(function(){ draw(); }) } function drawMethod(){ //... }

1
2
3
4
5
6
7
8
9
function draw(){
    drawMethod(); //绘制三角等内容
    window.requestAnimationFrame(function(){
        draw();
    })
}
function drawMethod(){
    //...
}

这样我们就可以达到刷帧的效果了 , 于是接着我们要做的就是控制绘制时各个数值的参数.

比如我们是以 (50,0)为起点 , ( 100 , 50 )为终点这样的两个移动点为绘制标记的 , 如果我们将两个点进行存储 , 并且每次执行drawMethod的时候更新点的位置 , 然后清空canvas ,再绘制新的点 那么就可以达到canvas动起来的目的了;

实际效果链接在这里

在上面的demo链接中 , 自己定义了一个速度与加速度的关系 , 比如每次绘制一次canvas后 , 将存储的点坐标进行增加一个speed值 , 然后speed值也增加 , 这样speed对应的概念就是速度 , 而speed的增加值对应的就是加速度. 所以就呈现了一种加速运动的状态;

以上内容纯属个人理解内容 , 若果有哪里理解错了 欢迎各位大大指点 , 另demo链接失效可私信.

1 赞 1 收藏 评论

图片 2

Nodejs cluster 模块深入探究

2017/08/16 · 基础技术 · 2 评论 · NodeJS

本文作者: 伯乐在线 - 欲休 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

### 由表及里 HTTP服务器用于响应来自客户端的请求,当客户端请求数逐渐增大时服务端的处理机制有多种,如tomcat的多线程、nginx的事件循环等。而对于node而言,由于其也采用事件循环和异步I/O机制,因此在高I/O并发的场景下性能非常好,但是由于单个node程序仅仅利用单核cpu,因此为了更好利用系统资源就需要fork多个node进程执行HTTP服务器逻辑,所以node内建模块提供了child_process和cluster模块。 利用childprocess模块,我们可以执行shell命令,可以fork子进程执行代码,也可以直接执行二进制文件;利用cluster模块,使用node封装好的API、IPC通道和调度机可以非常简单的创建包括一个master进程下HTTP代理服务器 + 多个worker进程多个HTTP应用服务器的架构,并提供两种调度子进程算法。本文主要针对cluster模块讲述node是如何实现简介高效的服务集群创建和调度的。那么就从代码进入本文的主题:code1**

const cluster = require('cluster'); const http = require('http'); if (cluster.isMaster) { let numReqs = 0; setInterval(() => { console.log(<code>numReqs = ${numReqs}</code>); }, 1000); function messageHandler(msg) { if (msg.cmd && msg.cmd === 'notifyRequest') { numReqs += 1; } } const numCPUs = require('os').cpus().length; for (let i = 0; i < numCPUs; i++) { cluster.fork(); } for (const id in cluster.workers) { cluster.workers[id].on('message', messageHandler); } } else { // Worker processes have a http server. http.Server((req, res) => { res.writeHead(200); res.end('hello worldn'); process.send({ cmd: 'notifyRequest' }); }).listen(8000); }

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
const cluster = require('cluster');
const http = require('http');
 
if (cluster.isMaster) {
 
  let numReqs = 0;
  setInterval(() => {
    console.log(<code>numReqs = ${numReqs}</code>);
  }, 1000);
 
  function messageHandler(msg) {
    if (msg.cmd && msg.cmd === 'notifyRequest') {
      numReqs += 1;
    }
  }
 
  const numCPUs = require('os').cpus().length;
  for (let i = 0; i < numCPUs; i++) {
    cluster.fork();
  }
 
  for (const id in cluster.workers) {
    cluster.workers[id].on('message', messageHandler);
  }
 
} else {
 
  // Worker processes have a http server.
  http.Server((req, res) => {
    res.writeHead(200);
    res.end('hello worldn');
 
    process.send({ cmd: 'notifyRequest' });
  }).listen(8000);
}

主进程创建多个子进程,同时接受子进程传来的消息,循环输出处理请求的数量; 子进程创建http服务器,侦听8000端口并返回响应。 泛泛的大道理谁都了解,可是这套代码如何运行在主进程和子进程中呢?父进程如何向子进程传递客户端的请求?多个子进程共同侦听8000端口,会不会造成端口reuse error?每个服务器进程最大可有效支持多少并发量?主进程下的代理服务器如何调度请求? 这些问题,如果不深入进去便永远只停留在写应用代码的层面,而且不了解cluster集群创建的多进程与使用child_process创建的进程集群的区别,也写不出符合业务的最优代码,因此,深入cluster还是有必要的。 ## cluster与net cluster模块与net模块息息相关,而net模块又和底层socket有联系,至于socket则涉及到了系统内核,这样便由表及里的了解了node对底层的一些优化配置,这是我们的思路。介绍前,笔者仔细研读了node的js层模块实现,在基于自身理解的基础上诠释上节代码的实现流程,力图做到清晰、易懂,如果有某些纰漏也欢迎读者指出,只有在互相交流中才能收获更多。 ### 一套代码,多次执行 很多人对code1代码如何在主进程和子进程执行感到疑惑,怎样通过_cluster.isMaster判断语句内的代码是在主进程执行,而其他代码在子进程执行呢? 其实只要你深入到了node源码层面,这个问题很容易作答。cluster模块的代码只有一句:

module.exports = ('NODE<em>UNIQUE_ID' in process.env) ? require('internal/cluster/child') : require('internal/cluster/master');</em>

1
2
3
module.exports = ('NODE<em>UNIQUE_ID' in process.env) ?
                  require('internal/cluster/child') :
                  require('internal/cluster/master');</em>

只需要判断当前进程有没有环境变量“NODE_UNIQUE_ID”就可知道当前进程是否是主进程;而变量“NODE_UNIQUE_ID”则是在主进程fork子进程时传递进去的参数,因此采用cluster.fork创建的子进程是一定包含“NODE_UNIQUE_ID”的。 这里需要指出的是,必须通过cluster.fork创建的子进程才有NODE_UNIQUE_ID变量,如果通过child_process.fork的子进程,在不传递环境变量的情况下是没有NODE_UNIQUE_ID的。因此,当你在child_process.fork的子进程中执行cluster.isMaster判断时,返回 true。 ### 主进程与服务器 code1中,并没有在cluster.isMaster的条件语句中创建服务器,也没有提供服务器相关的路径、端口和fd,那么主进程中是否存在TCP服务器,有的话到底是什么时候怎么创建的? 相信大家在学习nodejs时阅读的各种书籍都介绍过在集群模式下,主进程的服务器会接受到请求然后发送给子进程,那么问题就来到主进程的服务器到底是如何创建呢?主进程服务器的创建离不开与子进程的交互,毕竟与创建服务器相关的信息全在子进程的代码中。 当子进程执行

http.Server((req, res) => { res.writeHead(200); res.end('hello worldn'); process.send({ cmd: 'notifyRequest' }); }).listen(8000);

1
2
3
4
5
6
http.Server((req, res) => {
    res.writeHead(200);
    res.end('hello worldn');
 
    process.send({ cmd: 'notifyRequest' });
  }).listen(8000);

时,http模块会调用net模块(确切的说,http.Server继承net.Server),创建net.Server对象,同时侦听端口。创建net.Server实例,调用构造函数返回。创建的net.Server实例调用listen(8000),等待accpet连接。那么,子进程如何传递服务器相关信息给主进程呢?答案就在listen函数中。我保证,net.Server.prototype.listen函数绝没有表面上看起来的那么简单,它涉及到了许多IPC通信和兼容性处理,可以说HTTP服务器创建的所有逻辑都在listen函数中。 > 延伸下,在学习linux下的socket编程时,服务端的逻辑依次是执行socket(),bind(),listen()和accept(),在接收到客户端连接时执行read(),write()调用完成TCP层的通信。那么,对应到node的net模块好像只有listen()阶段,这是不是很难对应socket的四个阶段呢?其实不然,node的net模块把“bind,listen”操作全部写入了net.Server.prototype.listen中,清晰的对应底层socket和TCP三次握手,而向上层使用者只暴露简单的listen接口。 code2

Server.prototype.listen = function() { ... // 根据参数创建 handle句柄 options = options._handle || options.handle || options; // (handle[, backlog][, cb]) where handle is an object with a handle if (options instanceof TCP) { this._handle = options; this[async_id_symbol] = this._handle.getAsyncId(); listenInCluster(this, null, -1, -1, backlogFromArgs); return this; } ... var backlog; if (typeof options.port === 'number' || typeof options.port === 'string') { if (!isLegalPort(options.port)) { throw new RangeError('"port" argument must be >= 0 and < 65536'); } backlog = options.backlog || backlogFromArgs; // start TCP server listening on host:port if (options.host) { lookupAndListen(this, options.port | 0, options.host, backlog, options.exclusive); } else { // Undefined host, listens on unspecified address // Default addressType 4 will be used to search for master server listenInCluster(this, null, options.port | 0, 4, backlog, undefined, options.exclusive); } return this; } ... throw new Error('Invalid listen argument: ' + util.inspect(options)); };

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
Server.prototype.listen = function() {
 
  ...
 
  // 根据参数创建 handle句柄
  options = options._handle || options.handle || options;
  // (handle[, backlog][, cb]) where handle is an object with a handle
  if (options instanceof TCP) {
    this._handle = options;
    this[async_id_symbol] = this._handle.getAsyncId();
    listenInCluster(this, null, -1, -1, backlogFromArgs);
    return this;
  }
 
  ...
 
  var backlog;
  if (typeof options.port === 'number' || typeof options.port === 'string') {
    if (!isLegalPort(options.port)) {
      throw new RangeError('"port" argument must be >= 0 and < 65536');
    }
    backlog = options.backlog || backlogFromArgs;
    // start TCP server listening on host:port
    if (options.host) {
      lookupAndListen(this, options.port | 0, options.host, backlog,
                      options.exclusive);
    } else { // Undefined host, listens on unspecified address
      // Default addressType 4 will be used to search for master server
      listenInCluster(this, null, options.port | 0, 4,
                      backlog, undefined, options.exclusive);
    }
    return this;
  }
 
  ...
 
  throw new Error('Invalid listen argument: ' + util.inspect(options));
};

由于本文只探究cluster模式下HTTP服务器的相关内容,因此我们只关注有关TCP服务器部分,其他的Pipe(domain socket)服务不考虑。 listen函数可以侦听端口、路径和指定的fd,因此在listen函数的实现中判断各种参数的情况,我们最为关心的就是侦听端口的情况,在成功进入条件语句后发现所有的情况最后都执行了listenInCluster函数而返回,因此有必要继续探究。 code3

function listenInCluster(server, address, port, addressType, backlog, fd, exclusive) { ... if (cluster.isMaster || exclusive) { server._listen2(address, port, addressType, backlog, fd); return; } // 后续代码为worker执行逻辑 const serverQuery = { address: address, port: port, addressType: addressType, fd: fd, flags: 0 }; ... cluster._getServer(server, serverQuery, listenOnMasterHandle); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function listenInCluster(server, address, port, addressType,
                         backlog, fd, exclusive) {
 
  ...
 
  if (cluster.isMaster || exclusive) {
    server._listen2(address, port, addressType, backlog, fd);
    return;
  }
 
  // 后续代码为worker执行逻辑
  const serverQuery = {
    address: address,
    port: port,
    addressType: addressType,
    fd: fd,
    flags: 0
  };
 
  ...
 
  cluster._getServer(server, serverQuery, listenOnMasterHandle);
}

listenInCluster函数传入了各种参数,如server实例、ip、port、ip类型(IPv6和IPv4)、backlog(底层服务端socket处理请求的最大队列)、fd等,它们不是必须传入,比如创建一个TCP服务器,就仅仅需要一个port即可。 简化后的listenInCluster函数很简单,cluster模块判断当前进程为主进程时,执行_listen2函数;否则,在子进程中执行cluster._getServer函数,同时像函数传递serverQuery对象,即创建服务器需要的相关信息。 因此,我们可以大胆假设,子进程在cluster._getServer函数中向主进程发送了创建服务器所需要的数据,即serverQuery。实际上也确实如此: code4

cluster._getServer = function(obj, options, cb) { const message = util._extend({ act: 'queryServer', index: indexes[indexesKey], data: null }, options); send(message, function modifyHandle(reply, handle) => { if (typeof obj._setServerData === 'function') obj._setServerData(reply.data); if (handle) shared(reply, handle, indexesKey, cb); // Shared listen socket. else rr(reply, indexesKey, cb); // Round-robin. }); };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
cluster._getServer = function(obj, options, cb) {
 
  const message = util._extend({
    act: 'queryServer',
    index: indexes[indexesKey],
    data: null
  }, options);
 
  send(message, function modifyHandle(reply, handle) => {
    if (typeof obj._setServerData === 'function')
      obj._setServerData(reply.data);
 
    if (handle)
      shared(reply, handle, indexesKey, cb);  // Shared listen socket.
    else
      rr(reply, indexesKey, cb);              // Round-robin.
  });
 
};

子进程在该函数中向已建立的IPC通道发送内部消息message,该消息包含之前提到的serverQuery信息,同时包含act: ‘queryServer’字段,等待服务端响应后继续执行回调函数modifyHandle。 主进程接收到子进程发送的内部消息,会根据act: ‘queryServer’执行对应queryServer方法,完成服务器的创建,同时发送回复消息给子进程,子进程执行回调函数modifyHandle,继续接下来的操作。 至此,针对主进程在cluster模式下如何创建服务器的流程已完全走通,主要的逻辑是在子进程服务器的listen过程中实现。 ### net模块与socket 上节提到了node中创建服务器无法与socket创建对应的问题,本节就该问题做进一步解释。在net.Server.prototype.listen函数中调用了listenInCluster函数,listenInCluster会在主进程或者子进程的回调函数中调用_listen2函数,对应底层服务端socket建立阶段的正是在这里。

function setupListenHandle(address, port, addressType, backlog, fd) { // worker进程中,_handle为fake对象,无需创建 if (this._handle) { debug('setupListenHandle: have a handle already'); } else { debug('setupListenHandle: create a handle'); if (rval === null) rval = createServerHandle(address, port, addressType, fd); this._handle = rval; } this[async_id_symbol] = getNewAsyncId(this._handle); this._handle.onconnection = onconnection; var err = this._handle.listen(backlog || 511); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function setupListenHandle(address, port, addressType, backlog, fd) {
 
  // worker进程中,_handle为fake对象,无需创建
  if (this._handle) {
    debug('setupListenHandle: have a handle already');
  } else {
    debug('setupListenHandle: create a handle');
 
    if (rval === null)
      rval = createServerHandle(address, port, addressType, fd);
 
    this._handle = rval;
  }
 
  this[async_id_symbol] = getNewAsyncId(this._handle);
 
  this._handle.onconnection = onconnection;
 
  var err = this._handle.listen(backlog || 511);
 
}

通过createServerHandle函数创建句柄(句柄可理解为用户空间的socket),同时给属性onconnection赋值,最后侦听端口,设定backlog。 那么,socket处理请求过程“socket(),bind()”步骤就是在createServerHandle完成。

function createServerHandle(address, port, addressType, fd) { var handle; // 针对网络连接,绑定地址 if (address || port || isTCP) { if (!address) { err = handle.bind6('::', port); if (err) { handle.close(); return createServerHandle('0.0.0.0', port); } } else if (addressType === 6) { err = handle.bind6(address, port); } else { err = handle.bind(address, port); } } return handle; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function createServerHandle(address, port, addressType, fd) {
  var handle;
 
  // 针对网络连接,绑定地址
  if (address || port || isTCP) {
    if (!address) {
      err = handle.bind6('::', port);
      if (err) {
        handle.close();
        return createServerHandle('0.0.0.0', port);
      }
    } else if (addressType === 6) {
      err = handle.bind6(address, port);
    } else {
      err = handle.bind(address, port);
    }
  }
 
  return handle;
}

在createServerHandle中,我们看到了如何创建socket(createServerHandle在底层利用node自己封装的类库创建TCP handle),也看到了bind绑定ip和地址,那么node的net模块如何接收客户端请求呢? 必须深入c++模块才能了解node是如何实现在c++层面调用js层设置的onconnection回调属性,v8引擎提供了c++和js层的类型转换和接口透出,在c++的tcp_wrap中:

void TCPWrap::Listen(const FunctionCallbackInfo& args) { TCPWrap* wrap; ASSIGN_OR_RETURN_UNWRAP(&wrap, args.Holder(), args.GetReturnValue().Set(UV_EBADF)); int backloxxg = args[0]->Int32Value(); int err = uv_listen(reinterpret_cast(&wrap->handle), backlog, OnConnection); args.GetReturnValue().Set(err); }

1
2
3
4
5
6
7
8
9
10
11
void TCPWrap::Listen(const FunctionCallbackInfo& args) {
  TCPWrap* wrap;
  ASSIGN_OR_RETURN_UNWRAP(&wrap,
                          args.Holder(),
                          args.GetReturnValue().Set(UV_EBADF));
  int backloxxg = args[0]->Int32Value();
  int err = uv_listen(reinterpret_cast(&wrap->handle),
                      backlog,
                      OnConnection);
  args.GetReturnValue().Set(err);
}

我们关注uvlisten函数,它是libuv封装后的函数,传入了*handle*,backlog和OnConnection回调函数,其中handle_为node调用libuv接口创建的socket封装,OnConnection函数为socket接收客户端连接时执行的操作。我们可能会猜测在js层设置的onconnction函数最终会在OnConnection中调用,于是进一步深入探查node的connection_wrap c++模块:

template void ConnectionWrap::OnConnection(uv_stream_t* handle, int status) { if (status == 0) { if (uv_accept(handle, client_handle)) return; // Successful accept. Call the onconnection callback in JavaScript land. argv[1] = client_obj; } wrap_data->MakeCallback(env->onconnection_string(), arraysize(argv), argv); }

1
2
3
4
5
6
7
8
9
10
11
12
13
template
void ConnectionWrap::OnConnection(uv_stream_t* handle,
                                                    int status) {
 
  if (status == 0) {
    if (uv_accept(handle, client_handle))
      return;
 
    // Successful accept. Call the onconnection callback in JavaScript land.
    argv[1] = client_obj;
  }
  wrap_data->MakeCallback(env->onconnection_string(), arraysize(argv), argv);
}

过滤掉多余信息便于分析。当新的客户端连接到来时,libuv调用OnConnection,在该函数内执行uv_accept接收连接,最后将js层的回调函数onconnection[通过env->onconnection_string()获取js的回调]和接收到的客户端socket封装传入MakeCallback中。其中,argv数组的第一项为错误信息,第二项为已连接的clientSocket封装,最后在MakeCallback中执行js层的onconnection函数,该函数的参数正是argv数组传入的数据,“错误代码和clientSocket封装”。 js层的onconnection回调

function onconnection(err, clientHandle) { var handle = this; if (err) { self.emit('error', errnoException(err, 'accept')); return; } var socket = new Socket({ handle: clientHandle, allowHalfOpen: self.allowHalfOpen, pauseOnCreate: self.pauseOnConnect }); socket.readable = socket.writable = true; self.emit('connection', socket); }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function onconnection(err, clientHandle) {
  var handle = this;
 
  if (err) {
    self.emit('error', errnoException(err, 'accept'));
    return;
  }
 
  var socket = new Socket({
    handle: clientHandle,
    allowHalfOpen: self.allowHalfOpen,
    pauseOnCreate: self.pauseOnConnect
  });
  socket.readable = socket.writable = true;
 
  self.emit('connection', socket);
}

这样,node在C++层调用js层的onconnection函数,构建node层的socket对象,并触发connection事件,完成底层socket与node net模块的连接与请求打通。 至此,我们打通了socket连接建立过程与net模块(js层)的流程的交互,这种封装让开发者在不需要查阅底层接口和数据结构的情况下,仅使用node提供的http模块就可以快速开发一个应用服务器,将目光聚集在业务逻辑中。 > backlog是已连接但未进行accept处理的socket队列大小。在linux 2.2以前,backlog大小包括了半连接状态和全连接状态两种队列大小。linux 2.2以后,分离为两个backlog来分别限制半连接SYN_RCVD状态的未完成连接队列大小跟全连接ESTABLISHED状态的已完成连接队列大小。这里的半连接状态,即在三次握手中,服务端接收到客户端SYN报文后并发送SYN+ACK报文后的状态,此时服务端等待客户端的ACK,全连接状态即服务端和客户端完成三次握手后的状态。backlog并非越大越好,当等待accept队列过长,服务端无法及时处理排队的socket,会造成客户端或者前端服务器如nignx的连接超时错误,出现“error: Broken Pipe”**。因此,node默认在socket层设置backlog默认值为511,这是因为nginx和redis默认设置的backlog值也为此,尽量避免上述错误。 ###

打赏支持我写出更多好文章,谢谢!

打赏作者

移动端样式小技巧

2016/08/13 · CSS · 1 评论 · 移动端

原文出处: 大坚   

打赏支持我写出更多好文章,谢谢!

图片 3

1 赞 收藏 2 评论

平时在移动端开发拼页面的过程中总会遇到一些问题,主要是各手机webview样式显示效果不一致造成的。以下总结了一些常见坑和一些小技巧,希望对看官有所帮助!

本文只针对两大手机阵营 Android和IOS 中的魅蓝metal 和 iPhone6进行样式对比。

关于作者:欲休

图片 4

前端自由人 个人主页 · 我的文章 · 1 ·  

图片 5

一、line-height

line-height经常用于文字居中,当然也有小伙伴会用上下padding去写.but!不管你用padding还是line-height,不同手机显示效果还是…不一样。

一般会这样写

CSS

.demo{ height:16px; line-height:14px; font-size:9px; border:1px solid #ff6815; }

1
2
3
4
5
6
.demo{
    height:16px;
    line-height:14px;
    font-size:9px;
    border:1px solid #ff6815;
}

图片 6

嗯,在我们的chrome由于字体小于9px已经看不出边框和字之间的间隙了,再来看看Android和IOS的

图片 7 魅蓝文字已经飞起~
图片 8 ios正常显示

如果把line-height加1px,iPhone文字就会下移,由于我们app的ios用户居多,并且android机型太多,不同机型也会显示不同,所以只能退而求其次了。

line-height的兼容问题不太好解决,容器高度越小,显示效果的差距越明显。稍微大一点的高度,最好把line-height设置为高度+1px,两个平台显示都还不错。


本文由澳门新葡亰手机版发布于web前端,转载请注明出处:翻角效果,移动端样式小技巧

上一篇:前端实现,static以及继承 下一篇:没有了
猜你喜欢
热门排行
精彩图文