❌

普通视图

发现新文章，点击刷新页面。
昨天以前Vivaxy's blog

VSCode Conventional Commits 插件

✇Vivaxy's blog
作者 vivaxy
2020年4月30日 08:00
VSCode Conventional Commits 插件可以帮助你轻松按照 Conventional Commits 规范编写提交信息。 功能 支持使用项目下的 commitlint 规范。 支持自动 add 和 push（需要结合 VSCode 的 git 插件，详见插件文档）。 支持项目级别的 scope 管理。 支持 Gitmoji。 使用方式 你可以通过下面两种方式打开插件： Command + Shift + P 或 Ctrl + Shift + P，输入 Conventional Commits，然后按 Enter。 点击 Source Control 操作面板上的图标。见下图：

VSCode Conventional Commits Extension

✇Vivaxy's blog
作者 vivaxy
2020年4月29日 08:00
VSCode Conventional Commits extension helps you to fill in commit messages according to Conventional Commits. Features Respect commitlint configs. Support auto add and push (with the configutation of VSCode git extension, see detail in readme). Support project level scope management. Support Gitmoji. Usage You can access VSCode Conventional Commits in...

How Babel Is Built

✇Vivaxy's blog
作者 vivaxy
2020年1月5日 08:00
Introduction Babel is a Node.js tool to use next-generation JavaScript now. This article will explain how Babel is designed to solve this problem, based on the source codes on the master branch in November 2019. How is Babel designed? babel-loader belongs to webpack project, which is not in the Babel...

一步一步解码 PNG 图片

