只会Vue的我，一入职就让用React，用了这个工具库，我依然高效

由于公司最近项目周期紧张，还有一个项目因为人手不够排不开，时间非常紧张，所以决定招一个人来。这不，经过一段时间紧张的招聘，终于招到了一个前端妹子。妹子也坦白过，自己干了3年，都是使用的Vue开发，自己挺高效的。但如果入职想用React的话，会稍微费点劲儿。我说，没事，来就是了，我们都可以教你的。

但入职后发现，这个妹子人家一点也不拖拉，干活很高效。单独分给她的项目，她比我们几个干的还快，每天下班准时就走了，任务按时完成。终于到了分享会了，组长让妹子准备准备，分享一下高效开发的秘诀。

目录

1 初始化React项目

2 开始分享秘诀

2.1 注册 - 邮箱和手机号验证 

2.2 验证密码强度值

2.3 登录后存localStorage

2.4 需要判断是否手机端浏览器

2.5 日期转换

2.6 获取数据的详细类型

2.7 更多

3 最后

---

 

1 初始化React项目

没想到妹子做事还挺认真，分享并没有准备个PPT什么的，而是直接拿着电脑，要给我们手动演示她的高效秘诀。而且是从初始化React项目开发的，这让我们很欣慰。

首先是初始化React项目的命令，这个相信大家都很熟悉了：

第一步：启动终端

第二步：npm install -g create-react-app

第三步：create-react-app js-tool-big-box-website

（注意：js-tool-big-box-website是我们要创建的那个项目名称）

第四步：cd js-tool-big-box-website

（注意：将目录切换到js-tool-big-box-website项目下）

第五步：npm start

然后启动成功后，可以看到这样的界面：

2 开始分享秘诀

妹子说，自己不管使用Vue，还是React，高效开发的秘诀就是 js-tool-big-box 这个前端JS库

首先需要安装一下： npm install js-tool-big-box

2.1 注册 - 邮箱和手机号验证 

注册的时候，需要验证邮箱或者手机号，妹子问我们，大家平时怎么验证？我们说：不是有公共的正则验证呢，就是验证一下手机号和邮箱的格式呗，你应该在utils里加了公共方法了吧？或者是加到了表单验证里？

妹子摇摇头，说，用了js-tool-big-box工具库后，会省事很多，可以这样：

import logo from './logo.svg';
import './App.css';
import { matchBox } from 'js-tool-big-box';

function App() {
  const email1 = '232322@qq.com';
  const email2 = '232322qq.ff';
  const emailResult1 = matchBox.email(email1);
  const emailResult2 = matchBox.email(email2);
  console.log('emailResult1验证结果：', emailResult1); // true
  console.log('emailResult2验证结果：', emailResult2); // false

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        js-tool-big-box，使React开发更加高效
      </header>
    </div>
  );
}

export default App;

2.2 验证密码强度值

验证密码强度值的时候呢，妹子问我们，大家平时怎么验证？我们说：不就是写个公共方法，判断必须大于几位，里面是否包含数字，字母，大写字母，特殊符号这样子吗？

妹子摇摇头，说，不是，我们可以这样来验证：

const pwd1 = '12345';
const pwd1Strength = matchBox.checkPasswordStrength(pwd1);
console.log('12345的密码强度值为：', pwd1Strength); // 0
const pwd2 = '123456';
const pwd2Strength = matchBox.checkPasswordStrength(pwd2);
console.log('123456的密码强度值为：', pwd2Strength); // 1
const pwd3 = '123456qwe';
const pwd3Strength = matchBox.checkPasswordStrength(pwd3);
console.log('123456qwe的密码强度值为：', pwd3Strength);  // 2
const pwd4 = '123456qweABC';
const pwd4Strength = matchBox.checkPasswordStrength(pwd4);
console.log('123456qweABC的密码强度值为：', pwd4Strength); // 3
const pwd5 = '123@456qwe=ABC';
const pwd5Strength = matchBox.checkPasswordStrength(pwd5);
console.log('123@456qwe=ABC的密码强度值为：', pwd5Strength); // 4

2.3 登录后存localStorage

登录后，需要将一些用户名存到localStorage里，妹子问，我们平时怎么存？我们说：就是直接拿到服务端数据后，存呗。妹子问：你们加过期时间不？我们说：有时候需要加。写个公共方法，传入key值，传入value值，传个过期时间，大家不都是这样？

