最近有个小程序项目需要迭代，但是迭代任务不多，时间比较充裕。而这个小程序最早是在18年的时候开发的，用的开发框架是 WePY 的 1.7.2 版本，去年也就是 19 年的时候 WePY 框架进行了升级，到了 2.0 版本。升级之后的 WePY，用 WePY 官方文档的话来说：通过优化细节，引入 Promise、Async Functions 等让开发小程序项目变得更加简单，高效。基于这些背景，我和小伙伴一拍即合，决定对我们的项目进行框架升级，体验下到底 WePY2 能给我们带来什么。

本文将以项目改动为出发点，基于当前这个项目的结构和编码方式来考虑到底升级 WePY2 后，哪里需要改，怎么改以及有哪些需要注意的地方，通过对比 2 个版本的写法差异这个思路来写，不会去太较真 WePY2 相对于 WePY1 实现或原理上的区别。下面我将一条一条的列出来需要改动的点。

本篇文章记录的是我和小伙伴这次升级框架遇到的需要改动的地方和坑，所使用的是 wepy 的 2.1.0 版本，后续如果版本升级后，本篇记录到的坑如果已经被修复了，请自行忽略本文所述的问题。另外下文中所说到的 2.x 版本都是指 wepy_v2.1.0。

JavaScript中有哪些数据类型？

计算机世界中定义的数据类型其实就是为了描述现实世界中存在的事实而定义的。比如我们用人来举例：

1. 有没有人在房间里？这里的有和没有就是是或者非的概念，在 JS 中对应 Boolean 类型，true 表示是，false 表示非；

2. 有几个人在房间里？这里的几个表示的是一个量级概念，在 JS 中对应 Number 类型，包含整数和浮点数，还有一些特殊的值，比如：-Infinity 表示负无穷大、+Infinity 表示正无穷大、NaN 表示不是一个数字；

3. 房间里的这些人都是我的朋友。这是一句陈述语句，这种文本类的信息将会以字符串形式进行存储，在 JS 中对应 String 类型；

4. 房间里没有人。这里的没有代表无和空的概念，在 JS 中 null 和 undefined 都可以表示这个意思；

5. 现实世界中所有人都是独一无二的，这在 JS 中对应 Symbol 类型，表示唯一且不可改变；

6. Number 所表示的整数是有范围的，超出范围的数据就没法用 Number 表示了，于是 ES10 中提出了一种新的数据类型 BigInt，能表示任何位数的整数；

7. 以上提到的 Boolean、Number、String、null、undefined、Symbol 和 BigInt 等7种类型都是 JavaScript 中的原始类型，还有一种是非原始类型叫做对象类型；比如：一个人是对象，这个人有名字、性别、年龄等；

   1 2 3 4 5

   let person = { name: 'bubuzou', sex: 'male', age: 26, }

介绍

Vue-Test-Utils 是 Vue.js 官方的单元测试实用工具库，它提供了一系列的 API 来使得我们可以很便捷的去写 Vue 应用中的单元测试。

主流的单元测试运行器有很多，比如 Jest、Mocha 和 Karma 等，这几个在 Vue-Test-Utils 文档里都有对应的教程，这里我们只介绍 Vue-Test-Utils + Jest 结合的示例。

Jest 是一个由 Facebook 开发的测试框架。Vue 对其进行描述：是功能最全的测试运行器。它所需的配置是最少的，默认安装了 JSDOM，内置断言且命令行的用户体验非常好。不过你需要一个能够将单文件组件导入到测试中的预处理器。我们已经创建了 vue-jest 预处理器来处理最常见的单文件组件特性，但仍不是 vue-loader 100% 的功能。

创建版本库

• git clone url 克隆远程版本库
• git init 初始化本地版本库

最近做项目的时候有一个发布新闻的需求，新闻编辑的时候要求能发布带格式的文本内容和能展示支持图片。
由于项目是用vue开发的，所以找编辑器的时候选了 vue-quill-editor 。编辑器长如下的样子：

一般来讲项目都会有开发版、测试版和生产版这三个版本，不同版本对应不同的API域名，比如可能会是这样子：

1
2
3

const HOST_DEV = 'https://dev-bubuzouapi.com/'  // 开发环境API
const HOST_TEST = 'https://test-bubuzouapi.com/'  // 测试环境API
const HOST = 'https://bubuzouapi.com/'  // 生产环境API

