小菜
弹幕效果遇到的坑
> 今天简单做了一个弹幕效果，其中遇到了几个坑，与大家分享一下，让大家少走弯路。 ### overflow:hidden 和 position:fixed 如果外层div设置了overflow:hidden，而内层元素用fixed定位，那么内层元素不会受到外层div overflow:hidden的影响，即使超出了div界限之外，还是会显示出来。类似于这种情况： [fixed不受overflow:hidden影响](https://jsfiddle.net/be22whsz/) 原因是：元素设置了fixed将跳出标准文件流 ### animation 动画在国产手机上兼容性太差 开始做弹幕的思路是用keyframes实现的，但是发现华为手机中几乎全军覆没。手机端对css3动画支持度太低，但是浏览器端是ok的，而且非常流畅。 解决办法：利用translate实现，通过不断更改transform的translateX值，实现移动。 ps: 如果使用left实现，会造成页面不断重绘，导致手机卡顿，所以不建议使用。 ### 移动端不支持symbol symbol在移动端的支持度较低，所以在开发的时候要谨慎使用，因为symbol在babel-core中是默认不转义的，如果需要转义，请使用babel-polyfill或者babel-runtime。 ### jest在测试setTimeout等timer api时，需要用专有api jest在进行单元测试的时候，如果代码中包含timer相关的api，请使用Timer Mocks，否则将不会计入单测覆盖度。
> 这篇文章主要介绍使用xcode搭建libuv开发环境，当然读者亦可以使用homebrew进行全局安装libuv。此文内容比较基础，主要是给前端开发者抛砖引玉，方便前端开发人员更加深入研究libuv。 ### libuv本地编译 macOS下面对libuv的编译在官方文档中写的也比较明白了，直接执行如下命令： ```shell $ git clone https://github.com/libuv/libuv.git $ cd libuv $ git clone https://chromium.googlesource.com/external/gyp build/gyp $ ./gyp_uv.py -f xcode $ xcodebuild -ARCHS="x86_64" -project out/uv.xcodeproj -configuration Release -alltargets...
> 本篇文章主要对libuv中最主要的结构体`uv_loop_t`进行剖析。 ## uv_loop_t的声明 直接从[uv.h](https://github.com/nodejs/node/blob/master/deps/uv/include/uv.h)切入，很容易便能找到`uv_loop_t`结构体的声明： ```c typedef struct uv_loop_s uv_loop_t; ``` 需要注意一点：c在声明结构体的时候一定要记得用`typedef`。 ## uv_loop_s的定义 继续顺着`uv.h`往下寻找，便能发现`uv_loop_s`的定义： ```c struct uv_loop_s { /* User data - use this for whatever. */ void* data;...
> 起因在于新建了一个类并继承了koa2，之后由于istanbul不支持async利用babel转义，引发的一系列血案 ### 背景  如图所示，babel在编译源代码的时候报错：Class constructor Application cannot be invoked without 'new'。 对这个问题进行深究，发现是babel对 class a extends b{}而b是class声明且没有转义导致的，有兴趣的朋友可以试一下下面这段代码： ```js class b{}; b(); ``` 这个会报同样的错误，究其原因就在于babel默认不会转义node_modlues中的文件，可能细心的朋友会发现，为什么koa1中没有报同样的错误？因为koa1构建类的时候用的是prototype，而koa2则是用的class。 ### 解决方案 这里给大家提供一个比较简单方便的解决方案，也就是在extends koa之前先对koa进行 new操作，再进行集成，代码如下：...
## 前言 相信对node源码感兴趣的同学一定知道，./lib库中的js通过node.gyp自动转换成了node_javascript.cc中的ASCII码，如果读过我[之前写的一篇文章](https://github.com/xtx1130/blog/issues/10)，应该也是对此有点了解的，而./lib库中的bootstrap_node.js又是js的入口文件，所有./lib下的文件几乎都需要它来挂载。那么这部分代码又该如何调试修改呢？ ## ./lib中的js如何编译 由于./lib库中的js都是存储在node_javascript.cc中，所以我们如果想要调试./lib中的js需要多一个编译的步骤，也就是把你修改的代码编译到node_javascript.cc中。如果大家读过node.gyp以及makefile，那么整个编译流程就会很清晰，在这篇文章中不做过多解读，如果有兴趣了解的话请移步[这里](https://github.com/xtx1130/blog/issues/9)。我们在修改完代码后需要执行一下make来进行编译。make会根据lib库中的js重新生成node_javascript.cc文件。这样就可以保证./lib库中的代码在调用的时候都是最新的了。 ## 调试 相信大家都了解，node的入口文件是bootstrap_node.js，那么我们就从这个文件入手，聊一聊该如何调试。二话不说，先写一个console.log然后make一下看看更新了么。 ```js // ./lib/internal/bootstrap_node.js 'use strict'; (function(process) { console.log(1111) let internalBinding; const exceptionHandlerState = { captureFn: null }; //...此处省略n多代码 ``` 然后我们make一下（手动滑稽.jpg）： ...
> 上篇文章直接单刀直入讲述了node运行的一个整体流程，导致很多人在群里或者cnode中询问如何可以在本地断点调试node。因此献上这篇文章，让大家对node编译过程和开发有个整体的认知 ## c++编译三部曲 ```shell $ ./configure $ make $ make install ``` 相信看到这三个命令后，大家应该是十分熟悉。没错，node编译也就是这三步。 - 第一步：配置。软件装到哪里、什么参数、什么os、装什么东西，全都是configure来确定的 - 第二步：编译。make会读取makefile的配置，进行编译，生成可执行文件 - 第三步：安装。make install 会根据设定好的路径，把软件安装到系统中 接下来，我们从这三个步骤入手，来串一下node整体的编译过程。 ## node 编译过程 ### ./configure 目标很明确，我们直奔configure文件，来查看node的configure究竟都做了些什么。 ...
> 网上讲的babylon比较笼统，并没有详细介绍，利用demo剖析一下babylon内部不同的type,以及用babel-traverse如何遍历babel ### Babylon type详解 首先看一段babylon转义之后的代码：  这其中包括了： * comments:注释内容 * loc:location * program:程序的ast * tokens: 程序拆分出来的字符串 #### comments 首先介绍一下comments，下面看一个例子：  应该比较容易读懂，value就是这个注释的具体内容。 #### program 详细给大家介绍一下program:  大家可以看到 program的body分为了三个部分，分别为： * ExpressionStatement...
> 之前写过一篇初探踩坑，主要是生产环境的配置，今天我们主要讲的是koa+vue ssr 的hmr配置 ## 开发环境 开发环境为：koa+vue+webpack+bootstrap-vue 这个时候，坑来了：目前看到的官方关于vue ssr的例子基本都是express+webpack-dev-middleware+webpack-hot-middleware的。而koa和express的中间件机制和参数不一样，所以如果想要拿来主义的话，是没有办法直接用的。由于这个原因，koa-webpack诞生了。koa-webpack集成了webpack-dev-middleware以及webpack-hot-middleware，并可以吐出koa的中间件。 ## koa-webpack koa-webpack 集成了两个插件，那么就会又有新的问题：如果这两个插件任何之一出现问题，那么整个插件都不会运行，而且koa-webpack是由个人维护的插件。最终我用的是：koa-webpack 5.1.0 + webpack 4.17.2 ## webpack编译 由于vue-ssr会生成两个json文件，所以在做hmr的时候需要产出这两个json，这种时候**必须要做好错误处理工作**，否则的话连哪里编译错了都不知道，而错误处理主要就是判断回调参数的error:`stats.errors.length`，如果有的话，直接`stats.errors.join('/r/n')`输出吧！绝对没错的 ## dev模式promise的使用 由于webpack产出vue-ssr-*.json的过程是异步的，所以需要有一个简单的控制器，来控制所有编译完成： ```js // 改造自vue官方ssr-demo let ready const readyPromise...
> 在前面五篇关于libuv的文章中，一一把event-loop中涉及到的句柄做了简单的介绍，这篇文章我们来详细解读一下event-loop ## libuv event-loop简介 `event-loop`相关的代码直接翻到[core.c](https://github.com/nodejs/node/blob/master/deps/uv/src/unix/core.c#L341-L390)，这里面的逻辑非常清晰。 ```c int uv_run(uv_loop_t* loop, uv_run_mode mode) { int timeout; int r; int ran_pending; r = uv__loop_alive(loop); // 判断是否还存在活跃句柄 if (!r) uv__update_time(loop); // 如果不存在直接更新event-loop的loop->time（libuv事件循环内部维护的时间） while...