xingyu_qie的专栏

之前的功能，包含了文档窗口的滚动方向和滚动距离，我们主要是用于上下滚动的场景。但做移动端的时候发现，头部和底部可能都是固定的，尤其是做一些滚动加载列表的时候，发现头部和底部固定后，单纯的给中间列表区域添加了固定高度，然后通过设置overflow-y: auto 来实现滚动。这个时候，工具库原来的功能就不好使了。所以，我们还需要对某个元素，监听其滚动行为。。

工具库，之前也添加了几个热点城市的当前时间显示，但当时城市较少，功能也比较简单，只是显示了时分秒。最近有使用者说，光有时分秒，功能太少，所以对js-tool-big-box工具库做了改进，目前可以新增了几个热点城市返回，新增了当前时区的返回，新增了令时的返回。

我们在前端项目开发中，有的场景需要显示 “星期几”。有时候不光显示今天星期几，还需要显示某个特定时间是星期几，又或者呢，只是显示那个 “几” ，而不显示 “星期” 两个字。这些场景都是有的。现在 js-tool-big-box 里添加了这个公共方法，可以灵活的获取。执行安装命令：项目引入 timeBox 对象 2 使用方法2.1 获取今天星期几比如你的业务需求，需要展示今天星期几，你可以这样来做（我们以Vue项目举例）：展示结果：展示结果：当然，你还可以直接获取那个 “几”，不需要

js-tool-big-box开发已经有3个月了，团队内的小伙伴进行了热烈的讨论，持续做了功能迭代。小伙伴们也做了艰苦卓绝的文档分享，有纯功能分享类的，有带有小故事的，有朋友们利用自己独自网站分发分享的。7月份快要结束了，这里我们做一个7月度。希望国产js库也有发光发热的那一天。

我们时常会遇到类似这种需求，第一个浏览器页签，有一个 setInterval 倒计时的场景，然后我们切换浏览器页签了，去做其他事情了，等再切换回来的时候呢，setInterval 就开始疯狂的执行。呢，我们浏览器里播放着一个视频，然后希望浏览器切换了页签，或者把浏览器最小化了之后呢，把视频停止掉。等浏览器切换回来的时候，视频再继续播放。这就需要检测浏览器页签是否被切换了，或者浏览器是否被最小化了。下面我们来看一下，js-tool-big-box 这个工具库中，如何使用这一方法。

我们时常遇到这样的场景，服务端给返回的一些数据呢，是json对象是无序的，或者说返回了一个数组，但里面的数据，前端需要根据一些业务需求做排序。这一小节呢，我们就说一下，利用工具库，。意思就是啊，我们一个json对象中，可能有年龄，有姓名，有时间等，我们根据这些属性，对数据从新排序。

这一小节，我们说一下前端 js-tool-big-box 这个工具库，添加的数值型数组的正向排序和倒向排序。以前呢，我们的数组需要排序的时候，都是在项目的utils目录里，写一段公共方法，弄个冒泡排序啦，弄个二分法排序啦。现在使用js-tool-big-box 这个工具库，就不需要写公共方法啦，直接调用，节省开发时间。执行安装命令导入 dataBox 对象，数值型数组的正向排序和倒向排序的公共方法sortArrayNum被放到了这个对象下面。2 排序方法使用2.1 从小到大的排序这个正向和倒向

之前因为时间的原因，js-tool-big-box工具库没有提交到github上去，今天想着往上提交一下，但总是提示用户名无权限。可还是一次一次的提示我无权限，403。，我在github上新建的用户名叫。

这一小节，我们说一下 js-tool-big-box 工具库中，字符串字母大小写转换的使用。不是说单纯的把字符串转为大写，或者小写。关注的小伙伴可能知道，我们并没有把一些特别基础的，JS原生API的功能加进去，我们希望能用原生API的就用原生，比较费事的，大家项目里总是写的一些公共方法呢，我们才会迭代到工具库中去。

