用 TypeScript 来写 Vue!

本文不说明 webpack 的配置,简单介绍如何使用 TypeScript 来书写 Vue,阅读本文应同时对 TypeScript 和 Vue 有一定的了解。

初识 AST

在计算机科学中,抽象语法树(Abstract Syntax Tree,AST),或简称语法树(Syntax tree),是源代码语法结构的一种抽象表示。它以树状的形式表现编程语言的语法结构,树上的每个节点都表示源代码中的一种结构。

Babel、UglifyJS2、ESLint、Webpack、TypeScript 等我们熟知的工具都包含 AST 的应用,实现了强大的功能。本文主要记录学习、应用 AST 的过程,主要内容:1. 解读 react-hot-loader dev 环境下的 Babel 插件;2. 编写对应的 TypeScript transformer 尽可能实现相同的功能。

记一次单页应用的加载优化

如今的前端页面越来越丰富了,承载着各种功能。而随之增长的则是相应的代码量,加上三方 SDK 的接入以及单页应用(SPA)的特性,一次页面访问会出现慢的感觉,是时候来关注页面的加载优化了。

本文简略描述关于 React 单页应用的加载优化,下文所指加载一般包括下载、执行两个步骤。

将并发的异步操作转化为串行执行

情景还原:有一个用 Promise 封装的异步操作,用于 JS 与客户端交互以获取数据,但当出现并发调用获取数据的时候发现只有其中的一次操作有回调,而剩余的调用就像丢失了一样、后续的步骤(then)也得不到执行。实际上有多种解决方式,这里考虑将这些并发的调用转化为串行执行来确保每次的调用接收到回调。虽然感觉这样做可能意义不是很大,但感觉颇有意思。

简单学习 antd 的 build 步骤

想到去学习 antd 的打包步骤是因为自己学习制作 npm 模块时遇到了疑惑。查看antd(v3.9.2)的包,我们可以在目录下找到dist/lib/es/这三个目录,而且在package.json中指定的入口是lib/"main": "lib/index.js")。然而我只会使用webpack打包出一个dist/目录,于是查看了 antd 的相关内容进行了学习。

package.json 中依赖包的版本控制

package.json中对依赖包的版本使用^~等时需要注意的地方。 package.json 详细说明

TypeScript 中的声明文件

学习 TypeScript 稍微有一段时间了,每次写都会碰到有关声明文件的问题,目前为止暂未完全搞清楚,在此记录一些相关问题,以后碰到能够迅速解决。

[译] 前端编程中 10 条你需要了解的原则

简单的前端脚手架

从零搭建一个简单的脚手架工具,像vue-cli一样,一个命令就能变出一个完整结构的初始项目。流行的脚手架工具有很多实用的功能,这里要说的是最基本的一项:通过一个命令快速创建出初始项目。

使用promise封装setTimeout

使用 Promise 对 setTimeout 进行封装,从而支持链式的调用。

const delay = (func, millisec, options) => {
  let timer = 0
  let reject = null
  const promise = new Promise((resolve, _reject) => {
    reject = _reject
    timer = setTimeout(() => {
      resolve(func(options))
    }, millisec)
  })

  return {
    get promise() {
      return promise
    },
    cancel() {
      if (timer) {
        clearTimeout(timer)
        timer = 0
        reject(new Error('timer is cancelled'))
        reject = null
      }
    },
  }
}

使用🌰:

const d = delay(({a, b}) => {
  console.log(a, b)
  return a + b
}, 2000, {a: 1, b: 3})

d.promise.then((result) => {
  console.log('result', result)
}).catch((err) => {
  console.log(err)
})

// cancel
// setTimeout(() => {
//   d.cancel()
// }, 1000)