jrainlau.github.io
jrainlau.github.io copied to clipboard
jrainlau
My personal blog.
 前段时间，Vue 官方释出了 [Composition API RFC](https://vue-composition-api-rfc.netlify.com/) 的文档，我也在收到消息的第一时间上手尝鲜。 虽然 Vue 3.0 尚未发布，但是其处于 RFC 阶段的 Composition API 已经可以通过插件 [@vue/composition-api](https://github.com/vuejs/composition-api) 进行体验了。接下来的内容我将以构建一个 TODO LIST 应用来体验 Composition API 的用法。 > 本文示例的代码：https://github.com/jrainlau/vue-composition-api-demo # 一、Vue 2.x 方式构建应用。...
 在原生开发小程序的过程中，发现有多个页面都使用了几乎完全一样的逻辑。由于小程序官方并没有提供 Mixins 这种代码复用机制，所以只能采用非常不优雅的复制粘贴的方式去“复用”代码。随着功能越来越复杂，靠复制粘贴来维护代码显然不科学，于是便寻思着如何在小程序里面实现 Mixins。 ## 什么是 Mixins Mixins 直译过来是“混入”的意思，顾名思义就是把可复用的代码混入当前的代码里面。熟悉 VueJS 的同学应该清楚，它提供了更强大了代码复用能力，解耦了重复的模块，让系统维护更加方便优雅。 先看看在 VueJS 中是怎么使用 Mixins 的。 ```javascript // define a mixin object var myMixin = { created: function ()...
 说到劫持，第一反应可能是什么不好的东西。函数劫持并不邪恶，关键是看使用的人。虽然这个概念在前端领域使用较少，但是在安全领域、自定义业务等场景下还是有一定的使用价值的。所以，这一篇文章将会和大家一起去了解一下JS中的函数劫持是什么，有什么用。 ## 基本概念 函数劫持，顾名思义，即在一个函数运行之前把它劫持下来，添加我们想要的功能。当这个函数实际运行的时候，它已经不是原本的函数了，而是带上了被我们添加上去的功能。这也是我们常见的`钩子函数`的原理之一。 乍一看上去，这很像是函数的改写。函数的改写也可以理解为是函数劫持的一种，但是这种方式太恶心了。作为一个劫持者，在绑票获得好处以后也应该遵守职业道德，把人原封不动地还回去，所以我们得在合适的地方把函数原本的功能给重新调用回来。 推而广之，其实“劫持”这一概念我们经常会遇到，比方说某网站被运营商劫持了，在浏览该网站的时候会弹出运营商的广告。 ## 举例分析 现在我们来举个简单的例子，劫持一下`alert()`函数，为它增添一点小小的功能： ``` let warn = alert window.alert = (t) => { if (confirm('How are you?')) warn(t) } alert('Help me...!!!') ``` 可以打开开发者工具尝试一下这个例子，你会发现只有你在`confirm`里面点击了OK，才会弹出`Help...
 在遇到网页内容有着较大调整的时候，往往需要一个导览功能去告诉用户，某某功能已经调整到另外一个位置。比较常规的办法是添加一个蒙层，高亮显示被调整的区域，然后通过文字介绍去完成引导。我们把这个功能称为“导览”，而 **Smartour** 则把这个导览的功能抽离出来，提供了一个开箱即用的解决方案。 > 项目地址：https://github.com/jrainlau/smartour > 官方示例：https://jrainlau.github.io/smartour # Install **Smartour** 被构建成了 `umd` 和 `es module` 模块，允许用户通过不同的方式引入。 ``` npm install smartour ``` ``` /* ES Modules */ import Smartour...
 之前在使用 Github issues 搭建博客平台的时候，研究过一番如何取得 Github 授权并调用 API 的办法。后来选择了较简单的账号密码和 Token 的方法。但是有读者反馈这样的操作依然稍显麻烦，且在第三方的页面输入账号密码总感觉不安全。后来经过研究，总算找到了 Github App 这种更为优雅的办法。 ## 什么是 Github App 要回答这个问题，可以直接套用[官方文档](https://developer.github.com/apps/about-apps/#about-github-apps)的说法： > GitHub Apps are first-class actors within GitHub. A GitHub App...
 说起编译原理，印象往往只停留在本科时那些枯燥的课程和晦涩的概念。作为前端开发者，编译原理似乎离我们很远，对它的理解很可能仅仅局限于“抽象语法树（AST）”。但这仅仅是个开头而已。编译原理的使用，甚至能让我们利用JS直接写一个能运行JS代码的解释器。 > 项目地址：https://github.com/jrainlau/canjs > > 在线体验：https://codepen.io/jrainlau/pen/YRgQXo ## 一、为什么要用JS写JS的解释器 接触过小程序开发的同学应该知道，小程序运行的环境禁止`new Function`，`eval`等方法的使用，导致我们无法直接执行字符串形式的动态代码。此外，许多平台也对这些JS自带的可执行动态代码的方法进行了限制，那么我们是没有任何办法了吗？既然如此，我们便可以用JS写一个解析器，让JS自己去运行自己。 在开始之前，我们先简单回顾一下编译原理的一些概念。 ## 二、什么是编译器 说到编译原理，肯定离不开编译器。简单来说，当一段代码经过编译器的词法分析、语法分析等阶段之后，会生成一个树状结构的“抽象语法树（AST）”，该语法树的每一个节点都对应着代码当中不同含义的片段。 比如有这么一段代码： ```javascript const a = 1 console.log(a) ``` 经过编译器处理后，它的AST长这样： ``` { "type": "Program", "start": 0,...
 最近折腾 Websocket，打算开发一个聊天室应用练练手。在应用开发的过程中发现可以插入 emoji ，粘贴图片的富文本输入框其实蕴含着许多有趣的知识，于是便打算记录下来和大家分享。 仓库地址：[chat-input-box](https://github.com/jrainlau/chat-input-box) 预览地址：https://codepen.io/jrainlau/pen/wOMOYw 首先来看看 demo 效果：  是不是觉得很神奇？接下来我会一步步讲解这里面的功能都是如何实现的。 ## 输入框富文本化 传统的输入框都是使用 `` 来制作的，它的优势是非常简单，但最大的缺陷却是无法展示图片。为了能够让输入框能够展示图片（富文本化），我们可以采用设置了 `contenteditable="true"` 属性的 `` 来实现这里面的功能。 简单创建一个 `index.html` 文件，然后写入如下内容： ```html ``` 打开浏览器，就能看到一个默认已经带了一张图片的输入框：  光标可以在图片前后移动，同时也可以输入内容，甚至通过退格键删除这张图片——换句话说，图片也是可编辑内容的一部分，也意味着输入框的富文本化已经体现出来了。 接下来的任务，就是思考如何直接通过...
 前端模块化成为了主流的今天，离不开各种打包工具的贡献。社区里面对于webpack，rollup以及后起之秀parcel的介绍层出不穷，对于它们各自的使用配置分析也是汗牛充栋。为了避免成为一位“配置工程师”，我们需要来了解一下打包工具的运行原理，只有把核心原理搞明白了，在工具的使用上才能更加得心应手。 本文基于[parcel][1]核心开发者[@ronami][2]的开源项目[minipack][3]而来，在其非常详尽的注释之上加入更多的理解和说明，方便读者更好地理解。 # 1、打包工具核心原理 顾名思义，打包工具就是负责把一些分散的小模块，按照一定的规则整合成一个大模块的工具。与此同时，打包工具也会处理好模块之间的依赖关系，最终这个大模块将可以被运行在合适的平台中。 打包工具会从一个入口文件开始，分析它里面的依赖，并且再进一步地分析依赖中的依赖，不断重复这个过程，直到把这些依赖关系理清挑明为止。 从上面的描述可以看到，打包工具最核心的部分，其实就是处理好模块之间的依赖关系，而minipack以及本文所要讨论的，也是集中在模块依赖关系的知识点当中。 为了简单起见，minipack项目直接使用ES modules规范，接下来我们新建三个文件，并且为它们之间建立依赖： ``` /* name.js */ export const name = 'World' ``` ``` /* message.js */ import { name } from './name.js'...
 > 原文链接： https://davidwalsh.name/javascript-tricks 和所有其他的编程语言一样，JS拥有着许多能够胜任简单或复杂功能的小技巧。有些小技巧足够让你大吃一惊。让我们一起来见识一下下面的7个JS小技巧，并立刻用起来吧！ ## 数组去重 数组去重往往比你想象的要简单： ```javascript var j = [...new Set([1, 2, 3, 3])] >> [1, 2, 3] ``` 我爱结构运算符和 `Set` 的组合。 ## 数组和布尔值 需要过滤掉数组中的非真值（0, `undefined`, `null`,...