这一小节，我们说一下工具库中，获取浏览器 userAgent 以及详细信息的方法。获取userAgent以及详细信息呢，并不是特别常用。但如果是一些网站在开发迭代过程中，或者刚开始就要求比较高，涉及到，用、区分浏览器，浏览器的时候，可能获取浏览器的具体userAgent，以及具体到某个浏览器和版本，就很重要了。这一小节呢，我们来获取一下这些详细信息。

这一小节，我们说一下工具库中，打开全屏和关闭全屏的方法学习。我们知道，浏览器想打开全屏，按一下键就可以了，但一来这个功能不一定所有使用的用户都知道，二来在一些例如大屏的需求场景下，还是很被需要的。很多用户一旦投屏展示后，他那个大屏幕就在那里给用户展示着，或者给老板展示着，但是那个大屏幕呢，人家没有 F11 这个键。所以，打开全屏功能就很重要了。

js-tool-big-box工具库，取名为big-box呢，是希望这个工具库是一个大盒子，然后里面会有很多小盒子，小盒子里面再有很多所属的公共方法这些更小的盒子。，原本写法是判断的形式，这种写法的确不太好。之前的写法的确是很累赘，写的很邋遢。工具库越来越好，越来越可以帮助更多的前端开发者们。这个盒子里呢，有个获取属相的方法。

上一节，我们添加了下载大文件的纯功能版，意思就是需要开发者，在自己项目里发送请求，请求成功后，获取文件流的blob数据，然后帮助下载。但考虑到，有些项目，可能比较简单，在一些没有成形请求封装的情况下，项目里需要一个下载功能。这个时候，这一小节说到的就有用武之地了。意思就是，自己也不用发送请求了，只需要传入接口所需要的必要参数就可以了，就可以实现下载功能了。用于比较简单的小项目。

这一小节呢，我们说一下工具库，下载文件的用法。这一小节说的是纯下载版本。意思就是我们在前端项目开发中，下载功能嘛，无论你发送fetch请求，还是axios请求，你总得发送一下请求，才能拿到下载文件的那个blob数据流信息。。

添加的最新工具方法，在日常前端开发工作中，如果网页很长，我们就需要获取当前浏览器是在向上滚动，还是向下滚动。如果向上滚动，滚动到0的时候呢，需要做一些操作；如果浏览器是在乡下滚动，如果滚动到底部有一定距离的时候呢，也需要做一些操作。例如距离底部还差200px的时候呢，我们就可以提前请求下一页数据拉，不至于滚动到0的时候再请求，那就会有点晚，让用户等很久。

前端工具库，实用的公共方法越来越多了，这一小节，我们带来的是检测密码强度。我们在日常开发中，为了便于测试，自己总是想一个简单的密码，赶紧输入。但到了正式环境，我们都应该为自己准备一个密码强度较高的密码，以提高安全性。我们一起来看一下在js-tool-big-box工具库中，如何使用检测密码强度这一实用的功能吧。

之前我们习惯性的用typeof方法去判断数据类型，但慢慢的发现，typeof这个方法能力有限，基础的数据类型倒是还能判断，但是复杂一点，或者是null之类的假类型，就判断不出来了。可以看出，其实用typeof来判断类型，经常有一种不靠谱的感觉。现在 js-tool-big-box中添加了新的工具方法，可以判断这些数据类型，而且使用便捷。

我们去住一些旅馆的时候，或者一些国际性网站，经常可以看见他们的钟表会展示一些国家地区的时间，这个就是很常用的功能。但如果不常接触这个功能的开发网站呢，大家就看自己电脑右下角的时间展示，就是自己当前的具体时间了。js-tool-big-box也增加了这个功能，希望有需求的开发者可以通过工具，获取全球一些重点城市的时间展示。

这一小节，我们说一个中新增的非常实用的功能。比如身份证号码，肯定不能真实的全部的展示给用户，需要中间加星号展示，那么中间加星号，前后展示多少位，对吧，每个公司可能有不同的理解，产品需求也不同；比如手机号，也是不能直接展示给用户的，需要中间加星，这个倒是比较统一，中间加星，前3后4，但中间的星号，我遇到过有展示3个星号，有展示4个星号的；比如web3交易hash，是一个很长的字符串，应该是42位吧，以0x开头，要求前8后8，中间呢，是3个点，又不是星号了。

