介绍

这又是一次目标回收计划，早在 2021 年我还在广泛地写 TypeScript 代码时就想完成这样一个插件来满足我“不打断心流地引入模块”的需求，但“新建文件夹”之后我一直没有实际的迭代动作。直到最近高频写 Go 代码时，才真正意识到这个需求的重要性。于是我又重新打开了这个项目的代码仓库。

这是一个 VSCode 插件，叫做 YAI，全称 Yet Another Importer，英文项目命名的 Yet Another 数不胜数，我也随波逐流一次。这个插件是用来帮助开发者方便地引入模块的，它可以自动识别当前项目中的依赖，并且扫描项目本地的文件，统计当前项目中引入模块的规律和频次，在需要引入模块时给出相应提示，并且以编程语言“原生”的方式将模块引入到代码中。何为“原生”，也就是适应当前项目编程语言的引入方式，比如在 JavaScript 项目中，它会使用 import 或 require 语句引入模块，而在 Python 项目中，它会使用 import 语句引入模块，在 Go 项目中，它会使用别名来引入模块等。

目前这个插件还处于开发阶段，但是已经可以在 Go 语言中使用了。目前规划的编程语言还有 ECMAScript、Python、C/C++ 这几种。该插件的代码仓库在 Github 代码仓库中，如果你也对这个插件感兴趣，欢迎使用或者参与开发。

插件已发布，可以在 yai - VSCode Marketplace 查看安装。

这篇文章可以算作插件的设计文档，我会在这里记录一些关于这个插件的设计思路和实现细节。

这篇博客其实是以一次公司内的技术分享为基础做的调研和总结归纳，包含了我自己很多不成熟的观点看法。这次分享主要是想向新同事介绍为什么我们选择在项目中大规模使用 GraphQL 而不是更传统更简单的 RESTful API。

GraphQL 是什么

在上一篇有关 GraphQL 的博客里，我简单地说明了 GraphQL 的定义及其大致用途，贴了官网链接就开始介绍我使用 GraphQL 的“更优雅的”方式，对 GraphQL 本身描述得并不多。这里又贴一下英文的定义：A query language for your API

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

划重点，它是一种查询语言和使数据可查询的运行时。作为一种语言，它有自己的语法，能够定义Type, Enum, Input, Fragment, Query, Mutation等元素，熟悉 Typescript 的朋友会对此感到亲切。而在前端开发中需要重点关注的是以下几个部分：

断断续续写前端项目也有好几年了，从大二接触 Javascript 和 Vue 时的兴奋，到接触小程序和 React 时的“渐入佳境”，再到这段时间的感到无比疲惫，我希望我在前端开发上大规模投入的阶段先暂告一段落了。为什么有这样的疲惫感呢？原因总结起来有以下几点：

1. 前端开发面临的大多不是技术问题，是产品问题或美学问题，最终目标是让用户满意；
2. 前端开发过于琐碎，需要处理的细枝末节极多，每个页面元素都有相应的状态需要管理；
3. 前端难于抽象，对应到用户上则表现为具体业务需求是千变万化的。

起因

「代码写了不测等于白写」我总是跟身边的朋友这样调侃。然而我们写前端项目时很难在代码层面进行测试，大部分函数都是基于事件响应，接收用户输入的参数，并对页面组件或数据产生一定副作用，Mock 起来很麻烦。所以前端项目的测试往往都是端到端测试，即模拟用户在页面上进行操作，测试路径越离奇越好，因为无法提前预知用户会如何使用，所以最好在测试时可劲儿造。

曾经还会想着用 Cypress 等自动化工具进行端到端测试，例如用代码定义【打开某页面–>拖拽滑动条至页面下方–>点击输入框使之获取焦点–>输入“Hello world”–>按下回车–>等待页面响应–>观察响应是否符合预期】这个过程，但只要遇到元素稍多的页面，编写测试用例的过程就会变得机械呆板。

如果组件足够小，内容够聚焦，那么测一下也不是不可以。因为想在不同的项目中复用同一套富文本编辑组件(体积比较大，且包含机器构建的 JS)，我把它单独提出来作为 NPM 包发布以便各个项目安装使用。这当中编码和测试都遇到了一些问题。

关于 GraphQL，它的官网(需要科学上网)是这样介绍的：

GraphQL 既是一种用于 API 的查询语言也是一个满足你数据查询的运行时。 GraphQL 对你的 API 中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让 API 更容易地随着时间推移而演进，还能用于构建强大的开发者工具。

