浅谈组件库和 SVG 图标库的解耦维护思路

2022-07-22
阅读 4 分钟
3.4k
任何的前端组件库,无论是业界内有名的 tdesign,ant-design 还是 element-ui 也好,它们都有着自己的一系列图标。经过观察发现,这些图标都是在组件库发布的时候就已经基本稳定了,鲜有调整,所以可以一直存放于组件库的 git 仓库中。

基于 AST 的代码自动生成方案

2021-11-02
阅读 3 分钟
5.1k
在项目初期的时候,我们是根据第三方提供的 d.ts 文件,手动地去撰写 JS SDK。由于这个 d.ts 经常会变动,我们需要不停地同步 JS SDK;同时由于我们的项目是多人维护的,手写的 JS SDK 难免会有许多的冲突,这些问题对于研发效率来说都是不利的。
封面图

参考 Codepen,我做了一个基于 iframe 的代码预览系统

2021-07-20
阅读 5 分钟
11.7k
一直觉得 Codepen 的在线代码预览系统很神奇,能够所见即所得地实时展示代码的运行效果,无论是代码演示,还是测试功能,都是非常方便快捷的存在。刚好最近手头有业务需要用到类似 Codepen 的能力,经过一番调研之后开发了一个具有基本的在线运行代码能力的 demo 出来。
封面图

使用 apng-js 控制 apng 动画的播放

2021-07-11
阅读 3 分钟
11.6k
apng 格式的动图是我第一次使用到的,我对它的了解仅仅局限于“会动的png图片”。后来几经搜索,总算是把 apng 的一些知识点给补全了。由于网上关于 apng 的资料非常多,因此就不在这里对 apng 进行过多的介绍了。

奇怪的知识——位掩码

2021-02-20
阅读 5 分钟
14.2k
我们知道,在计算机中数据其实都是以二进制的形式所储存的,而位运算符则可以对二进制数据进行操作。举个简单的例子,给定两个二进制数据(其中 0b 是二进制数据的前缀):
封面图

探索浏览器端的网络速度测试

2020-12-22
阅读 2 分钟
7.7k
在 Chrome 浏览器种,我们可以使用 window.navigator.connection API 中的 downlink 属性来获取实时网速:

Redis + NodeJS 实现一个能处理海量数据的异步任务队列系统

2020-10-22
阅读 8 分钟
5.9k
在最近的业务中,接到了一个需要处理约十万条数据的需求。这些数据都以字符串的形式给到,并且处理它们的步骤是异步且耗时的(平均处理一条数据需要 25s 的时间)。如果以串行的方式实现,其耗时是相当长的:

使用 babel 全家桶模块化古老的面条代码

2020-09-23
阅读 6 分钟
3.2k
想不通为啥之前维护项目的同学能够忍受这么难以维护的代码……既然现在这个锅被我拿下了,怎么着也不能容忍如此丑陋的代码继续存在着,必须把它优化一下。

【译】如何用 JavaScript 来解析 URL

2020-07-29
阅读 4 分钟
8k
统一资源定位符,缩写为URL,是对网络资源(网页、图像、文件)的引用。URL指定资源位置和检索资源的机制(http、ftp、mailto)。

【译】用Node.js编写内存效率高的应用程序

2020-01-14
阅读 7 分钟
7.3k
软件应用程序在计算机的主存储器中运行,我们称之为随机存取存储器(RAM)。JavaScript,尤其是 NodeJS (服务端 JS)允许我们为终端用户编写从小型到大型的软件项目。处理程序的内存总是一个棘手的问题,因为糟糕的实现可能会阻塞在给定服务器或系统上运行的所有其他应用程序。C 和 C++ 程序员确实关心内存管理,因为隐藏...

利用 JS 实现多种图片相似度算法

2019-12-09
阅读 13 分钟
17.4k
在搜索领域,早已出现了“查找相似图片/相似商品”的相关功能,如 Google 搜图,百度搜图,淘宝的拍照搜商品等。要实现类似的计算图片相似度的功能,除了使用听起来高大上的“人工智能”以外,其实通过 js 和几种简单的算法,也能八九不离十地实现类似的效果。

