推荐10个可以提高开发效率的Javascript库
Javascript库就像我们手头的工具:比如锤子,正确的工具和正确的使用能帮助我们完成任务。以下为本次推荐的几个库:
- Loadsh
- UUID
- Express.js
- Bottstrap
- Next.js
- Axios
- Passport
- Chalk
- Luxon
- Nodemon
一. Loadsh
是一个一致性、模块化、高性能的 JavaScript 实用工具库。
Lodash 通过降低 array、number、objects、string 等等的使用难度从而让 JavaScript 变得更简单。
Lodash 的模块化方法 非常适用于:
遍历 array、object 和 string
对值进行操作和检测
创建符合功能的函数
二. UUID介绍
帮助创建符合 RFC4122 规范的 UUID
特性:
- 完整 :支持RFC4122 版本1,3,4,5
- 跨平台:支持 CommonJs,ECMAScript Modules 和 CDN 构建,Node.js ,主流浏览器,Webpack,rollup.js 构建工具,React Native / Expo
- 安全: 高强度加密的随机值
- 小巧;:零依赖,占用空间小
- 命令行:包括了一个命令行指令
三. Express.js
基于 Node.js 平台,快速、开放、极简的 Web 开发框架
使用 Express.js ,只有前端开发背景的人员可以快速搭建起中后端平台
特性:
- Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架,为 Web 和移动应用程序提供一组强大的功能。
- 使用您所选择的各种 HTTP 实用工具和中间件,快速方便地创建强大的 API。
- Express 提供精简的基本 Web 应用程序功能,而不会隐藏您了解和青睐的 Node.js 功能。
- 许多 流行的开发框架 都基于 Express 构建。
四. Bootstrap
简洁、直观、强悍的前端开发框架,让web开发更迅速、简单。
Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。
五. Next.js
Next.js 为您提供生产环境所需的所有功能以及最佳的开发体验:包括静态及服务器端融合渲染、 支持 TypeScript、智能化打包、 路由预取等功能 无需任何配置。
特性:
- 零配置:自动编译并打包。从一开始就为生产环境而优化。
- 混合模式:SSG和SSR。SSR:构建时渲染页面 SSR:请求时渲染页面
- 增量静态生成:在构建之后以增量的方式添加并更新静态预渲染的页面。
- 支持 TypeScript:自动配置并编译 TypeScript。
- 快速刷新:快速、可靠的实时编辑体验,已在 Facebook 级别的应用上规模上得到验证。
- 基于文件系统的路由:目录下的组件都是一条路由。
- API 路由:创建 API 端点(可选)以提供后端功能。
- 内置支持 CSS:使用 CSS 模块创建组件级的样式。内置对 Sass 的支持。
- 代码拆分和打包:采用由 Google Chrome 小组创建的、并经过优化的打包和拆分算法。
六. Axios
Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。
特性:
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
七. Passport
Passport 是 Node.js 的认证中间件,特别灵活和模块化。可非常方便的植入任意基于 Express 的 Web 应用。支持用户名密码、Facebook 和 twitter 等认证。
特性:
- 支持超过 140+ 种认证策略
- 支持 OpenID 和 OAuth 单点登录
- 可轻松处理认证成功和失败
- 支持会话的持久化
- 动态的 scope 和权限
- 可选择所需的策略
- 实现自定义策略
- 无需在应用中安装 routes
- 轻量级
八. Chalk
为了使输出不再单调,添加文字背景什么的,改变字体颜色什么的
九. Luxon
Luxon 是由 Moment 出品的,用于操作 JavaScript 中时间与日期对象的工具库。
Luxon 可以看做对于 Moment.js 的现代化接口封装。Luxon 提供了 DateTime、Duration、Interval 等扩展类型,支持链式函数式风格的接口调用,能够对常见格式的时间字符串进行解析与转换,并且不需要 locale 或者 tz 文件就可以进行国际化转换。
特性:
- DateTime、Duration 和 Interval types
- 不可变的、可链接的、明确的 API
- 解析和格式化常用、自定义格式
- 本地时区和国际支持
十. Nodemon
nodemon是一种工具,可以自动检测到目录中的文件更改时通过重新启动应用程序来调试基于node.js的应用程序。
127个常用的JS代码片段,每段代码花30秒就能看懂(一)
JavaScript 是目前最流行的编程语言之一,正如大多数人所说:“如果你想学一门编程语言,请学JavaScript。”
FreeCodeCamp的创始人 Quincy Larson 在最近的一次采访中被问到哪种语言开发人员应该首先学习。他回答:“ JavaScript。”
“软件正在吞噬世界,JavaScript正在吞噬软件。JavaScript每年都在变得越来越占主导地位,而且没人知道最终会取代它的是什么。\” 如果您没有充分的理由学习一种新语言(例如您的工作要求您维护非JavaScript代码库),那么我的建议是着重于提高JavaScript的水平。”
听我说这么多,你是不是很激动呢。这里有127端常用的JS代码片段,方便你学习和使用。
如果数组所有元素满足函数条件,则返回true。调用时,如果省略第二个参数,则默认传递布尔值。
判断数组中的元素是否都相等
此代码示例检查两个数字是否近似相等,差异值可以通过传参的形式进行设置
此段代码将没有逗号或双引号的元素转换成带有逗号分隔符的字符串即CSV格式识别的形式。
此段代码将数组元素转换成<li>标记,并将此元素添加至给定的ID元素标记内。
此段代码执行一个函数,将剩余的参数传回函数当参数,返回相应的结果,并能捕获异常。
此段代码返回两个或多个数的平均数。
一个 map()函数和 reduce()函数结合的例子,此函数先通过 map() 函数将对象转换成数组,然后在调用reduce()函数进行累加,然后根据数组长度返回平均值。
此函数包含两个参数,类型都为数组,依据第二个参数的真假条件,将一个参数的数组进行分组,条件为真的放入第一个数组,其它的放入第二个数组。这里运用了Array.prototype.reduce() 和 Array.prototype.push() 相结合的形式。
此段代码将数组按照指定的函数逻辑进行分组,满足函数条件的逻辑为真,放入第一个数组中,其它不满足的放入第二个数组 。这里运用了Array.prototype.reduce() 和 Array.prototype.push() 相结合的形式,基于函数过滤逻辑,通过 Array.prototype.push() 函数将其添加到数组中。
用于检测页面是否滚动到页面底部。
此代码返回字符串的字节长度。这里用到了Blob对象,Blob(Binary Large Object)对象代表了一段二进制数据,提供了一系列操作接口。其他操作二进制数据的API(比如File对象),都是建立在Blob对象基础上的,继承了它的属性和方法。生成Blob对象有两种方法:一种是使用Blob构造函数,另一种是对现有的Blob对象使用slice方法切出一部分。
将字符串的首字母转成大写,这里主要运用到了ES6的展开语法在数组中的运用。
将一个句子中每个单词首字母转换成大写字母,这里中要运用了正则表达式进行替换。
此段代码将非数值的值转换成数组对象。
将数组中移除值为 false 的内容。
统计数组中某个值出现的次数
此代码段使用 existSync() 检查目录是否存在,然后使用 mkdirSync() 创建目录(如果不存在)。
返回当前访问的 URL 地址。
返回当前是今年的第几天
将字符串的首字母转换成小写字母
今天的内容就和大家分享到这里,感谢你的阅读,如果你喜欢我的分享,麻烦给个关注、点赞加转发哦,你的支持,就是我分享的动力,后续会持续分享剩余的代码片段,欢迎持续关注。
本文原作者:Fatos Morina
来源网站:medium
注:并非直译
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场,未经允许不得转载。