作为 RESTful API 的竞品，GraphQL 从开源之初就备受关注，一是因为它是由 Facebook 开源的项目，二是它挑战了 RESTful API 的地位，这是很关键的一点。RESTful API 利用 URI 的具体内容和请求方法来区分请求的资源或者方法，其中的资源 URI 容易与路由路径产生混淆和重复；资源数量达到一定的数目之后，如何给资源 URI 起名或许也是一件困难的事情。而 GraphQL 则鼓励开发者将所有需要请求的信息显式的写在请求体当中，精确到具体的字段，不多也不少。

我参与的几个项目都是用 GraphQL 作为 API 的基础，我总结出了一个在前端相对优雅地使用 GraphQL 的方法。这篇博客不讨论 GraphQL 的基本概念，主要介绍这个方法。（为省篇幅，这篇博客里面的代码均不做异常处理）

从本科到现在总共参加过三次微信小程序大赛，前几天刚完成赛区决赛的答辩，心想着以后应该都不想再参加了，于是想记录一下这次的参赛经历。

2018 和 2020

2018 阴差阳错

微信小程序从 2017 年正式上线博得广大关注，在第二年 2018 年春季，微信就推出了全国高校微信小程序开发大赛，吸引了很多大学生参加，我就是其中一个。正在读大二的我报名了一位学长组织的 SRT(Student Research Training) 项目，原本的题目是要开发一款在线客服平台。然而当时已经把项目申请里面提到的客服平台提前完成了，于是我们真正做的就变成了小程序。甚至还用这个小程序参加了第一届的微信小程序大赛。

学习 React 的初衷

之前说过想要学习 React，秉持着边学边记录的想法，我随即开启了这篇帖子。

从 Vue 说起

我是一个 Vue 的忠实粉丝，虽然没有全部读过 Vue 的源码，但是对它的基本实现原理和大体的使用方法还是比较熟悉的。我自己思考过，我觉得我喜欢 Vue 大概率是因为我最早接触的前端开发框架就是 Vue。记得是 2018 年参加一项 SRT 的时候，为了开发一款简单的后台管理系统，我开始学习 javascript 以及 Vue。

当时我还是第一次接触脚本语言，对没错，我接触 javascript 比接触 python 更早一些。熟悉了 C/C++ 的继承机制之后，突然要接受 javascript 的原型链继承一时间有点缓不过来。但是后来还是被磨平了棱角，被迫接受了原型这一设计。为了开发 Web 应用通过一位学长的介绍接触到了 Vue 这个框架。我直接惊为天人，还能这样写？因为根据我更早之前的一些浅显的印象，Web 开发是分别要编写 HTML，javascript 和 CSS 三种文件的。现在用 Vue 一个文件就可以生成一个完好的页面，着实非常酷炫。也是在 Vue 这里，我了解到了组件、生命周期、全局状态管理、前端路由等等一些重要的概念，所以先入为主地对 Vue 有强烈好感也正常吧。

在上一篇博客《聊聊微信小程序及其框架》里面立了个调研微信小程序开发框架的 flag ，这篇博客就来填这个坑——我迫不及待地想要掌握一个能够“舒适编写”小程序代码的框架。

我之前提到我最想先要了解的是 WePY 和 uni-app 这两个小程序框架，WePY 是微信官方出品的小程序框架，uni-app 是使用 Vue 开发小程序的最火的小程序框架，但是这两个框架都让我特别失望。

为什么是微信小程序

微信很早就有一套专用的JS-SDK在微信客户端上面使用，其开放了录音、二维码、地图、支付等几十个 API，能够支持微信服务号的运转，当时大部分支付、扫码等功能的对接方都是这样的服务号。但是在 2016 年 1 月 11 日微信之父张小龙表示服务号还不够优秀，微信正在研究一个新的服务形态，起名叫做“微信小程序”。在 2017 年 1 月 9 日，第一批微信小程序低调上线，而选择这一天也是为了向 iPhone 1 代的发布致敬。

背景

“活动宣传写个H5就可以了”，”学生节不如做一个H5小游戏吧，比如之前那种学堂路躲避乌鸦“……在这几年的学习和生活中我听到过很多次H5，也真正看到过、使用过、制作过H5，但是我对H5这一个词的真正定义还是不太了解。它给我的直观印象就是在手机上运行的、包含许多动画甚至音乐的纯前端/弱后端页面，最常见于微信群、公众号和朋友圈，或许这也是大多数人对其的印象。对自己接触的东西一点也不了解是不能接受的，所以要简单调查调查。

H5的由来

几种定义

• h5是HTML的第5级标题标签；
• H5是在手机上运行的、包含许多动画甚至音乐的纯前端/弱后端页面；
• h5是2014年10月由W3C制定的HTML新一代标准，其中包含了新标签、新属性、多媒体和本地存储等特性。