一张图理清 Vue 3.0 的响应式系统

2019-10-09
阅读 5 分钟
11.4k
随着 Vue 3.0 Pre Alpha 版本的公布,我们得以一窥其源码的实现。Vue 最巧妙的特性之一是其响应式系统,而我们也能够在仓库的 packages/reactivity 模块下找到对应的实现。虽然源码的代码量不多,网上的分析文章也有一堆,但是要想清晰地理解响应式原理的具体实现过程,还是挺费脑筋的事情。经过一天的研究和整理,我把...

探索如何使用 JSON.stringify() 去序列化一个 Error

2019-09-18
阅读 3 分钟
5.6k
最近在做 Node 服务端需求的时候,遇到了几次服务端报错的问题。打 log 发现均是一些 Error,但是它们都没法很好地透传给前端浏览器,出现问题只能查看服务端机器的日志,调试起来非常不方便。思考了一下,服务端的内容都是通过 JSON.stringify() 处理,然后设置 Content-type: text/json 的响应头以后再传给前端的,如...

GraphQL 项目中的前端 mock 方案

2019-09-05
阅读 4 分钟
3.4k
在使用 GraphQL (以下简称 gql)的前端项目中,往往需要等待后台同学定义好 Schema 并架设好 Playground 以后才能进行联调。如果后台同学阻塞了,前端只能被动等待。如果对于 gql 项目来说也能够和 REST 一样有一套 mock 方案就好了。经过一系列实践,我选择了 mocker-api 加 Apollo 的方案来实现。

来自 Vue 3.0 的 Composition API 尝鲜

2019-08-27
阅读 8 分钟
25k
虽然 Vue 3.0 尚未发布,但是其处于 RFC 阶段的 Composition API 已经可以通过插件 @vue/composition-api 进行体验了。接下来的内容我将以构建一个 TODO LIST 应用来体验 Composition API 的用法。

项目中使用 TypeScript 的一些感悟

2019-07-07
阅读 3 分钟
9.8k
上周发布了一款名为 Smartour 的工具,是完全采用 TypeScript (以下简称 ts)来开发的。抛开以前做业务的时候的不完全使用,这次实践可以算是我第一次真正意义上的使用 ts。由于写法上的不同,以及对不熟悉事物的新鲜感,在这次项目开发的过程中着实有着许多感悟,于是打算写篇小东西好好记录下来。

Smartour——让网页导览变得更简单

2019-07-02
阅读 3 分钟
7k
在遇到网页内容有着较大调整的时候,往往需要一个导览功能去告诉用户,某某功能已经调整到另外一个位置。比较常规的办法是添加一个蒙层,高亮显示被调整的区域,然后通过文字介绍去完成引导。我们把这个功能称为“导览”,而 Smartour 则把这个导览的功能抽离出来,提供了一个开箱即用的解决方案。

在小程序中实现 Mixins 方案

2019-06-19
阅读 4 分钟
15.7k
在原生开发小程序的过程中,发现有多个页面都使用了几乎完全一样的逻辑。由于小程序官方并没有提供 Mixins 这种代码复用机制,所以只能采用非常不优雅的复制粘贴的方式去“复用”代码。随着功能越来越复杂,靠复制粘贴来维护代码显然不科学,于是便寻思着如何在小程序里面实现 Mixins。

详解 Github App 的玩法

2019-05-30
阅读 4 分钟
10.6k
之前在使用 Github issues 搭建博客平台的时候,研究过一番如何取得 Github 授权并调用 API 的办法。后来选择了较简单的账号密码和 Token 的方法。但是有读者反馈这样的操作依然稍显麻烦,且在第三方的页面输入账号密码总感觉不安全。后来经过研究,总算找到了 Github App 这种更为优雅的办法。

为什么我选择用 Github issues 来写博客

2019-05-22
阅读 4 分钟
6.8k
对于爱写东西的人来说,挑一个合适的博客平台是非常重要的。而作为一个 Web 开发者,我们肯定都希望能够拥有一个高度定制化的博客平台,用以展示我们独一无二的个性以及记录长久以来的学习工作等。与此同时,我们也希望这个平台可以让我们方便地发布内容,提供完整的点赞、留言等操作。在经历过 Hexo,Wordpress,自行搭...

