当前位置: 首页 > news >正文

【前端新手小白】学习Javascript的【开源好项目】推荐

目录

前言

1 项目介绍

1.1 时间日期类

1.2 网页store类

1.3 事件类

1.4 Number类

1.5 String类

1.6 正则验证类

1.7  ajax类

1.8 data数据类

1.9 browser浏览器类

2 学习js-tool-big-box开源项目时有哪些收获

2.1 你可以这样做

2.2 如果你需要使用本项目 

2.3 你也可以为本git项目点个赞 

3 开源项目的发展趋势


前言

如果你是一位前端新手小白,如果你觉得自己的JS功底还有所欠缺,如果你觉得自己平时做的项目还不够丰富,如果你觉得自己遇到的场景还不够丰富

如果你想要一个练手的好项目,如果你想学习更多的场景,如果你想学习更多的公共方法,如果你想从新手小白中挣脱出来。

那么我推荐的这个开源项目,你一定会需要的

1 项目介绍

我说的这个开源项目呢,是一个前端JS的公共方法库。无论是Vue项目,还是React项目,他都可以胜任。他是一个更多更丰富的公共方法集合。

首先,我们来个github的链接地址,点我:js-tool-big-box的github地址

然后,我们来个他的学习文档:js-tool-big-box的学习地址

他目前包含的功能有

1.1 时间日期类

  1. 时间日期的转换;
  2. 更灵活的时间格式;
  3. 更个性化的时间获取;
  4. 某个时间点距离现在的时间段(更加详细的返回信息)
  5. 判断平年还是闰年;
  6. 某个月有多少天;
  7. 属相;
  8. 一年中的法定节假日;
  9. 获取全球重点城市时间;

1.2 网页store类

  1. 获取url中的参数值
  2. 设置cookie;
  3. 获取cookie;
  4. 删除cookie;
  5. 设置localStorage;
  6. 获取localStorage

1.3 事件类

  1. 防抖
  2. 节流

1.4 Number类

  1.  千分位逗号分割;
  2. 判断是否大于0;
  3. 判断是否大于0的整数;
  4. 生成指定范围内的随机数;
  5. 生成指定位数的随机数;
  6. 数字转小写中文;
  7. 数字转大写中文;

1.5 String类

  1. 字符串反转;
  2. 横岗转小驼峰
  3. 横岗转大驼峰;
  4. 版本号比较;
  5. 获取一个字符串的字节长度;
  6. 生成uuid;
  7. 根据身份证号获取性别、年龄和出生日期;
  8. 字符串中间加特殊符号,隐藏关键信息;
  9. 字符串大小写字母转换;

1.6 正则验证类

  1.  邮箱格式验证;
  2. 手机号格式验证;
  3. url格式验证;
  4. 身份证号格式验证;
  5. IP地址格式验证;
  6. 邮政编码格式验证;
  7. 判断是否是Unicode字符;

  8. 检测密码强度值;

1.7  ajax类

  1. 发送jsonp请求;
  2. 下载文件纯功能版本;
  3. 下载文件,fetch + 下载功能版本;

1.8 data数据类

  1. 数组中获取随机个数的值;
  2. 复制文字到剪贴板;
  3. 数组去重;
  4. 获取更详细的数据类型;
  5. 数值型数组排序(正序和倒序);
  6. 对象型数组排序(正序和倒序)

1.9 browser浏览器类

  1. 判断当前是否手机端浏览器;
  2. 判断元素是否处于可视范围内;
  3. 获取当前浏览器向上滚动还是向下滚动,获取当前距离顶部和底部的距离;

  4. 打开全屏 和 关闭全屏;

  5. 获取浏览器userAgent以及详细信息;

2 学习js-tool-big-box开源项目时有哪些收获

2.1 你可以这样做

如果你想要学习里面的方法如何书写的,如果你不想使用本项目,你可以fock一个属于自己的库:

然后你就可以将自己fock下来的项目,通过git clone <代码库> 的方式,将代码下载下来,然后开始将自己需要学习的,或者自己需要使用的公共方法,拷贝到自己的项目中。

2.2 如果你需要使用本项目 

如果你只是想使用这个npm包里的一些公共方法,那么你就可以参照文档说明,不管是Vue项目,或者Vue3项目,又或者是React项目,这些方法都可以帮助你高效,快捷的完成一些工作。

安装js-tool-big-box

执行安装命令:

npm install js-tool-big-box

刚才我们说了9种大的方法类,如果需要使用哪个方法,你就需要单独的去引用某个大的方法类,比如,你要使用时间类,可以这样引入:

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

 比如你需要使用浏览器相关的方法类,你可以这样引入:

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

2.3 你也可以为本git项目点个赞 