妹子摇摇头，说，不是，我们可以这样来存：

import { storeBox } from 'js-tool-big-box';

storeBox.setLocalstorage('today', '星期一', 1000*6);

2.4 需要判断是否手机端浏览器

我们市场需要判断浏览器是否是手机端H5浏览器的时候，大家都怎么做？我们说：就是用一些内核判断一下呗，写好方法，然后在展示之处判断一下，展示哪些组件？不是这样子吗？

妹子又问：我这个需求，老板比较重视微信内置的浏览器，这样大家写的方法是不是就比较多了？我们说，那再写方法，针对微信内置浏览器的内核做一下判断呗。

妹子摇摇头，说，那样得写多少方法啊，可以用这个方法，很全面的：

如果你单纯的只是想判断一下是否是手机端浏览器，可以这样：

import { browserBox } from 'js-tool-big-box';

const checkBrowser = browserBox.isMobileBrowser();
console.log('当前是手机端浏览器吗？', checkBrowser);

如果你需要更详细的，根据内核做一些判断，可以这样：

const info = browserBox.getBrowserInfo();
console.log('=-=-=', info);

2.5 日期转换

妹子问，大家日常日期转换怎么做？如果服务端给的是一个时间戳的话？我们说：不就是引入一个js库，然后就开始使用呗？

妹子问：这次产品的要求是，年月日中间不是横岗，也不是冒号，竟然要求我显示这个符号 “~” ，也不是咋想的？然后我们问：你是不是获取了年月日，然后把年月日中间拼接上了这个符号呢？

妹子摇摇头，说，你可以这样：

import { timeBox } from 'js-tool-big-box';

const dateTime2 = timeBox.getFullDateTime(1719220131000, 'YYYY-MM-DD', '~');
console.log(dateTime2);  // 2024~06~24

2.6 获取数据的详细类型

妹子问，大家日常获取数据的类型怎么获取？我们说，typeof呀，instanceof呀，或者是 Object.prototype.toString.call 一下呗，

妹子摇摇头，说，你可以这样：

import { dataBox } from 'js-tool-big-box';

const numValue = 42;
console.log('42的具体数据类型：', dataBox.getDataType(numValue)); // [object Number]
const strValue = 'hello';
console.log('hello的具体数据类型：', dataBox.getDataType(strValue)); // [object String]
const booleanValue = true;
console.log('true的具体数据类型：', dataBox.getDataType(booleanValue)); // [object Boolean]
const undefinedValue = undefined;
console.log('undefined的具体数据类型：', dataBox.getDataType(undefinedValue)); // [object Undefined]
const nullValue = null;
console.log('null的具体数据类型：', dataBox.getDataType(nullValue)); // [object Null]
const objValue = {};
console.log('{}的具体数据类型：', dataBox.getDataType(objValue)); // [object Object]
const arrayValue = [];
console.log('[]的具体数据类型：', dataBox.getDataType(arrayValue)); // [object Array]
const functionValue = function(){};
console.log('function的具体数据类型：', dataBox.getDataType(functionValue)); // [object Function]
const dateValue = new Date();
console.log('date的具体数据类型：', dataBox.getDataType(dateValue)); // [object Date]
const regExpValue = /regex/;
console.log('regex的具体数据类型：', dataBox.getDataType(regExpValue)); // [object RegExp]

2.7 更多

估计妹子也是摇头摇的有点累了，后来演示的就快起来了，我后来也没听得太仔细，大概有，

比如我们做懒加载的时候，判断某个元素是否在可视范围内；

比如判断浏览器向上滚动还是向下滚动，距离底部和顶部的距离；

比如某个页面，需要根据列表下载一个excel文件啦；

比如生成一个UUID啦；

比如后面还有将小写数字转为大写中文啦，等等等等

3 最后

分享完了第二天，妹子就没来，我们还准备请教她具体js-tool-big-box的使用心得呢。据说是第一天分享的时候，摇头摇得把脖子扭到了，希望妹子能早日康复，早点来上班。

最后告诉你个消息： js-tool-big-box的npm地址是：js-tool-big-box的npm包地址

js-tool-big-box的git仓库地址：js-tool-big-box的github地址