注册
web

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

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


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


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



然后启动成功后,可以看到这样的界面:


image.png


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);

这个getBrowserInfo方法,可以获取更详细的ua,浏览器名字,以及浏览器版本号


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.8 更多


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



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


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


比如某个页面,需要根据列表下载一个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的代码仓库地址)


作者:经海路大白狗
来源:juejin.cn/post/7383650248265465867

0 个评论

要回复文章请先登录注册