最直接的参与项目方式,当然是,先为项目点赞,再开始fock项目,然后再开始学习,不过最终还是希望大家可以在vue或者React项目中使用这个npm库

3 开源项目的发展趋势

可能某一天呢,你也会动手,自己打造一个属于自己的开源项目。那么开源项目的发展趋势又如何呢?又或者说,你未来可以着手朝着哪些方向打造一个属于自己的开源项目呢?

开源项目的发展趋势呈现出以下几个重要方向

  1. 社区和协作:开源项目越来越依赖于社区的力量,社区贡献者的多样性和积极性是项目成功的关键。大型开源项目如Linux、Apache、Kubernetes等,社区活跃度非常高。

  2. 企业参与:越来越多的企业参与到开源项目中,贡献代码、资金和资源。这不仅帮助推动项目的发展,也有助于企业自身的技术创新和生态系统建设。

  3. 开源治理和合规:随着开源项目的增多,如何有效地治理和管理这些项目变得更加重要。很多项目开始采用明确的治理结构和合规策略,以确保项目的健康发展和法律合规。

  4. 多元化技术栈:开源项目不仅仅局限于软件代码,还包括硬件设计、数据集、模型等。比如,RISC-V作为开源硬件指令集架构,获得了广泛关注和支持。

  5. 安全性和稳定性:随着开源项目在商业应用中的广泛使用,安全性和稳定性变得尤为重要。项目维护者和社区对安全漏洞的响应和修复速度也越来越快。

  6. 自动化和工具:许多开源项目开始利用自动化工具和CI/CD管道来提高开发效率和质量控制。例如,GitHub Actions 和 GitLab CI/CD广泛应用于开源项目的自动化测试和部署。

  7. 新兴领域:人工智能、区块链和物联网等新兴领域的开源项目也在快速发展。这些项目不仅推动了技术进步,还促进了跨领域的合作和创新。

  8. 教育和培训:越来越多的教育机构和培训项目采用开源工具和资源进行教学,培养更多的开源人才,进一步推动开源生态的发展。

这些趋势表明,开源不仅是技术发展的重要推动力,也是企业创新和协作的重要平台。未来,开源项目在技术创新、产业应用和社会影响力方面将继续发挥重要作用。

读完本文后,我们投个票吧,互动一下

相关文章:

【前端新手小白】学习Javascript的【开源好项目】推荐

目录 前言 1 项目介绍 1.1 时间日期类 1.2 网页store类 1.3 事件类 1.4 Number类 1.5 String类 1.6 正则验证类 1.7 ajax类 1.8 data数据类 1.9 browser浏览器类 2 学习js-tool-big-box开源项目时有哪些收获 2.1 你可以这样做 2.2 如果你需要使用本项目 2.3 你…...

CentOS7虚拟机 网络适配器 NAT模式和桥接模式区别

一、环境介绍 宿主机&#xff1a;Windows电脑 虚拟机&#xff1a;VMware下的CentOS7 局域网&#xff1a;路由器下的各真实主机组成的网络 内部局域网&#xff1a;宿主机构建的一个内部网路 二、NAT和桥接网络链接模式区别 NAT模式&#xff1a;相当于宿主机构建一个内部局域网&a…...

sql删除冗余数据

工作或面试中经常能遇见一种场景题&#xff1a;删除冗余的数据&#xff0c;以下是举例介绍相应的解决办法。 举例&#xff1a; 表结构&#xff1a; 解法1&#xff1a;子查询 获取相同数据中id更小的数据项&#xff0c;再将id不属于其中的数据删除。-- 注意&#xff1a;mysql中…...

STM32-C语言基础知识

C语言基础知识 stdint.h简介 给寄存器某个位赋值 给位6赋值为1流程&#xff1a;先清0&#xff0c;再赋值 带参数的宏定义 建议使用do {…}while(0)来构造宏定义 条件编译 条件编译后面必须跟宏语句&#xff0c;如#if _LED_H 指针使用常见的2大问题 1、未初始化 2、越界使…...

【Point-LIO】基于Ubuntu20.04的ROS1平台的Point-LIO部署Mid-360激光雷达

0、前言 Mid360参数 1、代码拉取 2、代码编译运行 文件结构 编译流程&#xff1a; 1、先编译livox_ros_driver2 2、编译整个工程文件 3、运行launch文件&#xff08;livox_ros_driver2&#xff09; 成功启动&#xff1a; 3、实物运行 看得出来&#xff0c;在rviz…...

02_Node.js模块化

02_Node.js模块化 知识点自测 以下代码运行的结果是多少&#xff1f; const arr [10, 20, 30] const result arr.map(val > val 1).reduce((sum, val) > sum val, 0) console.log(result) A&#xff1a;60 B&#xff1a;63 <details><summary>答案</…...