方法名返回值入参正确则返回对象，属性为age birthday 和 gender；错误则返回false第一个参数必填，为字符串的身份证号码。

这一小节，js-tool-big-box工具库又迎来了两个非常实用功能成员，分别是检测当前浏览器是否为手机端浏览器，还有检测某元素当前是否处于可视范围内。通过npm安装，执行以下命令这两个功能，工具库提供了一个叫browserBox的对象，所以代码中需要引入这个对象2 检测当前是否为手机端浏览器 这个功能还是很实用的，经常需要判断是否为手机端浏览器，做出与PC端不同的展示效果，判断示例代码如下： 上面两个图中，我们切换了浏览器的展示形式，分别以PC端和移动端两种形式做了效果展示。使用方法总

js-tool-big-box这个前端工具库，今天又添加了2个实用功能，分别是和。

使用js-tool-big-box这个工具库，实现复制文字到剪贴板的功能，很便捷，帮助项目少写代码，少引入第三方插件

先讨论一个问题，你做软件工作是为了什么？从高中选专业，就喜欢上了软件开发？还是当初毕业不知道干啥，不喜欢自己的专业，投入软件开发的怀抱？还是干着干着别的，突然觉得互联网行业真不赖，然后学了学，开始了软件开发生涯？

目前已经收集到了，希望可以添加一些公用方法，我觉得这很好，我们一起把这个前端通用工具做大一些，帮助更多的小伙伴少些util代码，更多的关注于自己的业务开发，真是不错。

这一小节，我们针对前端npm包的使用做一些讲解，主要是针对项目中，邮箱，手机号，身份证号，ip地址，url格式，邮政编码等验证的方法使用。

方法名返回值入参被转换后小驼峰或大驼峰的字符串第一个参数必填，表示需要被转换的带有横杠的字符串，第二个参数非必填，表示需要转为小驼峰或者是大驼峰，如果不传第二个参数，默认是“small”，需要转大驼峰，则传入“big。

在前端项目中，经常会涉及到一些数值转化的公共方法，而js-tool-big-box 这个工具包里也都包含了，可以直接使用，例如千位分割，保留小数位，生成指定范围内的随机数，转中文大写，中文小写这些，可以说是非常便捷高效，堪称AIGC PLUS。

在前端项目中，经常涉及到防抖和节流，比如用户频繁的输入进行检索，比如频繁的resize浏览器窗口，比如频繁的下拉刷新，这些都可能涉及到在短时间内多次与服务端进行交互，所以，所以，所以，大家经常在项目内定义一个 utils 目录，里面写上防抖（debounce）和节流（throttle）的公共方法，进行调用。现在好啦，js-tool-big-box工具包提供出了这个两个方法，并有专门的团队进行维护公有方法，大家可以直接调用，减少了自己的代码量，可以有更多的时间去专注于自己的业务开发。方法名返回值。

这一小节，我们针对工具做一些使用讲解，主要获取浏览器参数、cookie、localStorage的存取方面的。这些方法差不多每次项目中要么用不到，要么就自己写一份，轮子造的很重复啊，而且localStorage有时候要求设定过期时间，工具中也做了对应的开发。工具中对外暴露了对象，可以供大家使用。

上一节我们说到了工具中关于日期的详细转换，还有获取年月日时分秒的详细转换方法使用，同时可以灵活添加自己需要的单位，很便捷。这一节我们继续学习几个相关的方法。

这一小节，我们学习一下这个npm 前端工具库，关于时间日期格式转换的一部分，后续还会有。

前端javascript的公共方法太多了，时间日期的，数值的，字符串的，搞复制的，搞网络请求的，搞数据转换的，几乎就是每个新项目，有的拷一拷，没有的继续写，放个utils目录里，自我还感觉良好，但其实有点不合适，但不复用了。我准备搞一个javascript的公共方法包，里面以后多放一些公共方法。我给他起了个名字叫，意思就是js工具的一个大盒子，魔盒魔盒，啥都能装，也可以叫他js魔盒。不错不错，npm上还没有这么响亮的包呢！！！