首页 前端知识 只会Vue的我,一入职就让用React,用了这个工具库,我依然高效

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

2024-07-08 09:07:20 前端知识 前端哥 917 465 我要收藏

由于公司最近项目周期紧张,还有一个项目因为人手不够排不开,时间非常紧张,所以决定招一个人来。这不,经过一段时间紧张的招聘,终于招到了一个前端妹子。妹子也坦白过,自己干了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

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

14b07102a391411aba533e04665620b8.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);

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地址

 

 

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13875.html
标签
评论
发布的文章

html左右两栏布局实现

2024-08-04 00:08:50

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!