网络——HTTP与HTTPS三次握手和四次挥手

HTTP协议本身并不直接处理TCP连接的建立和关闭&#xff0c;这些是由底层的TCP协议来完成的。但是&#xff0c;由于HTTP通常运行在TCP之上&#xff0c;因此理解TCP的三次握手&#xff08;用于建立连接&#xff09;和四次挥手&#xff08;用于关闭连接&#xff09;对于理解HTTP通…...

ModelScope-Agent(1): 基于开源大语言模型的可定制Agent系统

目录 简介快速入门 简介 github地址 快速入门 看前两篇&#xff0c;调用千问API和天气API # 选用RolePlay 配置agent from modelscope_agent.agents.role_play import RolePlay # NOQArole_template 你扮演一个天气预报助手&#xff0c;你需要查询相应地区的天气&#x…...

开发知识点-uniCloud

开发知识点-uniCloud 服务空间云函数 cloudfunctions云对象importObjectJSON 格式的文档型数据库Collection unicloud数据的指定表集合 DB SchemaJQL 语法参考资料 服务空间 项目关联空间 云函数 cloudfunctions 云对象importObject JSON 格式的文档型数据库 nosql 非关系…...

Redis——主从复制原理

Redis的主从复制原理是其高可用性和分布式读取能力的重要基础。以下是Redis主从复制原理的详细解释&#xff1a; 一、主从复制的基本概念 Redis的主从复制是一种数据复制和备份的方式&#xff0c;它允许一个主节点&#xff08;Master&#xff09;将其所有的数据同步到一个或多…...

MATLAB数学建模之画图汇总

MATLAB是一种强大的数学软件&#xff0c;广泛应用于工程计算、控制设计、信号处理等领域。在数学建模中&#xff0c;MATLAB的绘图功能可以帮助我们直观地展示数据和模型结果。 1. 二维数据曲线图 1.1 绘制二维曲线的基本函数 plot函数用于绘制二维平面上的线性坐标曲线图&am…...

Milvus attu - docker 使用 及 版本兼容

文章目录 版本查看attu 和 milvus 的兼容性Docker 加载attu docker 合并到 Milvus文件管理使用 docker compose 挂在 Milvus,登录 attu 出现报错: Error: Failed to connect to Milvus: Error: 1 CANCELLED: Call cancelled 于是检查兼容问题 版本查看 Milvus 版本发布: htt…...

okHttp的tcp连接池的复用

okhttp的连接池是tcp连接池吧&#xff0c;是两台机器之间的连接&#xff0c;ip:port连接&#xff0c;然后具体的接口再添加具体的url吗&#xff1f; 具体的 HTTP 请求&#xff08;包括 URL、请求方法、头部等&#xff09;则是在复用的 TCP 连接上进行传输的。 是的&#xff0c…...

nginx 自启动失败:Failed to parse PID from file: Invalid argument

记一次nginx自启动配置的问题 我的配置如下&#xff1a; [Unit] DescriptionA high performance web server and a reverse proxy server Afternetwork.target[Service] Typeforking PIDFile/home/u24/nginx/pid/nginx.pid ExecStartPre/home/u24/nginx/sbin/nginx -t -q -g d…...

Wwise SoundBanks内存优化

1.更换音频格式为Vorbis 2.停用多余的音频&#xff0c;如Random Container的随机脚步声数量降为2个 3.背景音乐勾选“Stream”。这样就让音频从硬盘流送到Wwise&#xff0c;而不是保存在内存当中&#xff0c;也就节省了内存 4.设置最大发声数Max Voice Instances 5.设置音频…...

centos 常见问题处理

免密登录配置 # 在当前机器下 执行命令 生成 私钥和公钥 ~/.ssh 目录下 ssh-keygen -t rsa # 执行如下命令 把公钥 放到 对应机器上的 ~/.ssh/authorized_keys ssh-copy-id 172.17.68.220 # 如此 两台机器两两配置 centos ssh连接慢 vim /etc/ssh/sshd_config # UseD…...

简述Vue每个周期具体适合哪些场景?

Vue.js 的生命周期分为几个不同的阶段&#xff0c;每个阶段都对应着组件的创建、挂载、更新和销毁。以下是对 Vue 实例每个生命周期周期的具体场景描述&#xff1a; 创建前/后&#xff08;beforeCreate / created&#xff09; beforeCreate&#xff1a;在实例初始化之后&#x…...

Alibaba Druid(简称Druid)

目录 核心功能 数据源配置与管理&#xff1a; 高性能与可扩展性&#xff1a; 监控与SQL解析&#xff1a; 安全性&#xff1a; 应用场景 使用方式 配置示例 通过yaml方式配置 web.xml中配置 访问Druid的监控页面 监控页面展示 Alibaba Druid&#xff08;简称Druid&am…...

