jsUtils

版本变更记录

webpack-build（分支）

• 添加 webpack 进行发布,可被其他项目引入使用

$ webpack && npm publish

背景

在做表单的时候，会遇到很多的表单项的验证工作，几乎很多验证都是重复的，有一个比较好的lodash库来做了这些工作，但是里面有些方法和实际的业务工作有些不符。比如，lodash.isEmpty(2) // true是会认为是空的。这显然与实际的业务是不符的。另外还有一些数字校验、文字校验等一些常用的校验方法，想结合lodash做一个自己的 jsUtils 库，里面封装一些业务上常用的校验方式，这样比较有利于业务的开发。

简介

在 lodash 基础上扩展的一些 jsUtils，lodash自身原有的一些方法仍然能用。其中isEmpty方法被重写了。 将重新封装的方法做成了一个名为jsutils-100的 npm 包，已经发布到 npm 仓库中，大家可以像使用其他 npm 包一样方便的来使用新封装的这个 jsUtils 包。

同时也不必再去安装lodash包。

同时该项目中添加了单元测试来保证每个方法的正确性，大家可以放心大胆的来使用。单元测试为代码质量进行保驾护航。

顺便简单说一下单元测试 单元测试是是开发者编写的一小段代码，用于检验被测代码的一个很小的、很明确的功能是否正确，通常而言，一个单元测试是用于判断某个特定条件（或者场景）下某个特定函数的行为。

简单说下单元测试的好处：

• 单元测试不但会使你的工作完成得更轻松。而且会令你的设计会变得更好，甚至大大减少你花在调试上面的时间
• 提高代码质量
• 减少 bug，快速定位 bug
• 放心地修改、重构

单元测试提倡的是测试驱动开发-测试先行。

测试驱动开发的基本思想就是在开发功能代码之前，先编写测试代码，然后只编写使测试通过的功能代码，从而以测试来驱动整个开发过程的进行。这有助于编写简洁可用和高质量的代码，有很高的灵活性和健壮性，能快速响应变化，并加速开发过程。

测试驱动开发的基本过程如下： ① 　快速新增一个测试 ② 　运行所有的测试（有时候只需要运行一个或一部分），发现新增的测试不能通过 ③ 　做一些小小的改动，尽快地让测试程序可运行，为此可以在程序中使用一些不合情理的方法 ④ 　运行所有的测试，并且全部通过 ⑤ 　重构代码，以消除重复设计，优化设计结构 简单来说，就是不可运行/可运行/重构——这正是测试驱动开发的口号。

另外难点就是 mock，在较复杂功能的测试时，难点就是 mock 了。这时候写单元测试可能就会变成累赘，也真是因为这个原因，在之前的项目中也就没有很好地贯彻下来。不过在  纯逻辑功能函数中，使用单元测试会是非常棒的。建议在这种情况下，可以体验一下。

✨ 特性

• 开箱即用的高质量的组件。
• lodash自身原本方法都可使用。
• 扩展lodash方法，增加更加适合业务的方法。
• 增加常用的表单校验方法。
• 支持扩展丰富。

📦 安装

npm install jsutils-100 --save

🔨 示例

import jsUtils from 'jsutils-100';
jsUtils.isEmpty(''); // true

详细介绍

在jsutils-100项目中，重写了isEmpty方法，添加了一些常见的表单校验中会用到的方法，目前增加了以下方法：

• isHundred
• isDigit
• isInteger
• isEmptyOneOfTwo
• isChinese
• isEmail
• isPhoneNumber
• isIdNumber
• isIp
• isUserName
• isPassword

同时也希望大家可以将这个项目补充起来，将自己在工作中常用到的校验方法添加到这个项目中来，共同来维护这个库，这样在不久的将来，我们再开发业务时，就不会为校验而担忧。

1. isEmpty方法

检查 value 是否为一个空对象，集合，映射或者 set。 判断的依据是除非是有枚举属性的对象，length 大于 0 的 arguments object, array, string 或类 jquery 选择器。 对象如果被认为为空，那么他们没有自己的可枚举属性的对象。

