benwalker-CSDN博客

原创 Web API 之 — Beacon

Beacon 的作用是用来向服务器发送一个异步非阻塞的请求。这个请求不会因为页面 unload 的发生而中止，并且不会阻塞页面 unload。所以 Beacon 被使用于在离开页面前，向服务端发送页面统计分析数据。我们总结一下，在 Beacon 之前，要想在页面离开前，向服务端发送数据的传统方法。同步 xhr由于浏览器在处理 unload 事件时，会忽略掉异步 xhr，那么为了保证请求发送成功，就需要使用同步的 xhr。如下所示：window.addEventListener("unload",

2020-08-19 00:01:40 759

原创 VS Code 插件开发（二） — 了解 Command

在 VS Code 插件开发中，Command 是最基本、最常用的一个特性。你可以使用内置的一些命令，如：vscode.openFolder 打开文件夹或工作空间；也可以自定义命令，给用户使用。执行命令通过 vscode.commands.executeCommand() 可执行一个命令，此方法第一个参数为命令名，根据不同命令，后面可以传跟命令相关的参数。以 vscode.openFolder 命令为例，此命令后可跟两个参数：uri，文件夹或工作空间的路径，如果不传，则打开原生文件系统弹框，供用户选择；

2020-08-04 11:38:12 2485

原创 Node.js 之 — Child process

在 Node.js 中，child_process 模块提供了可以创建子进程的能力，类似于 linux 中的 popen。通过子进程，你可以去执行操作系统上的命令。另外，child_process 还提供了执行其他 js 文件的特性。child_process 模块中，最主要的特性就是创建子进程，其提供了四种创建子进程的方法：exec、execFile、fork、spawn。当然这四种方式都是异步的创建子进程的方式，除了 fork 没有对应同步方法，其他对应的同步方法为：execSync、execFile

2020-08-01 23:55:07 1329

原创 Web API 之 — Web Animations

现代的前端，在页面上做动画，已经是家常便饭。浏览器的渲染性能也越来越好，并且还逐渐提供了一系列的 Web Animations API。此 API 让开发者可以使用 js 来创建动画，相比之前使用 css 做动画会方便很多，同时相比以前传统的用 js 做的动画会更加高效，并且相信未来此 API 的能力会越来越大。Web Animations 可查看 w3c 的规范文档。在 caniuse 上，可查看浏览器的支持情况，如下：可看到，目前主流浏览器均已支持此 API 的基本功能。下面我们就来学习一下此 A

2020-07-30 01:12:46 640

原创 Vue API 之 — provide/inject

在 Vue 2.2.0 新增了provide/inject 组合使用的 API。这个 API 的作用是可以让一个祖先组件向其所有子孙组件传递数据。这很像父子组件使用 props 传递数据，但是完全不一样，其实可以这样理解，props 更像是通过构造函数参数来创建对象，而 provide/inject 是在构建的对象中注入所依赖的数据，使用的是依赖注入的思想。使用说明provide 在祖先组件使用，inject 在子孙组件使用。provide 可以是一个对象，或是一个返回对象的函数。Object | (

2020-07-26 22:46:39 546

原创活在当下，珍惜眼前

最近持续的加班，让我有些精疲力尽，特别是每天似乎还在做一些无聊的事，就更会让你的生活痛苦起来。以前的我，在大学毕业前，一直向往一种自认为的“自由”。当自己想要学习，那就可以废寝忘食地学；如果不想上课，那就可以不去上课。但是事实是，在自己大学期间，很少有废寝忘食地学，更多的是漫无目的地无所事事。我逐渐发现每次自己想要学习的时候，可能就解决了一道题或者弄懂了一个知识点，就心满意足地结束了。这就导致在整个大学期间，自己虽然每科考试成绩都还凑合，但我清楚地知道自己的基础是多么的差。在整个大学期间，自己从没想过自己

2020-07-25 23:34:13 506

原创 Web API 之 — Console API

console.log()是我们调试代码中常用的一个方法，除此之外，web 标准中，console 是有很多有意思的特性，使用这些特性，可以给你的开发工作增添不一样的颜色。console 是通过全局对象访问。在 whatwg 的规范中，console 上的方法可以分为4类：Logging、Counting、Grouping、Timing。下面我们就逐个梳理一下。Loggingconsole 提供了各种形式的日志输出，包括：log()、info()、warn()、error()、debug()、asse

2020-07-21 22:29:28 617

原创 Service Worker 101

Service Worker 是什么？Service Worker 是在浏览器后台运行的用 JavaScript 编写的 worker 脚本。Service Worker 能做什么？Service Worker 本质充当了 web 应用和后台服务器之间的代理服务器，你也可以把它作为一个浏览器扩展来理解。它可以拦截网络请求、处理推送通知、处理后台同步以及其他各种任务。通过下面的图，可以清楚看出 Service Worker 的作用。Service Worker 不能做什么？Service Wor

2020-07-19 18:58:31 111

原创 npx 使用简介 — 方便地调用 npm 包命令

npx 是一个在安装 npm 时，默认被安装的 npm 包。它的作用就是让用户更加方便地调用 npm 包的命令。举个简单的例子，一般在项目中会使用 eslint 来规范 js 代码，如果我们在项目中目录中执行 npm install eslint -D，来安装 eslint，而不是全局安装，那么如果想要使用 eslint 命令来对某些文件校验时，就需要指定 eslint 的路径，如：./node_modules/eslint/bin/eslint.js ...或者./node_modules/.bin/e

2020-07-17 21:11:23 1749

原创 PWA 简介

PWA (Progressive Web App)，即渐进式的 web 应用，是 Google 提出的让 web 应用可以达到原生应用使用体验的一整套技术方案。在2015年，提出这个概念时，引起人们很大的兴趣，很多网站也都进行了 pwa 的改造，包括 YouTube，twitter等，并且在国内很多公司也进行了 pwa 的尝试，像微博。PWA 现状但是目前来看，pwa 的发展相对比较缓慢，因为一个 web 应用想要媲美原生应用的使用体验，不只是要体现在加载速度、离线能力、添加到主屏等方面，还需要分享、支

2020-07-14 23:16:36 396

原创 Web API 之 — Fullscreen API

今天突然发现 Fullscreen API 竟然是在 Element 上的方法，之前一直以为，这个肯定是 window 上的，所以今天就来梳理一下这块儿的知识，全面地了解一下。首先 Fullscreen API 提供的方法都是作用在 Element 和 Document 上的，所以，是可以让某个元素全屏展示的。接下来，我们来看如何全屏和退出全屏。全屏和退出全屏全屏对应 Element.requestFullscreen() 和退出全屏对应 Document.exitFullscreen()，你没看错，

2020-07-11 21:38:37 1109

原创 Node.js 之 — Path

在 Node.js 中，Path 几乎是必使用到的一个模块，其内容也比较简单，我梳理完，把这块儿的知识分为以下几类：路径字符串解析规范化路径字符串求相对路径路径字符串拼接路径分隔符和边界符下面就一一来展开学习。路径字符串解析对路径字符串的解析，涉及到如下方法：path.parse()、path.format()、path.basename()、path.dirname()、path.extname()、path.isAbsolute()。对于一个路径来说，我们通常会关心，这个路径最终指

2020-07-10 23:02:21 213

原创密码学中的随机数

随机数，顾名思义就是随机出现的数，其在密码学、统计学及其它方面都有很广阔的应用。在前端领域，我们也经常使用随机数来防止缓存。那么随机数是如何生成的，另外经常听到的伪随机，这些是什么意思，今天我们就来学习一下。随机数的特点在密码学中，随机数的随机性检验分为三个标准：统计学伪随机性即在给定的数列中，每个数字出现的数量大致相等。就如同掷骰子一样，掷的次数足够多，1 - 6 每个数字出现的次数基本是相等的。密码学安全伪随机定义为，给定随机样本的一部分和随机算法，不能有效地演算出随机样本的剩余部分。真

2020-07-10 00:08:38 2838

原创 VS Code 插件开发（一） — 环境准备

VS Code 是微软开发的轻量级编辑器，使用简单，并且功能强大。另外其有丰富的插件生态，除了能找到代码高亮、代码补全等有助于开发的插件外，你甚至能找到一些听歌、玩游戏的插件。总之，只有你想不到，没有你找不到，如果实在找不到你想要的插件，那你就动手写一个吧。我为什么要开发一个 VS Code 插件在公司的前端项目当中，我经常会遇到，要切换不同的后端环境，或联调接口，或复现bug。但是目前我们前端开发是通过 webpack-server 来启动一个前端代理服务器，但是 webpack-server 的每次

2020-07-08 22:16:22 457

原创 Node.js 之 — Modules

今天在工作中遇到了一个关于 Node.js 模块缓存的问题，所以趁机把这块儿的知识再整理一下。在 Node.js 中，一个文件就是一个模块。模块导入和导出要使用一个模块系统，首先要了解其导入和导出。导入使用 require，导出使用 exports。如下例子：// file1.jsexports.a = 1exports.b = 2// file2.jsconst file1 = require('./file1.js') // require 中指定文件 file1.js 的路径

2020-07-06 22:17:12 391

原创 JavaScript 之 — Proxy

Proxy 是 JavaScript 中的一个内置对象。它可以为一个对象创建“代理”，通过这个代理，可以拦截对这个对象的各种操作。使用方法Proxy 的使用非常简单。所有的 Proxy 对象通过 new Proxy(target, handler)来创建。其中：target: 目标对象handler: 一个对象，定义要拦截目标对象的哪些操作和对应的处理函数举个例子：const target = { p1: "hello"};const handler = { get(target

2020-07-06 00:03:53 371

原创 Web API 之 — URL API

URL API 是浏览器根据 Whatwg 的标准[https://url.spec.whatwg.org/]实现的一组 API。通常自己去写正则或循环去解析 URL 时，很难考虑全各种边边角角的问题，导致意想不到的错误。而有了这组 API，就可以方便准确地进行 URL 解析了。URL 的组成URL 的规范可以查看 ietf 的标准[https://tools.ietf.org/html/rfc3986]，这里就简单说明一下其组成。拿这个例子来看：http://www.example.com:8080

2020-07-04 22:18:17 2008

原创 Web API 之 — History API

History API 允许我们用 js 来操作和访问用户的会话历史记录。在前端路由系统中，History 被广泛使用（对于不支持 History 的老 ie，可以使用 hashchange 事件处理）。History API 都是一些简单好用的功能，没有复杂的功能，知识点也少，今天就来温习一下这组 API。后退和前进先来学习两个基本 api。history.back() // 顾名思义，回退到前一个历史点。和浏览器中回退按钮一个效果history.forward() // 顾名思义，前进到下一

2020-07-03 22:13:30 512

原创用 CSS 做一个 loading 动画

测试又来提 bug 了，公司龟速的网为测试提供了良好的提 bug 环境。今天就提了一个，点击菜单页面切换时，要在原页面停留好久，之后才能跳转到新的页面。这个问题其实存在已久，我早就有了应对之策，那就是在页面跳转时，先展示一个过渡 loading 页面，在下个页面资源加载完之后，再跳转到新的页面。OK，页面很快写完了，找设计要一个 loading 图标吧。最后选中了下面这款。最后，设计给了我一个270KB的 gif。好吧，对于一个前端来说这个图片太大了，并且我替换完才发现，这个图片背底竟然不是透明的。哎

2020-07-02 21:28:52 430

原创灼灼夏日，何以纳清凉

灼灼夏日，何以纳清凉夏天是热情的季节，似乎充满着蝉鸣的聒噪，缺少沉石的寂静。庆幸自己现在可以居于花草林木之间，在灼灼夏日中，纳得一阵清凉。作为一名IT民工，接触前端开发已有3年之久。17年的7月，当时的我还在苦逼地做着无聊的疲劳实验，看着毫无用处的实验数据，没有一篇文章发表，我就明白了，继续搞这一套学术，就是浪费时间。当时正巧一位师兄已经顺利地抛弃力学，开始从事前端开发的工作，我并没有和师兄进行深入地交谈，可能只是一句类似于“我们一块儿来搞吧”这样的话，我就开始了自己的前端生涯。似乎在我的人生中，类似的

2020-07-01 23:22:07 167

weixin_49067499的博客