linux protobuf的安装与使用

首先&#xff0c;下载protobuf&#xff1a; wget https://github.com/protocolbuffers/protobuf/releases/download/v21.11/protobuf-cpp-3.21.11.zip 然后&#xff0c;解压&#xff1a; tar -xf protobuf-2.5.0.tar.gz 接着&#xff0c;安装protobuf cd protobuf-3.21.11…...

关于Chrome自动同步书签的解决办法

前言 并不一定适用所有用户&#xff0c; 目前我在网上搜集了一些资料&#xff0c;也做了一些尝试。 就我个人总结的经验来讲&#xff0c;分享大家以下几种办法&#xff1a; 1.书签同步插件 点击如下&#x1f517;&#xff1a; Chrome书签同步https://bm.famend.cn/ …...

基于深度学习的甲状腺结节影像自动化诊断系统(PyQt5界面+数据集+训练代码)

随着医学影像技术的发展&#xff0c;计算机辅助诊断在甲状腺结节的早期筛查中发挥着重要作用。甲状腺结节的良恶性鉴别对临床治疗具有重要意义&#xff0c;但传统的诊断方法依赖于医生的经验和影像学特征&#xff0c;存在一定的主观性和局限性。为了解决这一问题&#xff0c;本…...

docker常用操作命令

Docker 常用命令 列出所有容器 ID docker ps -aq停止所有容器 docker stop $(docker ps -aq)删除所有容器 docker rm $(docker ps -aq)删除所有镜像 docker rmi $(docker images -q)复制文件 docker cp mycontainer:/opt/file.txt /opt/local/ docker cp /opt/local/file…...

Android:生成Excel表格并保存到本地

提醒 本文实例是使用Kotlin进行开发演示的。 一、技术方案 org.apache.poi:poiorg.apache.poi:poi-ooxml 二、添加依赖 [versions]poi "5.2.3" log4j "2.24.2"[libraries]#https://mvnrepository.com/artifact/org.apache.poi/poi apache-poi { module…...

JVM-程序计数器与栈

目录 程序计数器1&#xff1a;作用&#xff1a;2&#xff1a;特点&#xff1a;1&#xff1a;线程私有2&#xff1a;内存不会溢出 栈1&#xff1a;介绍&#xff1a;2&#xff1a;问题辨析&#xff1a; 程序计数器 1&#xff1a;作用&#xff1a; 程序计数器的作用就是记录下一条…...

【kotlin 】内联类(value class / inline class)

官方文档&#xff1a;https://kotlinlang.org/docs/inline-classes.html 注&#xff1a;inline class 关键字已经被废弃&#xff0c;取而代之的是value class。现在使用内联类需要定义类为value class&#xff0c;并使用JvmInline注解进行标注。 一、使用场景 有时候&#xff…...

【SpringBoot】使用IDEA创建SpringBoot项目

1、使用SpringBoot脚手架创建 我们使用SpringBoot的脚手架Spring Initializr创建&#xff0c;如图所示&#xff1a; 2、选择SpringBoot版本 最开始做项目时候&#xff0c;组长说创建一个 springboot 2.5.4 的项目&#xff0c;mysql使用 5.6.X &#xff0c;maven使用是3.6.X…...

C++设计模式(原型、代理、适配器、组合)

一、原型模式 1.定义 用原型实例指定创建对象的种类&#xff0c;并且通过拷贝这些原型创建新的对象。 原型模式允许通过复制现有的对象来创建新对象&#xff0c;而不是通过实例化类来创建。这种方式可以避免创建重复的对象&#xff0c;从而提高性能和降低内存消耗。 2.组成 …...

如何在CentOS 7上使用FreeIPA设置集中式Linux身份验证

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。 简介 FreeIPA 是一个针对 Linux 的开源安全解决方案&#xff0c;提供帐户管理和集中式身份验证&#xff0c;类似于微软的 Active Direc…...

vue2播放视频和预览文件的组件以及使用方法

##文件预览组件 按照组件 解决展示pdf的问题 npm install pdfh5 npm install canvas2.8.0 --ignore-scripts npm install --save dommatrix npm install --save web-streams-polyfill解决excel和docx预览的问题 npm install vue-office/docx vue-demi0.14.6 npm inst…...

性能之巅:Go语言优化深度探索

引言 在Go语言中进行性能优化是一个涉及多方面的工作&#xff0c;它涵盖代码编写、编译器优化、运行时系统调优以及对应用程序的深入理解。以下是一些关键点&#xff0c;包括性能分析工具、内存管理、并发优化等方面的内容&#xff0c;并附带了简单案例源代码。 性能分析工具…...