基于 Github API 的图床 Chrome 插件开发全纪录

2019-05-08
阅读 5 分钟
5.9k
最近基于 Github API 开发了一款图床 Chrome 插件 Picee,现在已经开源并上架 Chrome 应用商店。当中的过程涉及到一些有趣的知识点,故将其记录下来。

DIY 一个 Vuex 持久化插件

2019-04-02
阅读 6 分钟
4.2k
在做 Vue 相关项目的时候,总会遇到因为页面刷新导致 Store 内容丢失的情况。复杂的项目往往涉及大量的状态需要管理,如果仅因为一次刷新就需要全部重新获取,代价也未免太大了。

Web聊天工具的富文本输入框

2019-03-02
阅读 8 分钟
12.9k
最近折腾 Websocket,打算开发一个聊天室应用练练手。在应用开发的过程中发现可以插入 emoji ,粘贴图片的富文本输入框其实蕴含着许多有趣的知识,于是便打算记录下来和大家分享。

前端与编译原理——用JS写一个JS解释器

2018-12-03
阅读 14 分钟
32.3k
说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念。作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于“抽象语法树(AST)”。但这仅仅是个开头而已。编译原理的使用,甚至能让我们利用JS直接写一个能运行JS代码的解释器。

打包工具的配置教程见的多了,但它们的运行原理你知道吗?

2018-06-14
阅读 6 分钟
10.7k
前端模块化成为了主流的今天,离不开各种打包工具的贡献。社区里面对于webpack,rollup以及后起之秀parcel的介绍层出不穷,对于它们各自的使用配置分析也是汗牛充栋。为了避免成为一位“配置工程师”,我们需要来了解一下打包工具的运行原理,只有把核心原理搞明白了,在工具的使用上才能更加得心应手。

从一行等式理解JS当中的call, apply和bind

2018-04-04
阅读 3 分钟
4k
关于JS当中的call,apply和bind,相信大家和我一样,已经看过了无数篇相关的文章,都有自己的理解。所以这篇文章并非什么科普类的文章,仅仅是把我自己的理解记录下来。

深入认识vue-cli:能做的不仅仅是初始化vue工程

2017-10-20
阅读 4 分钟
16k
相信对于大部分使用过VueJS的同学来说,vue-cli是他们非常熟悉的一个工具。借助vue-cli,我们通过非常简单的问答形式,方便地初始化一个vue工程,完全不需要担心繁复的webpack、eslint配置等等。

深入浅出基于“依赖收集”的响应式原理

2017-09-13
阅读 8 分钟
13.2k
每当问到VueJS响应式原理,大家可能都会脱口而出“Vue通过Object.defineProperty方法把data对象的全部属性转化成getter/setter,当属性被访问或修改时通知变化”。然而,其内部深层的响应式原理可能很多人都没有完全理解,网络上关于其响应式原理的文章质量也是参差不齐,大多是贴个代码加段注释了事。本文将会从一个非常...

使用offline-plugin搭配webpack轻松实现PWA

2017-08-15
阅读 6 分钟
21.9k
谈起PWA,许多人可能还只停留在“了解”的层面,比较少在实践中真正地尝试过,更多的仅仅是对着网上的教程和例子大概玩过。然而,网络上的例子多是简单的demo,鲜有与真正的开发相结合,例如和webpack的工程化结合。这篇文章将会从一个webpack plugin出发,谈一谈如何使用这个名为offline-plugin的webpack插件轻松实现PWA。

组件化开发与黑箱

2017-07-28
阅读 3 分钟
7.1k
在如今的前端开发中,“组件化”已经成为了一种流行,随之而来的各种开发框架更是把这一概念发扬光大。但是概念归概念,真正的“组件化”实践还是有许多值得探讨的地方,其中“黑箱”是我认为最具有代表性的实践方式。今天就让我们抛开具体的框架,直接来谈一谈“组件化开发”与“黑箱”。