✇Vivaxy's blog
作者 vivaxy
2019年12月7日 08:00
解码 PNG 图片就是把一张图片从二进制数据转成包含像素数据的 ImageData。 图片的二进制数据可以从 <canvas>，<img>，Object URLs，Image URLs，Blob 对象上获取到。参见浏览器图像转换手册。 ImageData 是一个包括了像素数据、图片宽高数据的对象。 示例图片 👆 这是一张我们接下去要解码的图片，但它太小了，放大了展示给大家看下。👇 二进制数据 我们先从浏览器的 <input> 标签上读取到 Blob 对象，然后拿到这张图片的二进制数据。 <input type="file" /> <script> const input = document.querySelector('input'); input.addEventListener('change', async function(e) { const [file] = e.target.files; const arrayBuffer = await file.arrayBuffer(); console.log('arrayBuffer', arrayBuffer); // TODO: Let's decode arrayBuffer const imageData...

Babel 的工程化实现

✇Vivaxy's blog
作者 vivaxy
2019年11月19日 08:00
介绍 Babel 是一款将未来的 JavaScript 语法编译成过去语法的 Node.js 工具。本文从 2019 年 11 月的 master 分支源码入手，介绍 Babel 在解决这类问题时是如何划分模块。 Babel 的模块划分 其中 babel-loader 隶属于 webpack，不在 Babel 主仓库。 框架层 常见的编译器 常见的解析器有 acorn、@babel/parser (babylon)、flow、traceur、typescript、uglify-js 等，各自的 AST 语法树大致相同。 @babel/parser 的实现 关键词说明 Literal：字面量。包括：Boolean、Number、String。 Identifier：识别量。包括变量名、undefined、null 等。 Val：值。常分为左值和右值。左值表示一个可以被赋值的节点，如：[a] 等，左值往往是 Pattern、Identifier 等类型。右值表示一个代表具体值的节点，如：b.c 等，右值往往是 Expression、Identifier、Literal 等类型。左值与右值之间通过等号联结，代表赋值表达式，如：[a] = b.c。 Declaration：赋值。 Expression：表达式。常用来表示右值。常见的 Expression 有：MemberExpression、BinaryExpression、UnaryExpression、AssignmentExpression、CallExpression...

Decoding A PNG Image with JavaScript Step by Step

✇Vivaxy's blog
作者 vivaxy
2019年11月7日 08:00
Decode a PNG means to convert an image from binary data to ImageData with pixels. Image binary data can be retrieved from <canvas>, <img>, Object URLs, Image URLs, Blob. See Comprehensive Image Processing on Browsers for details. ImageData is an object with pixel data, width and height. Example Image 👆This...

Comprehensive Image Processing on Browsers

✇Vivaxy's blog
作者 vivaxy
2019年11月6日 08:00
Images can be represented in different types. They can be summarized as 5 types: DOM, URL, File, ImageData and Buffer. Image Data Types DOM <img> <img> elements load images from URL(e.g. Data URLs, HTTP URLs or Object URLs). <canvas> <canvas> elements draw images by canvas API drawImage from <img> elements....

Alfred 4 Workflow Open in VSCode

✇Vivaxy's blog
作者 vivaxy
2019年8月14日 08:00
Feature Search projects, press enter to open in VSCode. Search projects, press command + enter to reveal in Finder. Open in VSCode the folder, which selected in Finder. Installation npm i -g alfred-open-in-vscode Open the workflow in Alfred. Set workflow environment wds to your project base folders (split with ,)....

Git Tag And Push Git Tag

✇Vivaxy's blog
作者 vivaxy
2019年8月2日 08:00
Why my git tags cannot be pushed sometimes? What’s the difference between git push --follow-tags and git push --tag? There are concepts beneath the questions. Firstly, We will talk about lightweight tag and annotated tag. Lightweight Tag And Annotated Tag. Quote from Git - Tagging Git supports two types of...

基于 Custom Elements 的组件化开发

✇Vivaxy's blog
作者 vivaxy
2018年9月17日 08:00
customElements 是 Web Components 规范下的新 API，可以用来实现组件化开发。 如果你的应用只用兼容最新的 Chrome 浏览器，那么用它来替代 React 或者 Vue 是一个不错的选择。 基本用法 组件声明在一个 HTML 文件中。组件包括样式（Style），节点（DOM）和交互逻辑（Script）。一个组件文件的基本结构如下： <template> <style></style> <div>DOM 节点</div> </template> <script> const componentDocument = document.currentScript.ownerDocument; class Component extends HTMLElement { static get TAG_NAME() { return 'component-tag-name'; }; constructor() { super(); const shadow = this.attachShadow({ mode: 'closed' }); const...

JavaScript PNG 图片编码和解码

✇Vivaxy's blog
作者 vivaxy
2018年4月5日 08:00
PNG 解码是指将一张 PNG 图片的二进制数据转换成像素点数据 ImageData。 PNG 的二进制数据有很多方式获取。 在浏览器中可以得到 ArrayBuffer 类型的二进制数据： fetch(url).then(res => res.arrayBuffer()).then(res => { console.log(arrayBuffer) }); 在 Node.js 中，可以得到 Buffer 类型的二进制数据： console.log(fs.readFileSync(filename)) 在微信小程序中可以得到 ArrayBuffer 类型的二进制数据： wx.request({ url, responseType: 'arraybuffer', success: (res) => { console.log(res.data); }, }); ImageData.data 是一个 Uint8ClampedArray，其中以 R、G、B、A 的顺序保存了像素点的数据，每四项表示一个像素点。 Uint8ClampedArray 是一种 TypedArray，存储了 0-255 的数据。其中 U 表示 unsigned，也就是无符号（都是正值）。8...

如何在多个模块中共享异步数据

✇Vivaxy's blog
作者 vivaxy
2018年2月7日 08:00
背景 <html> <head> <title>HTML</title> </head> <body> <script src="./script1.js"></script> <script src="./script2.js"></script> </body> </html> script1 中有一个异步请求，script2 也想使用请求得到的数据。 方案 方案1：两个脚本中分别请求数据 script1.js： const fetchRemoteData = () => { return new Promise((resolve) => { console.log('send request'); setTimeout(() => { resolve({ message: 'OK' }); }, 3000); }); }; fetchRemoteData().then((data) => { console.log('Use data in script1', data);...

JavaScript 函数式编程初窥

✇Vivaxy's blog
作者 vivaxy
2017年11月25日 08:00
编程范式 编程范式是：解决编程中的问题的过程中使用到的一种模式，体现在思考问题的方式和代码风格上。这点很像语言，语言本身会体现出不同国家的人的思考方式和行为模式。 常见的编程范式有下面几种： 命令式编程 面向对象编程 函数式编程 除了这三个之外，我们还会接触到其他的编程范式，如：声明式。 编程范式之间不是互斥关系，而是可以结合在一起使用的。我们往往需要结合各种编程范式来完成一个程序功能。 在学习写代码的过程中，我们一般先接触命令式编程，然后学习面向对象编程，面向对象编程可以让我们很方便地处理更复杂的问题。这篇文章里，我们会介绍函数式编程。 不同的编程范式有不同的代码表现 比如从来没有坐过电梯的人，第一次坐电梯，电梯在 10 楼，人在 1 楼，他会按下，让电梯下来。按错按钮是因为他用了祈使语，而不是把自己的想法提交出去。 相似地，你写的代码就像电梯的按钮界面，是让自己或者他人阅读的。只有达成了相同的共识才能更好地理解。通过这次文章可以让大家更好地理解函数式编程。 下面是几种编程范式的代码片段： const app = 'github'; const greeting = 'Hi, this is '; console.log(greeting + app); 这是命令式编程，通过调用 const 和 console.log 进行赋值和输出。 const Program = function() { this.app = 'github'; this.greeting = function() { console.log('Hi, this...

在浏览器中使用 JavaScript 模块

✇Vivaxy's blog
作者 vivaxy
2017年9月25日 08:00
背景 Chrome 61 支持了在浏览器中使用 ES6 模块。Safari 10.1 上半年也已经支持了。 用法 <script type="module" src="module-entry.js"></script> <script nomodule type="text/javascript" src="nomodule.js"></script> 支持 ES6 模块的浏览器会根据 <script> 标签上的 type="module" 来加载 ES6 模块；而忽略带有 nomodule 的 <script> 标签。不支持的浏览器则会忽略 type="module" 的 <script> 标签，忽略 <script> 标签上的 nomodule 的属性。 使用浏览器原生对 ES6 模块的支持特性，可以享受模块级别的缓存这一优势。 在模块中引入其他模块时，需要添加 .js 后缀。模块中可以使用 export 和 import 关键字。 // module-entry.js //...

Levenshtein 距离

✇Vivaxy's blog
作者 vivaxy
2017年8月5日 08:00
简介 Levenshtein 距离是一种编辑距离，用来表示两个字符串的差异。编辑距离是指从字符串 A 开始，修改成字符串 B 的最小步骤数，每个以步骤中，你可以删除一个字符、修改一个字符或者新增一个字符。 比如我们把 acat 变成 gate 的时候，需要做如下的修改： 删除 a 把 c 改成 g 新增 e 所以 acat 和 gate 的 Levenshtein 距离是 3。 算法 这里使用动态规划的方式来实现。 记 Levenshtein 距离为 l(i, j)，i 是字符串 A 中从开头到第 i 个下标的子字符串，j 是字符串 B 从开头到第 j 个下标的子字符串，i 和 j 都从 0 开始。...
❌
❌