前言

自从小程序自定义组件和 npm 功能面世之后，组件化和开源思想逐步开始萌芽了。我们可以将一些通用的部件，如自定义导航栏之类的封装到一个自定义组件中，然后借由 npm 平台开源出去给其他开发者使用，这样可以省去很多劳动。相信各位开发老爷们应该或多或少都有过使用开源包的经历，但是在使用前，这个开源包得能赢取我们的信任，一个很重要的指标就是单元测试通过率和覆盖率。

但是因为小程序独特的运行环境和不完全开源的基础款，使得对小程序自定义组件的单元测试稍微有点困难。目前市面上无论是 vue 还是 react，这些组件化框架都有一套完善的单元测试解决方案，但是对于小程序自定义组件来说却寥寥无几，因此这个工具集—— miniprogram-simulate 便应运而生了。

前言

在现在表情包横行的年代，相信大家对表情动图已经不陌生了，这些动图通常就是我们使用的 gif 图（比如下图）。所谓动图就是会动的图片，而其会动的原理跟动画、影视剧一样，通过连续播放图片让我们从视觉感官上认为图片会动。那么 gif 图片又是如何将动图中的每一帧存储下来的呢，这下就需要我们动起刀子，解剖一下 gif 图。

简介

gif 图本身无需过多介绍，相信这个星球上的人类基本上没有没接触过的吧。但是从专业的角度上来介绍的话，gif 图是一种基于 LZW 算法的 8 位连续色调的无损压缩格式，某种程度上来说和 png 图的格式有点相似（索引、无损压缩等）。其中 LZW 算法上一种压缩算法，需要注意的是 gif 使用的 LZW 算法并不是原本的 LZW 算法，而是经过稍微改造后的 LZW 算法。

前言

前文已经讲解过如何解析一张 png 图片，然而对于扫描算法里只是说明了逐行扫描的方式。其实 png 还支持一种隔行扫描技术，即 Adam7 隔行扫描算法。

优劣

使用隔行扫描有什么好处呢？如果大家有去仔细观察的话，会发现网络上有一些 png 图在加载时可以做到先显示出比较模糊的图片，然后逐渐越来越清晰，最后显示出完整的图片，类似如下效果：

这就是隔行扫描能带来的效果。隔行扫描一共会进行 1 到 7 次扫描，每一次都是跳着部分像素点进行扫描的，先扫描到像素点可以先渲染，每多一次扫描，图片就会更清晰，到最后一次扫描时就会扫描完所有像素点，进而渲染出完整的图片。

当然，也因为要进行跳像素扫描，整张图片会存储更多额外数据而导致图片大小会稍微变大，具体增加了什么额外数据下文会进行讲解。

前言

现在时富媒体时代，图片的重要性对于数十亿互联网用户来说不言而喻，图片本身就是像素点阵的合集，但是为了如何更快更好的存储图片而诞生了各种各样的图片格式：jpeg、png、gif、webp 等，而这次我们要拿来开刀的，就是 png。

简介

首先，png 是什么鬼？我们来看看 wiki 上的一句话简介：

Portable Network Graphics (PNG) is a raster graphics file format that supports lossless data compression.

也就是说，png 是一种使用无损压缩的图片格式，而大家熟知的另外一种图片格式——jpeg 则是采用有损压缩的方式。用通俗易懂的方式来讲，当原图片数据被编码成 png 格式后，是可以完全还原成原本的图片数据的，而编码成 jpeg 则会损耗一部分图片数据，这是因为两者的编码方式和定位不同。jpeg 着重于人眼的观感，保留更多的亮度信息，去掉一些不影响观感的色度信息，因此是有损耗的压缩。png 则保留原始所有的颜色信息，并且支持透明／alpha 通道，然后采用无损压缩进行编码。因此对于 jpeg 来说，通常适合颜色更丰富、可以在人眼识别不了的情况下尽可能去掉冗余颜色数据的图片，比如照片之类的图片；而 png 适合需要保留原始图片信息、需要支持透明度的图片。

前言

看到这个标题，估计有同学会想，又要重复造轮子么？其实重复造轮子在大多数情况下确实是不太可取的，既浪费了精力又浪费了时间。但这并不能说明重复造轮子完全不可取，比如你想要某个轮子的精简版，又比如你想学习某个轮子的制造方法，重复造轮子也可以是有意义的。

简介

接下来，我们就来学学某个轮子简易版制造方法，这个轮子就是模块加载工具。

说起模块加载工具，估计大家就会想起 webpack、commonjs 等，更“ 久远” 一点的会想起 requirejs 和 seajs。这些工具都源于前端的模块化思想。

为什么前端需要模块化？这主要得益于前端技术的发展，使得前端不再像以前那样只能展示一下静态内容，撑死加上几个飞来飞去的动画。现在的前端内容越来越丰富，我们可以播放视频，可以协同工作，还可以玩游戏。这就导致了前端代码量剧增。当代码行数噌噌噌往上涨时，模块化思想就自然而然地出来了。

简介

模板引擎，其实就是一个根据模板和数据输出结果的一个工具。

我们要开发一个将模板文件转换成我们实际要使用的内容的工具，这个工具就是模板引擎。我们把模板文件里的内容当成字符串传入到模板引擎中，然后模板引擎根据一定语法对该字符串进行解析处理，然后返回一个函数，之后我们在执行函数时把数据传输进去，即可拿到根据模板和数据得到的新字符串。最后我们想怎么处理该字符串就看需求了，如果用于前端模板生成的话，则可以用 dom 的 innerHTML 这个属性来追加内容。

目前前端的模板引擎多得数不胜数，语法特性也花样百出，用行内的话来说，我们要实现的是一种基于字符串的模板引擎。