以上是 Lodash 官网介绍。基于这个介绍，我们  得知数字是会被认为是空的，也就是_.isEmpty(1);// => true。这就有点不符合我们业务中经常遇到的，输入框输入内容，输入数字在主观上我们是认为有值的 ，不能被认为为空。

所以这也是我准备自己封装jsUtils的初衷， 要做一套从业务角度出发的jsUtils。

重写的isEmpty方法弥补了Lodash中将数字认为是空的情况。

像这样：

it('isEmpty', () => {
    expect(jsUtils.isEmpty(0)).toBeFalsy();
    expect(jsUtils.isEmpty('')).toBeTruthy();
    expect(jsUtils.isEmpty('0')).toBeFalsy();
    expect(jsUtils.isEmpty(undefined)).toBeTruthy();
    expect(jsUtils.isEmpty(null)).toBeTruthy();
    expect(jsUtils.isEmpty('ss')).not.toBeTruthy();
});

2. isHundred方法

isHundred方法是来验证value值是否为 100 的倍数。

用法像这样：

it("验证是否为100的整数倍", () => {
  expect(jsUtils.isHundred(101)).toBeFalsy();
  expect(jsUtils.isHundred("0")).toBeTruthy();
  expect(jsUtils.isHundred("200")).toBeTruthy();
  expect(jsUtils.isHundred("1200dd")).toBeFalsy();
  ...
});

3. isDigit方法

isDigit方法是用来验证 value 是否为支持小数点的数字。

用法像这样：

expect(jsUtils.isDigit("3d4")).toBeFalsy();
expect(jsUtils.isDigit("3drr4")).toBeFalsy();
expect(jsUtils.isDigit("")).toBeFalsy();
expect(jsUtils.isDigit(null)).toBeFalsy();
expect(jsUtils.isDigit(undefined)).toBeFalsy();
...

4. isInteger方法

isInteger方法是用来验证 value 是否为不支持小数点的数字。

用法像这样：

expect(jsUtils.isInteger("11d23")).toBeFalsy();
expect(jsUtils.isInteger("11dd45")).toBeFalsy();
expect(jsUtils.isDigit("")).toBeFalsy();
expect(jsUtils.isDigit(null)).toBeFalsy();
...

5. isEmptyOneOfTwo方法

isEmptyOneOfTwo方法是用来验证 value1 和 value2 二者有一个不为空即可返回 true，其中当 value1 为数组时，必须数组中的每个值都不为空，value1 才不为空。

用法像这样：

expect(jsUtils.isEmptyOneOfTwo(3, 4)).toBeFalsy();
expect(jsUtils.isEmptyOneOfTwo(3, "hehe")).toBeFalsy();
expect(jsUtils.isEmptyOneOfTwo(["56", 4], "23")).toBeFalsy();
expect(
  jsUtils.isEmptyOneOfTwo(["89", "90", "34", "45", "450"], "")
).toBeFalsy();
...

6. isChinese方法

isChinese方法是用来验证如果输入内容，那么输入内容只能是汉字。

用法像这样：

expect(jsUtils.isChinese("？")).toBeTruthy();
expect(jsUtils.isChinese(".")).toBeFalsy();
expect(jsUtils.isChinese("ddd")).toBeFalsy();
expect(jsUtils.isChinese("undefined")).toBeFalsy();
expect(jsUtils.isChinese("贺贺")).toBeTruthy();
...

7. isEmail方法

isEmail方法是用来验证邮箱输入是否正确。

用法像这样：

expect(jsUtils.isEmail(undefined)).toBeFalsy();
expect(jsUtils.isEmail("")).toBeFalsy();
expect(jsUtils.isEmail("[email protected]")).toBeTruthy();
expect(jsUtils.isEmail("[email protected]")).toBeTruthy();
...

8. isPhoneNumber方法

isPhoneNumber方法是用来验证是否为手机号码。

用法像这样：

expect(jsUtils.isPhoneNumber()).toBeFalsy();
expect(jsUtils.isPhoneNumber(null)).toBeFalsy();
expect(jsUtils.isPhoneNumber(8723983)).toBeFalsy();
expect(jsUtils.isPhoneNumber(8723983.342)).toBeFalsy();
...