前端项目里要如何区分用什么时候用哪个API呢？比较笨的方法是，比如这次我要打一个测试环境给测试用，那我必须手动的把 HOST_TEST 这个变量的值设置到请求的 url 里。如果下次需要打其他环境的包，那我就需要再次手动更改 url 为别的值，这样显得很不方便。

最近在做项目的时候有一个需求，需要导入word文档，并且需要支持多选。element-ui 的 upload 组件支持多选文件，只需要配置参数 multiple 为 true 即可。但是这个组件默认会将多选的文件分多次进行上传，于是就会存在多次的上传请求，由于后台的接口要求是一次请求能够上传多个文件，且我们也知道请求多了会对服务器造成更大的压力，因而基于多种原因，这个 upload 的上传行为得进行改造一番。

类数组

在 JS 中我们都知道有一种数据类型叫数组，平常也用得很多，这里看到数组的介绍。但什么是类数组呢？
在 JS 中存在一些对象，它们都带有 length 属性，却又不具备数组的那些方法，这些对象我们它叫做类数组。那么类数组有哪些呢？

• jQuery对象

  1 2	var aList = $('.tagcloud').find('a'); console.log( aList.length ); // >= 0

  如上通过jQuery获取的元素集合就是一个典型的类数组。

一个 css 文件的核心内容是由许许多多的 css 规则组成的，而每个规则又包含了两部分：选择器和声明；声明块里可能又包含多个声明，每个声明又是由属性和值组成的。这个大概就是 css 的代码结构。

这么多的规则就像一个小镇上的房子一样，如果房子建造之初，毫无规划胡乱建造，那等房子建造起来的时候，从远远望去就会非常地错杂不堪，难以入目，给人的心里埋下了非常糟糕的印象；又可能后期，由于发展的需要，要给小镇加修道路或者新建个学校，由于房子与房子之间连接得很混乱，所以这给后期重建镇子的人带来了很大的困难。

同样，在 css 的世界里，代码的排列布局也是非常重要的。良好的代码书写习惯能够让代码看起来更加干净简洁，给阅读者一种赏心悦目的感觉；好的代码便于开发发现错误，提高工作效率。所以作为一名好前端，很有必要养成一个良好的 css 编码习惯。

要是问你，你知道当下都有哪些图像格式嘛？我猜你肯定说不全，因为现在图像格式真的太多了，但是应该能说出这几个常用的格式：jpg、gif、png和svg。然后我再问你，知不知道这几个格式有什么区别？各自的适用场景又是什么呢？logo应该是选择 svg 还是 png ？而截图是选 jpg 还是 png 好？在不生成过大文件的前提下，文件的最优质量是多少？了解每个图像格式的工作原理以及它们各自的利弊可以帮助回答这些问题。

在过去几年中，数字化设计和前端开发里大量的研究和测试工具已经帮助我们搞清楚了这些问题。在本文中，我将展示一下每种格式的工作原理，它们各自的优点以及在网页使用时的压缩与保存方法。

先来看几个概念

• 有损(Lossless)和无损(Lossy)：一般我们聊到图片的时候经常会听到别人提到有损或者无损的字眼，那么什么是有损和无损呢？无损就是图片在压缩保存后虽然占用的存储更小了，但是图像的呈现质量依然如旧；而有损则是相反，图像随着一次又一次的压缩后，质量会变得越来越差。
• 索引色(Indexed color)和直接色(Direct color)：按照不同的颜色深度可以将颜色分为索引色和直接色。索引色就是图像作者指定图片的用色总共不超过256种；而直接色则是对颜色使用没有限制，可以存在成千上万的颜色值。
• 光栅格式(raster)和矢量格式(vector)：图像根据信息的表示方式可以分为光栅图和矢量图。光栅图也叫作位图，点阵图或者像素图，图的最小单位是由一个个带颜色的像素组合而成，在 Photoshop 里把图片放到最大，将看到许许多多的像素方块，所以光栅图在伸缩的时候图像可能会失真；而矢量图则是以由点、线和一些几何图形为基础，通过数学计算来排列组合而成，这种图在伸缩的时候能完好的保护质量。