在 lodash 基础上扩展的一些 jsUtils
npm install jsutils-100- 添加 webpack 进行发布,可被其他项目引入使用
``js`
$ 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
- 扩展方法，增加更加适合业务的方法。
- 增加常用的表单校验方法。
- 支持扩展丰富。
`bash`
npm install jsutils-100 --save
`jsx`
import jsUtils from 'jsutils-100';
jsUtils.isEmpty(''); // true
在jsutils-100项目中，重写了isEmpty方法，添加了一些常见的表单校验中会用到的方法，目前增加了以下方法：
- isHundred
-
-
-
-
-
-
-
-
-
-
同时也希望大家可以将这个项目补充起来，将自己在工作中常用到的校验方法添加到这个项目中来，共同来维护这个库，这样在不久的将来，我们再开发业务时，就不会为校验而担忧。
> 检查 value 是否为一个空对象，集合，映射或者 set。 判断的依据是除非是有枚举属性的对象，length 大于 0 的 arguments object, array, string 或类 jquery 选择器。
> 对象如果被认为为空，那么他们没有自己的可枚举属性的对象。
以上是 Lodash 官网介绍。基于这个介绍，我们 得知数字是会被认为是空的，也就是_.isEmpty(1);// => true。这就有点不符合我们业务中经常遇到的，输入框输入内容，输入数字在主观上我们是认为有值的 ，不能被认为为空。
所以这也是我准备自己封装jsUtils的初衷， 要做一套从业务角度出发的jsUtils。
重写的isEmpty方法弥补了Lodash中将数字认为是空的情况。
像这样：
`js`
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();
});
isHundred方法是来验证value值是否为 100 的倍数。
用法像这样：
`js`
it("验证是否为100的整数倍", () => {
expect(jsUtils.isHundred(101)).toBeFalsy();
expect(jsUtils.isHundred("0")).toBeTruthy();
expect(jsUtils.isHundred("200")).toBeTruthy();
expect(jsUtils.isHundred("1200dd")).toBeFalsy();
...
});
isDigit方法是用来验证 value 是否为支持小数点的数字。
用法像这样：
`js`
expect(jsUtils.isDigit("3d4")).toBeFalsy();
expect(jsUtils.isDigit("3drr4")).toBeFalsy();
expect(jsUtils.isDigit("")).toBeFalsy();
expect(jsUtils.isDigit(null)).toBeFalsy();
expect(jsUtils.isDigit(undefined)).toBeFalsy();
...
isInteger方法是用来验证 value 是否为不支持小数点的数字。
用法像这样：
`js`
expect(jsUtils.isInteger("11d23")).toBeFalsy();
expect(jsUtils.isInteger("11dd45")).toBeFalsy();
expect(jsUtils.isDigit("")).toBeFalsy();
expect(jsUtils.isDigit(null)).toBeFalsy();
...
isEmptyOneOfTwo方法是用来验证 value1 和 value2 二者有一个不为空即可返回 true，其中当 value1 为数组时，必须数组中的每个值都不为空，value1 才不为空。
用法像这样：
`js`
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();
...
isChinese方法是用来验证如果输入内容，那么输入内容只能是汉字。
用法像这样：
`js`
expect(jsUtils.isChinese("？")).toBeTruthy();
expect(jsUtils.isChinese(".")).toBeFalsy();
expect(jsUtils.isChinese("ddd")).toBeFalsy();
expect(jsUtils.isChinese("undefined")).toBeFalsy();
expect(jsUtils.isChinese("贺贺")).toBeTruthy();
...
isEmail方法是用来验证邮箱输入是否正确。
用法像这样：
`js`
expect(jsUtils.isEmail(undefined)).toBeFalsy();
expect(jsUtils.isEmail("")).toBeFalsy();
expect(jsUtils.isEmail("zhulinger520@163.com")).toBeTruthy();
expect(jsUtils.isEmail("spring.hehe.v5@gmail.com")).toBeTruthy();
...
isPhoneNumber方法是用来验证是否为手机号码。
用法像这样：
`js`
expect(jsUtils.isPhoneNumber()).toBeFalsy();
expect(jsUtils.isPhoneNumber(null)).toBeFalsy();
expect(jsUtils.isPhoneNumber(8723983)).toBeFalsy();
expect(jsUtils.isPhoneNumber(8723983.342)).toBeFalsy();
...
isIdNumber方法是用来校验有效身份证号码。其中包括 15 位和 18 位，要校验生日、出生地、校验位等。
用法像这样：
`js`
expect(jsUtils.isIdNumber("131182199101311221")).toBeTruthy();
expect(jsUtils.isIdNumber("131182199101321221")).toBeFalsy();
expect(jsUtils.isIdNumber("131182199102021221")).toBeFalsy(); // 校验位不对
expect(jsUtils.isIdNumber("131182199102021226")).toBeTruthy(); // 校验位正确
...
isIp方法是用来校验是否为正确的 IP 地址。
用法像这样：
`js`
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();
...
isUserName方法是用来校验输入为字母，数字，下划线，减号,点，输入长度为 4-16 位。
用法像这样：
`js`
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();
...
isPassword方法是用来校验密码强度。
用法像这样：
`js`
expect(jsUtils.isPassword("ASD")).toBeFalsy();
expect(jsUtils.isPassword("aA34_sdw#dd")).toBeTruthy();
expect(jsUtils.isPassword("aA34_sdwdd")).toBeFalsy();
...
`bash`
$ 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
1. 字段前后端类型一致
有个实际遇到的例子：前后端的类型不一致。背景是：该字段是必填的。由于后端直接返回来的数据是数字0,而前端重新填写的数据是字符串"0",而且这个字段前端的校验是:
`js`
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 报错
源代码是这样写的：
在正常情况下，是不会有任何问题，但是有时候会出现下图的情况：
![image.png
这时候就需要我们做好防御性编程。可以简单的这样写：
`js``
if (type == 1 && document.querySelector('.editSHA')) {
document.querySelector('.editSHA').innerHTML = '修改按钮;
}