9. isIdNumber方法

isIdNumber方法是用来校验有效身份证号码。其中包括 15 位和 18 位，要校验生日、出生地、校验位等。

用法像这样：

expect(jsUtils.isIdNumber("131182199101311221")).toBeTruthy();
expect(jsUtils.isIdNumber("131182199101321221")).toBeFalsy();
expect(jsUtils.isIdNumber("131182199102021221")).toBeFalsy(); // 校验位不对
expect(jsUtils.isIdNumber("131182199102021226")).toBeTruthy(); // 校验位正确
...

10. isIp方法

isIp方法是用来校验是否为正确的 IP 地址。

用法像这样：

expect(jsUtils.isIp("192.168.90.257")).toBeFalsy();
expect(jsUtils.isIp("1.2.3")).toBeFalsy();
expect(jsUtils.isIp("0.2.3.0")).toBeTruthy();
expect(jsUtils.isIp("1111")).toBeFalsy();
...

11. isUserName方法

isUserName方法是用来校验输入为字母，数字，下划线，减号,点，输入长度为 4-16 位。

用法像这样：

expect(jsUtils.isUserName("spring.hehe.v5")).toBeFalsy();
expect(jsUtils.isUserName("spring-hehe_v5")).toBeTruthy();
expect(jsUtils.isUserName("spring-hehe@v5")).toBeFalsy();
expect(jsUtils.isUserName("234q_sdfaw-werq")).toBeTruthy();
...

12. isPassword方法

isPassword方法是用来校验密码强度。

用法像这样：

expect(jsUtils.isPassword("ASD")).toBeFalsy();
expect(jsUtils.isPassword("aA34_sdw#dd")).toBeTruthy();
expect(jsUtils.isPassword("aA34_sdwdd")).toBeFalsy();
...

⌨️ 本地开发

$ git clone https://github.com/springHyc/jsUtils.git
$ cd jsUtils
$ npm install
$ yarn test || npm test (单元测试通过则该方法写的没有问题)

单元测试

yarn test or npm test

构建

npm run build

发布

npm run build npm publish

表单校验建议

1. 字段前后端类型一致

有个实际遇到的例子：前后端的类型不一致。背景是：该字段是必填的。由于后端直接返回来的数据是数字0,而前端重新填写的数据是字符串"0",而且这个字段前端的校验是:

isEmpty(data) {
  return data == "" || data == null || data === "[]" ? true : false;
}

这就导致，返回来的数据，在完全没有改动的情况下，进行保存，就会提示“该字段需要填写”，而当自己重新填写后，就能直接保存了。

特别需要注意的一点：0=="" 为 true，而0 === ""为 false。这一点涉及到的是 JavaScript 基础中的强制类型转换（你不知道的 JavaScript 中卷 第一部分 第 4 章中的宽松相等和严格相等），很多时候，我们在开发的时候是没有注意到这一点的。

之前咱们有提到过一点，说开发中的小技巧，我个人觉得，咱们每个人在开发过程中都会遇到各种各样的小 bug，为什么说是小 bug 呢，是因为这样的 bug，我们不重视，但是却常常遇到，稍微一调试，我们就可以改正过来，like 上面的这个小 bug，但有时候，耗费我们很多时间的不仅仅是一些比较难解决的大 bug，这些不起眼的小 bug，也会耗费我们很多时间，所以个人建议，每个人遇到这种类似的小 bug 可以随手记录一下，目前市面上有很多很好用的软件可以用来随手做记录都不错的，like： 简书、有道云笔记、csdn 等等。

2. 尽量做好防御性编程

2.1 null.xxxx 报错 源代码是这样写的：

buttons: [
  {
    text: "关闭",
    styleType: "ordinary",
    onClick: () => {
      type == 1 &&
        (document.querySelector(".editSHA").innerHTML = "修改公钥");
    }
  },

在正常情况下，是不会有任何问题，但是有时候会出现下图的情况：

这时候就需要我们做好防御性编程。可以简单的这样写：

if (type == 1 && document.querySelector('.editSHA')) {
    document.querySelector('.editSHA').innerHTML = '修改按钮;
}