[IT技术] 前端开发常用哪些工具软件?

[复制链接]
nygaozhan 发表于 2023-10-4 20:03:27|来自:湖北 | 显示全部楼层 |阅读模式
前端开发中有哪些常用,好用的工具软件?
全部回复5 显示全部楼层
dermot 发表于 2023-10-4 20:03:35|来自:湖北 | 显示全部楼层
一、构建工具

1、 Parcel
https://parceljs.org/

Parcel是一款极速零配置WEB应用打包工具,快速、几乎零配置是它最大的特点,开箱即用。相比webpack,Parcel对于新手来说未尝不是一个很好的选择。
2、 Critters
github.com/GoogleChrom…

一款webpack的插件,它可以很方便的配置内联关键css( critical CSS ),其余的css部分则会异步加载,由于它不使用无头浏览器(headless browser)呈现内容,因此快速轻巧。=

3、sucrase
sucrase.io/ 如果你用typscript构建React项目,sucrase将是一个不错的选着,它的编译速度将是Babel的20倍。sucrase——一款ES6+编译器,重点关注非标准语言,例如Typescript,JSX和Flow。

4、Webpack Config Tool
webpack.jakoblind.no/
一款可视化的在线工具网站,你只需要选择前端项目运用到技术和相关配置,就能一键帮你生成webpack.config.js,省去你不少的麻烦。

5、JSUI
github.com/kitze/JSUI
JSUI 是一个可视化分类、构建和管理 JavaScript 项目的工具。不管是前端应用还是后端应用,也不论使用的是哪种框架,只要项目有一个 package.json ,即可进行管理。

6、PWA Universal Builder
pwa.cafe/
一款脚手架构建工具,方便创建基于Preact,React,Vue和Svelte的项目,开箱及支持Babel,Bublé,Browserlist,TypeScript,PostCSS,ESLint,Prettier和Service Workers!

7、VuePress
vuepress.vuejs.org/
VuePress 由两部分组成:第一部分是一个极简静态网站生成器,它包含由 Vue 驱动的主题系统和插件 API,另一个部分是为书写技术文档而优化的默认主题,它的诞生初衷是为了支持 Vue 及其子项目的文档需求。
每一个由 VuePress 生成的页面都带有预渲染好的 HTML,也因此具有非常好的加载性能和搜索引擎优化(SEO)。同时,一旦页面被加载,Vue 将接管这些静态内容,并将其转换成一个完整的单页应用(SPA),其他的页面则会只在用户浏览到的时候才按需加载。

二、框架和库

8、 PWA Starter Kit
pwa-starter-kit.polymer-project.org/
通过功能丰富的WEB组件快速帮你构建功能齐全的PWA网站项目,几乎零配置,完成了构建、测试和快速部署。

9、PaperCSS
www.getpapercss.com/
一个不太常规的CSS框架,如果你希望你的网站有手绘风格感觉,选择它准没错。

10、boardgame.io
boardgame.io/
http://BOARDGAME.IO是 Google 开源的一个游戏框架,旨在允许游戏作者将游戏规则从本质上转化为一系列简单的函数,这些函数用于描述当一个指定动作发生时游戏的状态变化,框架负责处理表述性状态传递。 无需再手动编写任何网络或后端代码。 功能特性:

  • 状态管理:自动跨浏览器、服务器和存储器无缝管理游戏状态;
  • 快速成型:在渲染游戏之前调试界面以模拟更改。
  • 多人游戏:所有连接到同一游戏的浏览器都实时同步,无需刷新。
  • 私密状态:私密信息可从客户端隐藏。
  • 日志:游戏日志可查看任意时间的信息。
  • UI 工具包:常用于游戏中的 React 组件。

11、Stimulus
stimulusjs.org
Stimulus是一个适度的前端框架,它并不试图接管整个前端的方方面面,不关心如何渲染HTML,相反用来增强HTML的相关行为。如果你的团队规模较小,但又想要和那些使用比较费力的主流方案的较大团队竞争,那么这是一个比较适合的前端框架方案。

12、sapper
sapper.svelte.technology/
Sapper是一个类似Next.js的框架,具有极高的性能和内存效率,具备代码分割,服务端渲染的现代框架功能,是一款军工级别的框架。

13、Reakit
reakit.io/
使用这个框架能让你快速搭建漂亮的React UI 交互站点。

14、Evergreen
evergreen.segment.com/
更为强大的React UI 框架,有一套非常标准的UI设计语言帮你构建企业级的具有国际范设计风格的WEB应用,这个框架类似我们国内的ant.design(https://ant.design/docs/spec/colors-cn)

HTML和CSS工具


15、 keyframes.app
keyframes.app
一款基于时间关键帧,在线制作网页动画的网站,你无需在编辑器和浏览器直接互相切换,及所见即所得。keyframes.app提供在线制作和谷歌浏览器扩展插件两种形式。制作完成后,你能很方便的将自动产生的CSS代码复制到你的项目中。

16、 Emotion
emotion.sh/
Emotion是一款用JavaScript编写css的库,支持字符串和对象两种方式声明CSS变量,如果你在使用React,试用这个库将让你以更加优雅的方式用JavaScript编写CSS。

17、modern-normalize
github.com/sindresorhu…
normalize.css可以让浏览器以接近标准的方式一致地渲染所有元素,而且不同于cssrest,只针对需要正常化的元素。modern-normalize只针对现代浏览器,而且足够现代,甚至IE和Edge都已经放弃。

18、layerJS
layerjs.org/
一款你只需要编写HTML就能很轻松实现菜单、画框、弹出层、滚动视察、缩放、触摸手势等众多效果的框架,这个框架代码压缩版只有30KB,很方便与各种前端框架集成(Angular,VueJS,React),支持响应式和触摸,并且不依赖任何库就能实现。

19、css-blocks
css-blocks.com/
一款受 CSS Modules, BEM 和 Atomic CSS 框架启发,为你的web应用组件提供完美的CSS模块方案。

20、usebasin
usebasin.com/
一款你只需要设计表单,无需编写后端代码,就能很方便的将表单应用集成到你的项目里。

21、mustard
mustard-ui.com/
一款适合初学者的CSS框架,但是看起来还蛮不错,模块化,开源,压缩版只有6KB,支持FLEX,Grid布局和自带一些漂亮UI,比如进度条,表单、按钮等,虽然小,但功能齐全。
插播一条
现在正值慕课网618活动,体系课最高直降2200元,全站实战课程享满减最多立减500元,今年还新增了,经典好课限时半价秒杀,有需要的小伙伴,可以直接点击链接去活动会场瞧瞧哦~
毕业充电站_灯塔计划 - 慕课网javascript工具


22、ScrollHint
appleple.github.io/scroll-hint…
一个JS库,用于指示元素可以水平滚动,并带有指针图标,如果你在做一个新手引导,这个工具将会是一个不错的选择。

23、ToastUI editor
github.com/nhnent/tui.…
强大的Markdown编辑器tui.editor,方便集成到你的项目里,这款强大的富媒体编辑器有以下特点:

  • 支持 CommonMark 与 GFM(GitHub Flavored Markdown)两种标准
  • 支持丰富的扩展插件,如颜色选择器、图表、UML、表格合并
  • 提供了所见即所得与 Markdown 这两种模式,在编辑过程中可以随时切换,非常方便。在所见即所得模式下,可以直接从浏览器、 Excel、PPT等复制文本,并且保留原来的格式

24、FilePond
github.com/pqina/filep…
Filepond 是一个用于文件上传的 JavaScript 库,可以上传任何内容,优化图像以获得更快的上传速度,并提供一个出色的,可访问的,流畅的用户体验。
Filepond 提供了多种上传方式:拖放,复制和粘贴文件,浏览文件系统或仅使用库的API。 gzip 压缩后仅有 21KB ,并且内置了图像优化和图像自动调整功能。
Filepond 适用于 React , Vue , Angular 和 jQuery 。

25、Dinero.js
sarahdayan.github.io/dinero.js/

一个用来创建、计算和格式化货币价值的不可变的框架。
无论在银行应用程序、电子商务网站还是证券交易所平台,我们每天都在与金钱互动。我们也越来越依赖技术来处理问题。
然而,关于如何以编程处理货币价值尚无共识。虽然金钱是现代社会中普遍存在的概念,但相较于日期和时间之类的东西,它并不是任何主流语言中的一流数据类型。结果,每一种软件都有自己的处理方式,且伴随着陷阱。
Dinero.js遵循Fowler的模式更多一点儿。它允许你在JavaScript中创建、计算和格式化货币值。你可以进行数学运算、解析和格式化对象,使你的开发过程更加轻松。
该库设计为不可变和可链接的模式。它支持全局设置,具有扩展格式选项,并提供本机国际化支持。

26、Swup
github.com/gmrchk/swup
一款适合初学者的框架,方便灵活易用,让你能快速制作专业级的页面转场动画效果。

27、Selection.js
simonwep.github.io/selection/
简单易用的可视化,支持鼠标拖拽、使用Cmd/Ctrl+click 选择页面元素的库(支持分组选择),大大节省了你的开发时间。只有3KB大小,不依赖jQuery。

28、Glider.js
nickpiscitelli.github.io/Glider.js/
一个超快速(25毫秒加载),轻量级(小于3KB),无依赖性(不需要jQuery)的制作幻灯效果的前端库,支持响应式,易于扩展,方便自定义事件等…,更多特性等待你的发现!

29、ScrollOut
scroll-out.github.io/
一款帮你制作专业级Scroll滚动效果(滚动视差)的框架,框架大小不到1KB,使用回调的方式将相关动画元素的属性进行实时分配,方便你做出个性化的动态效果。

图标、图表工具

30、Orion Icon Library
orioniconlibrary.com/
多达6000专业免费的SVG矢量图标,还支持深度的定制,比如更换配色,更改线条粗细,变换图标风格(细线条、粗线条、扁平),一键生成相关代码。

31、Frappe Charts
frappe.io/charts
一款简单、专业、开源、现代风格的SVG报表工具,不需要任何依赖库,代码风格简单,简单易用。支持一键导出svg代码。

32、SVGator
www.svgator.com/
如果您希望将Web图形提升到一个新的水平,那么动画SVG就是您的选择,而SVGator是您可以用来创建它们的最简单的工具之一。一款专业级的SVG动画制在线制作工具。SVGator还具有代码管理器面板,因此您可以准确地看到应用程序生成的代码。SVGator导出干净,格式良好的代码。

33、ApexCharts
apexcharts.com/
ApexCharts.JS 是一个现代化 JavaScript 图表库,用于使用简单的 API 构建交互式图表和可视化,功能十分强大。方便你将图表嵌入到你的Vue、React项目中。

34、MapKit JS
developer.apple.com/maps/mapkit…

一款苹果公司提供的地图工具,如果想制作和苹果官方网站一样的地图风格,这个工具将是一个不错的选择,允许你在地图上添加交互事件,丰富你的地图应用。

35、Img2
github.com/RevillWeb/i…
一款图片自动预加载和缓存工具,防止图片闪烁,并使用模糊滤镜预先显示图片延迟图片加载,提高网页加载速度,使用起来非常简单,你只需要使用替代标签即可,使用起来就是这么简单!

36、Lozad
github.com/ApoorvSaxen…
Lozad.js 是基于 IntersectionObserver API 的轻量级、高性能、可配置的纯 JavaScript并且无依赖的懒加载器,其能够被用于进行图片、iframe 等多种形式的元素。通过gzip压缩过后,仅仅1kb大小,相对于常用的jquery.lazyload.js来说,lozad.js实力碾压,虽然jquery.lazyload.js也才几kb大小。在github上,已经收获了4800+的star。

React工具


37、RSUITE
rsuitejs.com/
React Suite 是一套 React 组件库,为后台产品而生。由 HYPERS 前端团队与 UX 团队打造,主要服务于公司大数据产品线。经历了三次大的版本更新后,累积了大量的组件和丰富的功能。并支持在线定制个性化主题,更重要的是有中文版,方便我们学习使用。

38、Pagedraw
pagedraw.io/
一款神奇的在线UI设计制作工具,你只需要拖动和布局页面,这个工具就会给你自动生成质量高的React组件代码,更多功能等待你的发掘。

39、react-smooth-dnd
github.com/kutlugsahin…
一款拖拽页面元素的React工具,拖拽效果平滑,让你轻松就能实现卡片、列表、表单组件的的拖拽。

40、Unstated

unstated.io/
一个新的状态管理类库 unstated.js:简单易用/合理。和之前的 state 管理库思路完全不同,这个unstated主打 local state(不是全局store,一个小改动导致整棵树 rerender),多个 local state 之间也可以共享, 兼具了redux的易用性与flux的合理性,令人耳目一新;unstated完全就是为React设计的,“足够React”,让你感觉不到在用第三方组件。

41、Reach Router
reach.tech/router
Reach-Router 是前 ReactRouter 成员 Ryan Florence 开发的一套基于 react 的路由控件. 那么已经有比较成熟的 ReactRouter 了, 为什么要”再”做一套 Router 呢, 有兴趣的同学可以去了解一下,小编认为主要有以下几个特点值得你看看:

  • 小,就4kb,压缩后比react-router小40kb左右。
  • 更少的配置
  • 更好用
  • 基本一样的api,学习成本非常低
  • 源码非常简洁,总共就3个文件,900行,如果你想深入理解单页应用的路由是怎么实现的,reach-router,绝对是绝佳的下手资料

42、SVGR
www.smooth-code.com/open-source…
svgr是一个将SVG转换为React组件的工具,svgr由JavaScript实现。整个文档也非常的小,已开源在github上。

43、React Spreadsheet Grid
github.com/denisraslov…
用于React类似于Excel的网格组件,具有自定义单元格编辑器,高性能滚动和可调整大小的列。

测试和数据工具


44、webhint
webhint.io/
Webhint项目提供了一种用于检查代码的可访问性、性能和安全的开源检查(Linting)工具。在创建Web站点和应用中,有越来越多的细节问题亟待完善。为此,Webhint力图帮助开发人员标记这些细节。
Webhint以命令行接口(CLI)工具和在线扫描器两种形式提供,使用在线扫描器是最快的上手方式。使用在线扫描器需要为其提供一个公开的URL,用于运行报告并洞悉应用的运行情况。
在测试应用时,Webhint提供三种运行环境:jsdom、Chrome和Edge。后两种运行环境使用了Chrome DevTools协议,第一种运行环境使用Node.js环境快速地执行有限次数的检查,无需浏览器的支持。
还有更多强大的功能,还有待你试用挖掘。

45、Airtap
github.com/airtap/airt…

Airtap 是一种在浏览器中测试 JavaScript 的简单方法,号称能覆盖800多种浏览器,能够在数秒内开始在本地测试你的代码,并无缝转移到由 Sauce Labs 提供的基于云的浏览器上,以获得更好的覆盖测试。
Airtap 与其他跨浏览器测试运行器的不同之处在于其简单性,以及能够在许多浏览器中轻松运行测试套件而无需在本地安装它们。它可以让你在开发过程中快速迭代,并在发布前提供良好的浏览器覆盖率,而不用担心缺少浏览器支持。
不要只是声称你的 JavaScript 支持“所有浏览器”,用测试证明它!

46、mkcert
github.com/FiloSottile…
HTTPS 是 Web 发展的趋势,用于提高网站的安全性。使用 HTTPS 需要配置 TLS 证书,得益于 ACME 协议和 Let’s Encrypt 证书,远程环境可以很容易部署。但是对于本地环境,还没有普遍有效的证书。
mkcert 被设计的足够简单,隐藏了几乎所有生成 TLS 证书所必须的知识。它适用于任何主机名或者 IP,包括 localhost ,因为它只在你的本地环境使用。
证书是由你的私有 CA 签发,当你运行 mkcert-install 会自动配置这些信任,因此,当浏览器访问时,就会显示安全标识。目前支持 MacOS、Linux 和 Windows,以及 Firefox、Chrome 和 Java。甚至支持一些手机设备。

47、Puppeteer Recorder
checklyhq.com/docs/puppet…
Puppeteer 是一个Node库,它提供了一个高级API来控制DevTools协议上的Chrome或Chromium,常用于爬虫、自动化测试等,你在浏览器手动完成的大多数事情都可以使用它来完成。

48、jsonstore.io
www.jsonstore.io/
http://jsonstore.io为小型项目提供免费,安全且基于JSON的云数据存储。只需输入https://www.jsonstore.io/,复制URL就可以开始发送HTTP数据请求。POST请求将保存数据,PUT请求修改数据,DELETE请求删除数据和GET请求检索数据。大大方便了前端开发人员进行测试接口的集成,前端页面制作完成就能进行接口测试,使用起来就是这么简单。

49、Initab
initab.com/
一款为开发人员定制打造的工作台,通过谷歌浏览器插件安装即可使用,通过此工作台你可以轻松订阅你感兴趣的git项目、跟进相关问题、pull相关操作,查看版本历史,订阅Stack Overflow相关的内容,管理查看Gists相关内容,可以说一个主流技术平台聚合工作台。

50、lambdatest
www.lambdatest.com/
一款在线自动化测试云端平台,号称在2000多个真实浏览器和设备进行测试,可以根据你的测试需求进行深度定制,并形成相关记录,方便团队的协作,帮你发现跨平台不同浏览器版本的各种问题。
最后

希望这些工具对大家有所帮助和启发~

作者:IT科技时代
链接:https://www.imooc.com/article/278548
来源:慕课网
yanghandsome123 发表于 2023-10-4 20:03:49|来自:湖北 | 显示全部楼层
在本文中,我为前端Web开发人员汇总了40种顶级工具,从代码编辑器和代码游乐场到CSS生成器,JS库等等。  
CSS代码生成器

你是否曾经尝试记住如何声明渐变,文本阴影,Flexbox或Grid的CSS属性,仅举几例?不容易。除非你一再使用某些CSS功能及其属性,否则很难记住所有这些功能。但是,即使是精通CSS的人有时也需要对某些属性进行复习,尤其是如果他们有一段时间没有使用它们了。
如果你需要一些最新和最伟大的CSS的快速帮助,这里有CSS生成器来拯救。输入数值,预览结果,抓取生成的代码并运行。
CSS3 Generator




项目地址:https://css3generator.com/
CSS3 Generator是一款免费的在线应用,它可以让你快速编写一些现代CSS功能的代码,如Flexbox、渐变、过渡和变换等。
输入所需的CSS值,实时预览结果,复制并粘贴生成的代码。此外,此应用程序还会显示支持CSS代码的浏览器及其版本的列表。
终极CSS Generator




项目地址:https://webcode.tools/css-generator
CSS Generator是一个免费的在线应用程序,可让您生成CSS动画,背景,渐变,边框,滤镜等的代码。
界面友好,你感兴趣的CSS功能的浏览器支持信息清晰易发现,生成的代码干净准确。
CSS Grid布局生成器




项目地址:https://css-grid-layout-generator.pw/
CSS Grid非常棒,用代码创建网格可以让你完全控制最终的结果。然而,在你编码的时候,有一个可视化的网格表示是很有帮助的。虽然一些主要的浏览器已经实现了很好的工具来让你可视化你的网格,但一些开发人员可以做一些额外的帮助。这是CSS Grid生成器可能派上用场的地方。
Dmitrii Bykov编写的CSS Grid Layout Generator是免费的,可以在线访问,并且非常灵活。我试了一下,发现它在网格容器级别和网格项目级别上为我提供了很多控制,同时为我提供了不错的预览功能和简洁的代码。
如果你需要帮助,请单击“如何使用(How to Use)”按钮,然后观看应用作者提供的演示视频。
静态站点生成器

静态网站生成器代表
…在使用手动编码的静态网站和完整的CMS之间进行折衷, 同时保留两者的好处。本质上,会生成一个 静态的纯HTML网站,使用类似CMS的概念(例如模板)。可以从数据库中提取内容,但是更典型地, 使用Markdown文件。
这是StaticGen网站上列出的前两个静态网站生成器。
Next.js




项目地址:https://nextjs.org/
Next.js是一个免费的开源框架,用于静态导出的React应用。其特点包括:

  • 预渲染(Next支持服务器端渲染)
  • 零配置
  • 可扩展性
  • CSS-in-JS
  • 很棒的文档
  • 和更多。
Gatsby




项目地址:https://www.gatsbyjs.org/
Gatsby 是基于React的免费开源框架,可帮助 开发人员建立快速的网站和应用程序。
Gatsby 提供了大量功能,例如:

  • React,webpack,现代JavaScript和CSS的强大功能
  • 丰富的数据插件生态系统
  • 渐进式Web应用程序生成
  • 超级简单的部署
  • 为不同的用例定制的预先打包的Gatsby站点
  • 和更多。
SVG 优化器

网络上的性能至关重要:访问者在等待内容加载时会不耐烦,搜索引擎往往会惩罚速度缓慢的网站。
优化图形是构建快速网站和应用程序的必要步骤,SVG图形也不例外。为确保SVG代码干净整洁,使用SVG优化器已成为前端开发人员工作流程中必不可少的步骤。
以下是两个出色的SVG优化器,它们被专业开发人员广泛使用。
SVGOMG




项目地址:https://jakearchibald.github.io/svgomg/
SVGOMG是一个免费的在线应用程序,可让你将许多优化选项应用于SVG代码并预览最终结果。易于使用,也可以离线使用。
SVG Optimizers




项目地址:https://petercollingridge.appspot.com/svg-optimiser  
这是另一个很棒的免费在线SVG优化工具,可用于修剪SVG代码,它直观易用。
动画库

动画在网络上随处可见,无论是微妙的微效果,还是大块内容在屏幕上逐渐展开的故事性运动,都是动画的存在。
虽然现代的CSS和JavaScript包含了你创建一些酷炫的网页动画所需的功能,但下面列出的库肯定能让你更快地完成工作,并获得一些惊人的效果。
Animate.css




项目地址:https://animate.style/
Animate.css是一个可在你的Web项目中使用的即用型跨浏览器动画库。非常适合强调,首页,滑块和引导注意的提示。
顾名思义,这个库是纯CSS的。在预包装的效果中,你会发现:像弹跳和闪烁效果、后方入口和出口、淡入和淡出等引人注意的效果,以及其他大量的效果。
功能包括:

  • 使用npm,Yarn或CDN快速安装
  • 使用方便简单
  • 使用CSS自定义属性(CSS变量)自定义动画持续时间,延迟和交互的选项
  • 用于延迟、速度变化和重复的实用类。
GreenSock (GSAP)




项目地址:https://greensock.com/
GSAP(GreenSock动画平台)提供“针对现代网络的超高性能,专业级动画”。
其高度直观的JavaScript驱动的语法使你可以立即构建出色的动画。从DOM元素和JavaScript对象到SVG,Canvas和WebGL身临其境的体验,可以使用GSAP进行动画制作的对象没有任何限制。此外,GSAP是跨浏览器的,并且向后兼容,并提供了出色的文档和支持社区。
Anime.js




项目地址:https://animejs.com/
Anime.js 是一个轻量级的JavaScript动画库,具有简单而强大的API。它与CSS属性,SVG,DOM属性和JavaScript对象一起使用。
完全开源,凭借其直观的语法和出色的文档,你可以立即使用Anime.js并开始运行。
跨浏览器测试

开发人员无法控制要从哪种设备访问其网站或应用程序。在2019年,超过一半的网络流量来自移动设备。从整体上看,屏幕尺寸从台式机、平板电脑到智能手机和可穿戴技术都有所不同。
作为前端开发人员,确保网页在任何屏幕尺寸下都可以使用是我们工作的核心组成部分。虽然没有什么比得上直接在不同的浏览器和平台上测试网站和应用程序,但以这种方式覆盖所有基础不是我们大多数人的选择。下面列出的服务和应用程序可以提供帮助。
Caniuse




项目地址:https://caniuse.com/
我不知道你是怎么想的,但当我需要了解浏览器对任何HTML、CSS、SVG和JavaScript功能支持的最新信息时--无论这些功能是多么新奇或晦涩难懂——caniuse是我的首选网站。
你将获得全球和特定国家/地区级别的最新统计结果,以及有关特定问题,资源等的信息。
Am I Responsive?




项目地址:http://ami.responsivedesign.is/
这是一个免费的在线应用程序,可让您快速检查网站在不同屏幕尺寸下的外观。
以下是功能列表:

  • 你可以通过在文本框中输入要测试的站点的URL,或从任何地方使用浏览器上的“Am I RWD”书签来从该应用程序的网站中使用该应用程序。

  • http://localhost/
    works。
  • 可以在显示你网站的每个设备上单击并滚动以进行测试。
Responsive Web Design Checker




项目地址:https://responsivedesignchecker.com/
Responsive Web Design Checker,即响应式网页设计检查器,是另一个免费的在线应用,可以测试你的网站不仅在不同的屏幕尺寸上,而且在各种设备上的外观。其中包括各种台式机和笔记本电脑,Apple iPad Retina和Amazon Kindle Fire等平板电脑,以及Apple iPhone 6/7 Plus,三星Galaxy等智能手机。
BrowserStack




项目地址:https://www.browserstack.com/
BrowserStack是一项受欢迎的付费服务,可让你在2000多种真实设备和浏览器上测试你的网站或应用程序。它开箱即用,完全安全。
代码协作和游乐场

以下是一些很棒的工具,可让您快速共享代码,原型和测试项目构想。
GitHub

这个无需多言
CodePen




项目地址:https://codepen.io/
CodePen已经存在了很多年,并且受到前端开发人员社区的喜爱和广泛使用,它非常适合尝试概念,原型设计,学习编码和代码共享。由其团队定义如下:
CodePen是一个社交化的开发环境。从本质上讲,它允许你在浏览器中编写代码,并在构建时查看其结果。对于任何技能的开发人员来说,这是一个有用的和自由的在线代码编辑器,特别是对于学习代码的人来说,这是一个赋能。我们主要专注于前端语言,例如HTML,CSS,JavaScript和可转化为这些内容的预处理语法。
JSFiddle




项目地址:https://jsfiddle.net/
JSFiddle 是一个在线IDE服务和在线社区,用于测试和展示用户创建和协作的HTML、CSS和JavaScript代码片段,即 "fiddles"。它允许模拟AJAX调用。2019年,JSFiddle根据编程语言(PYPL)人气指数的搜索次数,在全球和美国排名第二,直接排在Cloud9 IDE之后,成为最受欢迎的在线IDE。
SoloLearn




项目地址:https://www.sololearn.com/  
SoloLearn是一个很棒的在线游乐场,可让你测试HTML,CSS和JavaScript代码。它还免费提供基本的编码课程,以及供开发人员和学习者使用的论坛。
http://jsrun.net



项目地址:https://jsrun.net/
这是一个国内版的CodePen,强力推荐!Codepen、JSFiddle虽好,但是由于服务器在国外,四度非常慢。而http://jsrun.net速度非常快。
Helium CSS
网址: geuis/helium-css


是一种用于发现网站上许多页面上未使用的CSS的工具。该工具基于JavaScript,可从浏览器运行。Helium接受网站不同部分的URL列表,而后加载并解析每个页面以构建所有样式表的列表。而后,它访问URL列表中的每个页面,并检查能否在页面上使用了样式表中找到的选择器。最后,它生成一个报告,其中详细详情了每个样式表以及未在任何给定页面上使用的选择器。
MaterializeCSS
网址:https://materializecss.com/


Materialize是基于Google Material Design的现代响应式CSS框架。
另外补充:
一个比较好的知乎开源项目专栏:GitHub掘金
技术github学习地址:https://github.com/codeGoogler/JavaCodeHub
程序员编程书籍:https://github.com/codeGoogler/
PS:如果想学习技术,或者在学习技术的过程中有疑问,对编程方向的选择,可以来这里找小于哥,一个有思想有规划,被代码延误的心灵导师,可咨询offer的选择,职业规划,学习路线,技术开发中的问题
更多插件工具
01)、parallel.js: 前后台通用的一个并行库。
02)、zepto: 用于现代浏览器的兼容 jQuery 的库。
03)、totoro: 稳固的跨浏览器测试工具。
04)、TheaterJS: 一个用于模拟人输入状态的 JS 库。
05)、stellar.js: 前台用于实现异步滚动效果的库,现已不再维护。
06)、skrollr: 另一款实现一步滚动的开源库,使用人数众多,可实现各种狂拽酷炫掉渣天的前台效果,看真相。
07)、regulex: 用于生成 正则表达式 的可视化流程图。
08)、markdown-it: 新型 Markdown 解析器,快速,支持插件。
09)、multiline: 用于 Javascript 中的多行文本,相似于 Ruby 的 HERE Doc。
10)、screenfull.js: 全屏插件,支持各大浏览器。
11)、lunr.js: 相似于 Solr, 但是用于浏览器上的全文搜索引擎,可以为 JSON 创立索引,离线也可以使用。
12)、jquery.hotkeys: jQuery 插件,用于绑定热键。
13)、breach_core: Javascript 编写的 Browser (浏览器)。
14)、octocard: 用于生成 Github 信息卡片的库。
15)、github-cards: 用于生成 Github 信息卡片的库。
16)、money.js: 轻量级货币转换库,web 和 node 皆可用。
17)、accounting.js: 轻量级的数字、货币转换库。
18)、javascript-algorithms: Javascript 实现的各种算法集合。
19)、lazy.js: 相似于 underscore, 但是会推迟执行,某些场景下,性能会有很大的提升。
20)、seajs: 前台模块加载器,处理模块化、依赖等问题。
21)、jQuery-One-Page-Nav: 单页应用中一个用于解决导航栏的库。
22)、js.js: Javascript 实现的 javascript JIT。
23)、jquery-ui: jQuery 团队开发的 UI 相关的前台库,功能强大。
24)、todomvc: 分别基于 AngularJS/EmberJS/Backbone等实现的 TODO List, 帮助开发者选择前台 MVC 库。
25)、localForage: Mozilla 出品,用于离线存储,基于IndexedDB, WebSQL 或者者。localStorage, 提供一致的接口。
26)、EventEmitter: 浏览器版的 EventEmitter。
27)、jquery.serializeJSON: jQuery 插件,用于将 form 表单序列化成 JSON 数据。
28)、knockout: 前台 MVVM 框架,用于开发富前台应用。
29)、mermaid: 可以根据文本生成流程图,相似于 Markdown 的语法。
30)、js-sequence-diagrams: 另一款可以根据文本生成流程图的库,相似于 Markdown 的语法。
31)、flow: 一个用来检测 Javascript 语法错误的库, Facebook 出品。
32)、zoomooz: jQuery 插件,用来解决浏览器缩放。
33)、fancyBox: 一个用于放大缩小图片、Web 内容或者者多媒体元素的库,优雅大方。
34)、mithril.js: 轻量型前台 MVC 框架,部分使用场景下性能优于 Angular.js 和 React。
35)、jquery.smartbanner: smartbanner 是从 IOS6 开始支持的一个新特性, 这个插件提供了对早期 IOS4/5 和 Android 的支持。
36)、jquery.scrollTo: 在页面上以一个元素为起始以动画的方式移动(ScrollTo)到另一个元素, 支持回退等。
37)、jScrollPane: 自己设置的滚动条,让所有浏览器都显示一样的滚动条。
38)、onepage-scroll: 提供相似于 iPhone6 展现页相似的效果,适用于单页应用,兼容到 IE8
39)、scrollMonitor: 前台插件用来监控元素的滚动事件(进入、退出等),性能很好
40)、ScrollMagic: 神奇的滚动交互效果插件,可以在滚动的过程中设置各种各样的动态效果
41)、infinite-scroll: 滚动加载,滚动到最下到无限加载, Paul Irish 大神之作
42)、animatable: 仅仅依靠 border-width 和 background-position 实现的各种动态效果,看真相
43)、Fluidbox: 页面上内嵌图片的放大缩小效果,相似于 Medium 中的效果
44)、jquery-validation: jQuery 的一个插件,用于校验 Form 表单
45)、BigVideo.js: jQuery 的一个插件, 用于实现大背景(视频、图片)效果
46)、emscripten: 一款基于 LLVM, 可以将 C/C++ 转换成 Javascript 的工具,使得 Javascript 可以近乎 Native 的速度
47)、qrcode-generator: 各种语言的二维码生成工具
48)、device.js: 一个可以检测设施类型的工具,可以让我们根据不同的设施来为其定制响应的 Javascript 和 CSS
49)、jquery-qrcode: jQuery 插件,用来生成二维码
50)、Wookmark-jQuery: jQuery 的一个插件,可以用来实现瀑布流的效果
51)、isotope: 可以用来过滤、排列布局,实现美观的动态布局切换效果,Demo
52)、lazysizes: 功能强大的图片推迟加载工具,可以首先加载一个低质量的图片,而后再加载高质量的图片
53)、progressbar.js: 简洁美观的进度条,扁平化
54)、pigshell: 一个由 Javascript 实现的Shell, 将互联网当做一个大的文件系统, 通过 cd/ls/cat…..等命令, 可以访问 Facebook/Twitter/Google Drive 等网络服务
55)、spectrum: Js实现的颜色选择器 (Colorpicker)
56)、jQuery.countdown: jQuery 倒计时插件
57)、summernote: WYSIWYG 富文本编辑器
58)、awesomplete: 非常轻型的一个自动补全 JS 库, 没有任何依赖, 配置简单, 美观
59)、switchery: IOS 7 上 Switch 的 JS 实现, 支持 IE8 及以上浏览器
60)、trix: Basecamp 公司出品的富文本编辑器,简洁小巧
61)、sensor.js: 在智能移动设施浏览器上,通过HTML5的api使用移动设施的功能。定位、运动、倾斜等
62)、hyhyhy: 用于创立 基于 HTML5 的 演示文稿
63)、swipebox: jQuery 插件,用于解决手机端的触摸事件
64)、FileAPI: 前台客户解决文件(拖放、多文件上传等)
65)、Sortable: 现代浏览器上用于实现元素拖拽排序的功能,支持 Meteor, AngularJS, React,不依赖 jQuery
66)、Swiper: 用于实现浏览器上的滑动切换效果,支持硬件加速
67)、matter-js: 2D 物理效果引擎,碰撞、弹跳等
68)、jQTouch: 用于辅助创立移动端的 Web 应用,支持主题、Zepto.js 等
69)、snabbt.js: 一个利用 Javascript 和 CSS transform 的 animation 库
70)、c3: 基于 D3 的图表库
71)、echarts: 企业级图表库,百度开发
72)、parallax.js: 一个用于响应智能手机 orientation 的库
73)、jQuery-Animate-Enhanced: jQuery 动画库的一个加强,用于现代浏览器
74)、wysihtml: 富文本编辑器,适用于现代浏览器
75)、slip: 一个通过滑动或者者拖拽来操控列表的库
76)、evil-icons: 一个矢量图库,提供 Ruby/Node 等支持
77)、PhotoSwipe: JS 的一个图片展现库
78)、focusable: 是页面上一个元素高亮的库,有图有真相
79)、firefox.html: Firefox 在浏览器端的实现 —— HTML 版的 Firefox
80)、jquery-mobile: jQuery 团队开发的用于辅助移动端 web app 开发的库,基于 HTML5
81)、mobile-angular-ui: 基于angularjs和bootstarp的web app开发框架
82)、interact.js: 一个适用于现代浏览器的,用于解决 手势、拖放、缩放等的库
83)、rebound-js: 实现部分物理效果,Facebook 出品
84)、basket.js: 基于 LocalStorage 的资源加载器,可以用来缓存 script 和 css, 移动端使用速度快于浏览器直接缓存
85)、iscroll: 高性能的滚动(scroll)解决库,功能强大,支持各种事件,不依赖任何的库,且插件丰富, 大众点评的移动端列表滚动就是用这个库解决的
86)、metrics-graphics: 基于 D3 的图表库,简洁、高效,Mozilla 出品
87)、accessible-html5-video-player: Paypal 出品的 Video 播放器
88)、loading: 几种 Loading 效果,基于 SVG
89)、flippant.js: 一款能够漂亮的网页元素翻转效果库,代码许久不升级,不过作为源码学习还是不错的
90)、move.js: 基于 CSS3 的前台动画框架
91)、scrollReveal.js: 使元素以非常酷帅的方式进入画布 (Viewpoint),看 Demo
92)、Modernizr: 一个用来检测 HTML5 和 CSS3 支持情况的库
93)、foundation: 另一款前台模版框架,相似于 Bootstrap
94)、Flat-UI: Bootstrap 的一款主题,简洁美观
95)、iCheck: 一款漂亮的 Checkbox 插件
96)、Swipe: 非常轻量级的一个图片滑动切换效果库, 性能良好, 尤其是对手机的支持, 压缩后的大小约 5kb
97)、slick: 功能异常强大的一个图片滑动切换效果库
98)、SocialButtons: 漂亮的社交按钮
99)、sweetalert: 一个非常美观的用于替换浏览器默认 alert 的库
100)、web-animations-js: Javascript 实现的 Web Animation API
101)、vivus: 可以动态描绘 SVG 的 JS 库, 支持多种动画
102)、plyr: 轻量, 小巧, 美观的 HTML5 视频播放器
103)、timesheet.js: 基于 HTML5 & CSS3 时间表
104)、slideout: 一个非常美观的侧滑菜单
书籍推荐:《JavaScript DOM编程艺术(第二版)》


这本书在简洁明快地讲述JavaScript和DOM的基本知识之后,通过几个实例演示了专业水准的网页开发技术,透彻阐述了平稳退化等一批至关重要的 JavaScript编程原则和最佳实践,并全面探讨了HTML5以及jQuery等JavaScript库。读者将看到JavaScript、 HTML5和CSS如何协作来创建易用的、与标准兼容的Web设计,掌握使用JavaScript和DOM通过客户端动态效果和用户控制的动画来加强 Web页面的必备技术;同时,还将对如何利用库提高开发效率有全面深入的理解
看完之后学习Jquery,这样就基本了解了语言库,当学会了之后,基本就你的前端网页开发就已经入门了。如果学习的比较扎实,你就可以胜任前端开发的工作了
我是程序于小二 @<a href="http://www.zhihu.com/people/0562ae57ba411b146099313075609e94" class="internal">终端研发部 ,每天分享技术开发小技巧和职场经验哦,原创不易,记得来点赞收藏哦
参考:

  • https://www.songma.com/news/txtlist_i67101v.html
  • https://blog.csdn.net/px01ih8/article/details/116573489
  • 前端全栈开发者
bulbul 发表于 2023-10-4 20:04:01|来自:湖北 | 显示全部楼层
从传统的DW到Vscode, 再到可视化编程, 有非常多的前端工具, 推荐一款H5编辑器H5-Dooring,它可以轻松帮你制作H5页面, 支持微信分享, 一键下载源码
yez3533 发表于 2023-10-4 20:04:32|来自:湖北 | 显示全部楼层
“工欲善其事,必先利其器!”下面为大家带来前端js开发常用的60种工具方法,有了这些开发工具你就可以高效的处理任务和信息了。


1.邮箱
  1. export const isEmail = (s) => {
  2.     return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
  3. }
复制代码
2.手机号码
  1. export const isMobile = (s) => {
  2.     return /^1[0-9]{10}$/.test(s)
  3. }
复制代码
3.电话号码
  1. export const isPhone = (s) => {
  2.     return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
  3. }
复制代码
4.是否url地址
  1. export const isURL = (s) => {
  2.     return /^http[s]?:\/\/.*/.test(s)
  3. }
复制代码
5.是否字符串
  1. export const isString = (o) => {
  2.     return Object.prototype.toString.call(o).slice(8, -1) === 'String'
  3. }
复制代码
6.是否数字
  1. export const isNumber = (o) => {
  2.     return Object.prototype.toString.call(o).slice(8, -1) === 'Number'
  3. }
复制代码
7.是否boolean
  1. export const isBoolean = (o) => {
  2.     return Object.prototype.toString.call(o).slice(8, -1) === 'Boolean'
  3. }
复制代码
8.是否函数
  1. export const isFunction = (o) => {
  2.     return Object.prototype.toString.call(o).slice(8, -1) === 'Function'
  3. }
复制代码
9.是否为null
  1. export const isNull = (o) => {
  2.     return Object.prototype.toString.call(o).slice(8, -1) === 'Null'
  3. }
复制代码
10.是否undefined
  1. export const isUndefined = (o) => {
  2.     return Object.prototype.toString.call(o).slice(8, -1) === 'Undefined'
  3. }
复制代码
11.是否对象
  1. export const isObj = (o) => {
  2.     return Object.prototype.toString.call(o).slice(8, -1) === 'Object'
  3. }
复制代码
12.是否数组
  1. export const isArray = (o) => {
  2.     return Object.prototype.toString.call(o).slice(8, -1) === 'Array'
  3. }
复制代码
13.是否时间
  1. export const isDate = (o) => {
  2.     return Object.prototype.toString.call(o).slice(8, -1) === 'Date'
  3. }
复制代码
14.是否正则
  1. export const isRegExp = (o) => {
  2.     return Object.prototype.toString.call(o).slice(8, -1) === 'RegExp'
  3. }
复制代码
15.是否错误对象
  1. export const isError = (o) => {
  2.     return Object.prototype.toString.call(o).slice(8, -1) === 'Error'
  3. }
复制代码
16.是否Symbol函数
  1. export const isSymbol = (o) => {
  2.     return Object.prototype.toString.call(o).slice(8, -1) === 'Symbol'
  3. }
复制代码
17.是否Promise对象
  1. export const isPromise = (o) => {
  2.     return Object.prototype.toString.call(o).slice(8, -1) === 'Promise'
  3. }
复制代码
18.是否Set对象
  1. export const isSet = (o) => {
  2.     return Object.prototype.toString.call(o).slice(8, -1) === 'Set'
  3. }
  4. export const ua = navigator.userAgent.toLowerCase();
复制代码
19.是否是微信浏览器
  1. export const isWeiXin = () => {
  2.     return ua.match(/microMessenger/i) == 'micromessenger'
  3. }
复制代码
20.是否是移动端
  1. export const isDeviceMobile = () => {
  2.     return /android|webos|iphone|ipod|balckberry/i.test(ua)
  3. }
复制代码
21.是否是QQ浏览器
  1. export const isQQBrowser = () => {
  2.     return !!ua.match(/mqqbrowser|qzone|qqbrowser|qbwebviewtype/i)
  3. }
复制代码
22.是否是爬虫
  1. export const isSpider = () => {
  2.     return /adsbot|googlebot|bingbot|msnbot|yandexbot|baidubot|robot|careerbot|seznambot|bot|baiduspider|jikespider|symantecspider|scannerlwebcrawler|crawler|360spider|sosospider|sogou web sprider|sogou orion spider/.test(ua)
  3. }
复制代码
23.是否ios
  1. export const isIos = () => {
  2.     var u = navigator.userAgent;
  3.     if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {  //安卓手机
  4.         return false
  5.     } else if (u.indexOf('iPhone') > -1) {//苹果手机
  6.         return true
  7.     } else if (u.indexOf('iPad') > -1) {//iPad
  8.         return false
  9.     } else if (u.indexOf('Windows Phone') > -1) {//winphone手机
  10.         return false
  11.     } else {
  12.         return false
  13.     }
  14. }
复制代码
24.是否为PC端
  1. export const isPC = () => {
  2.     var userAgentInfo = navigator.userAgent;
  3.     var Agents = ["Android", "iPhone",
  4.         "SymbianOS", "Windows Phone",
  5.         "iPad", "iPod"];
  6.     var flag = true;
  7.     for (var v = 0; v < Agents.length; v++) {
  8.         if (userAgentInfo.indexOf(Agents[v]) > 0) {
  9.             flag = false;
  10.             break;
  11.         }
  12.     }
  13.     return flag;
  14. }
复制代码
25.去除html标签
  1. export const removeHtmltag = (str) => {
  2.     return str.replace(/<[^>]+>/g, '')
  3. }
复制代码
26.获取url参数
  1. export const getQueryString = (name) => {
  2.     const reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
  3.     const search = window.location.search.split('?')[1] || '';
  4.     const r = search.match(reg) || [];
  5.     return r[2];
  6. }
复制代码
27.动态引入js
  1. export const injectScript = (src) => {
  2.     const s = document.createElement('script');
  3.     s.type = 'text/javascript';
  4.     s.async = true;
  5.     s.src = src;
  6.     const t = document.getElementsByTagName('script')[0];
  7.     t.parentNode.insertBefore(s, t);
  8. }
复制代码
28.根据url地址下载
  1. export const download = (url) => {
  2.     var isChrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
  3.     var isSafari = navigator.userAgent.toLowerCase().indexOf('safari') > -1;
  4.     if (isChrome || isSafari) {
  5.         var link = document.createElement('a');
  6.         link.href = url;
  7.         if (link.download !== undefined) {
  8.             var fileName = url.substring(url.lastIndexOf('/') + 1, url.length);
  9.             link.download = fileName;
  10.         }
  11.         if (document.createEvent) {
  12.             var e = document.createEvent('MouseEvents');
  13.             e.initEvent('click', true, true);
  14.             link.dispatchEvent(e);
  15.             return true;
  16.         }
  17.     }
  18.     if (url.indexOf('?') === -1) {
  19.         url += '?download';
  20.     }
  21.     window.open(url, '_self');
  22.     return true;
  23. }
复制代码
29.el是否包含某个class
  1. export const hasClass = (el, className) => {
  2.     let reg = new RegExp('(^|\\s)' + className + '(\\s|$)')
  3.     return reg.test(el.className)
  4. }
复制代码
30.el添加某个class
  1. export const addClass = (el, className) => {
  2.     if (hasClass(el, className)) {
  3.         return
  4.     }
  5.     let newClass = el.className.split(' ')
  6.     newClass.push(className)
  7.     el.className = newClass.join(' ')
  8. }
复制代码
31.el去除某个class
  1. export const removeClass = (el, className) => {
  2.     if (!hasClass(el, className)) {
  3.         return
  4.     }
  5.     let reg = new RegExp('(^|\\s)' + className + '(\\s|$)', 'g')
  6.     el.className = el.className.replace(reg, ' ')
  7. }
复制代码
32.获取滚动的坐标
  1. export const getScrollPosition = (el = window) => ({
  2.     x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
  3.     y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
  4. });
复制代码
33.滚动到顶部
  1. export const scrollToTop = () => {
  2.     const c = document.documentElement.scrollTop || document.body.scrollTop;
  3.     if (c > 0) {
  4.         window.requestAnimationFrame(scrollToTop);
  5.         window.scrollTo(0, c - c / 8);
  6.     }
  7. }
复制代码
34.el是否在视口范围内
  1. export const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
  2.     const { top, left, bottom, right } = el.getBoundingClientRect();
  3.     const { innerHeight, innerWidth } = window;
  4.     return partiallyVisible
  5.         ? ((top > 0 && top < innerHeight) || (bottom > 0 && bottom < innerHeight)) &&
  6.         ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
  7.         : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
  8. }
复制代码
35.洗牌算法随机
  1. export const shuffle = (arr) => {
  2.     var result = [],
  3.         random;
  4.     while (arr.length > 0) {
  5.         random = Math.floor(Math.random() * arr.length);
  6.         result.push(arr[random])
  7.         arr.splice(random, 1)
  8.     }
  9.     return result;
  10. }
复制代码
36.劫持粘贴板
  1. export const copyTextToClipboard = (value) => {
  2.     var textArea = document.createElement("textarea");
  3.     textArea.style.background = 'transparent';
  4.     textArea.value = value;
  5.     document.body.appendChild(textArea);
  6.     textArea.select();
  7.     try {
  8.         var successful = document.execCommand('copy');
  9.     } catch (err) {
  10.         console.log('Oops, unable to copy');
  11.     }
  12.     document.body.removeChild(textArea);
  13. }
复制代码
37.判断类型集合
  1. export const checkStr = (str, type) => {
  2.     switch (type) {
  3.         case 'phone':   //手机号码
  4.             return /^1[3|4|5|6|7|8|9][0-9]{9}$/.test(str);
  5.         case 'tel':     //座机
  6.             return /^(0\d{2,3}-\d{7,8})(-\d{1,4})?$/.test(str);
  7.         case 'card':    //身份证
  8.             return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(str);
  9.         case 'pwd':     //密码以字母开头,长度在6~18之间,只能包含字母、数字和下划线
  10.             return /^[a-zA-Z]\w{5,17}$/.test(str)
  11.         case 'postal':  //邮政编码
  12.             return /[1-9]\d{5}(?!\d)/.test(str);
  13.         case 'QQ':      //QQ号
  14.             return /^[1-9][0-9]{4,9}$/.test(str);
  15.         case 'email':   //邮箱
  16.             return /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/.test(str);
  17.         case 'money':   //金额(小数点2位)
  18.             return /^\d*(?:\.\d{0,2})?$/.test(str);
  19.         case 'URL':     //网址
  20.             return /(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&:/~\+#]*[\w\-\@?^=%&/~\+#])?/.test(str)
  21.         case 'IP':      //IP
  22.             return /((?:(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d)\\.){3}(?:25[0-5]|2[0-4]\\d|[01]?\\d?\\d))/.test(str);
  23.         case 'date':    //日期时间
  24.             return /^(\d{4})\-(\d{2})\-(\d{2}) (\d{2})(?:\:\d{2}|:(\d{2}):(\d{2}))$/.test(str) || /^(\d{4})\-(\d{2})\-(\d{2})$/.test(str)
  25.         case 'number':  //数字
  26.             return /^[0-9]$/.test(str);
  27.         case 'english': //英文
  28.             return /^[a-zA-Z]+$/.test(str);
  29.         case 'chinese': //中文
  30.             return /^[\\u4E00-\\u9FA5]+$/.test(str);
  31.         case 'lower':   //小写
  32.             return /^[a-z]+$/.test(str);
  33.         case 'upper':   //大写
  34.             return /^[A-Z]+$/.test(str);
  35.         case 'HTML':    //HTML标记
  36.             return /<("[^"]*"|'[^']*'|[^'">])*>/.test(str);
  37.         default:
  38.             return true;
  39.     }
  40. }
复制代码
38.严格的身份证校验
  1. export const isCardID = (sId) => {
  2.     if (!/(^\d{15}$)|(^\d{17}(\d|X|x)$)/.test(sId)) {
  3.         console.log('你输入的身份证长度或格式错误')
  4.         return false
  5.     }
  6.     //身份证城市
  7.     var aCity = { 11: "北京", 12: "天津", 13: "河北", 14: "山西", 15: "内蒙古", 21: "辽宁", 22: "吉林", 23: "黑龙江", 31: "上海", 32: "江苏", 33: "浙江", 34: "安徽", 35: "福建", 36: "江西", 37: "山东", 41: "河南", 42: "湖北", 43: "湖南", 44: "广东", 45: "广西", 46: "海南", 50: "重庆", 51: "四川", 52: "贵州", 53: "云南", 54: "西藏", 61: "陕西", 62: "甘肃", 63: "青海", 64: "宁夏", 65: "新疆", 71: "台湾", 81: "香港", 82: "澳门", 91: "国外" };
  8.     if (!aCity[parseInt(sId.substr(0, 2))]) {
  9.         console.log('你的身份证地区非法')
  10.         return false
  11.     }
  12.     // 出生日期验证
  13.     var sBirthday = (sId.substr(6, 4) + "-" + Number(sId.substr(10, 2)) + "-" + Number(sId.substr(12, 2))).replace(/-/g, "/"),
  14.         d = new Date(sBirthday)
  15.     if (sBirthday != (d.getFullYear() + "/" + (d.getMonth() + 1) + "/" + d.getDate())) {
  16.         console.log('身份证上的出生日期非法')
  17.         return false
  18.     }
  19.     // 身份证号码校验
  20.     var sum = 0,
  21.         weights = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2],
  22.         codes = "10X98765432"
  23.     for (var i = 0; i < sId.length - 1; i++) {
  24.         sum += sId[i] * weights[i];
  25.     }
  26.     var last = codes[sum % 11]; //计算出来的最后一位身份证号码
  27.     if (sId[sId.length - 1] != last) {
  28.         console.log('你输入的身份证号非法')
  29.         return false
  30.     }
  31.     return true
  32. }
复制代码
39.随机数范围
  1. export const random = (min, max) => {
  2.     if (arguments.length === 2) {
  3.         return Math.floor(min + Math.random() * ((max + 1) - min))
  4.     } else {
  5.         return null;
  6.     }
  7. }
复制代码
40.将阿拉伯数字翻译成中文的大写数字
  1. export const numberToChinese = (num) => {
  2.     var AA = new Array("零", "一", "二", "三", "四", "五", "六", "七", "八", "九", "十");
  3.     var BB = new Array("", "十", "百", "仟", "萬", "億", "点", "");
  4.     var a = ("" + num).replace(/(^0*)/g, "").split("."),
  5.         k = 0,
  6.         re = "";
  7.     for (var i = a[0].length - 1; i >= 0; i--) {
  8.         switch (k) {
  9.             case 0:
  10.                 re = BB[7] + re;
  11.                 break;
  12.             case 4:
  13.                 if (!new RegExp("0{4}//d{" + (a[0].length - i - 1) + "}$")
  14.                     .test(a[0]))
  15.                     re = BB[4] + re;
  16.                 break;
  17.             case 8:
  18.                 re = BB[5] + re;
  19.                 BB[7] = BB[5];
  20.                 k = 0;
  21.                 break;
  22.         }
  23.         if (k % 4 == 2 && a[0].charAt(i + 2) != 0 && a[0].charAt(i + 1) == 0)
  24.             re = AA[0] + re;
  25.         if (a[0].charAt(i) != 0)
  26.             re = AA[a[0].charAt(i)] + BB[k % 4] + re;
  27.         k++;
  28.     }
  29.     if (a.length > 1) // 加上小数部分(如果有小数部分)
  30.     {
  31.         re += BB[6];
  32.         for (var i = 0; i < a[1].length; i++)
  33.             re += AA[a[1].charAt(i)];
  34.     }
  35.     if (re == '一十')
  36.         re = "十";
  37.     if (re.match(/^一/) && re.length == 3)
  38.         re = re.replace("一", "");
  39.     return re;
  40. }
复制代码
41.将数字转换为大写金额
  1. export const changeToChinese = (Num) => {
  2.     //判断如果传递进来的不是字符的话转换为字符
  3.     if (typeof Num == "number") {
  4.         Num = new String(Num);
  5.     };
  6.     Num = Num.replace(/,/g, "") //替换tomoney()中的“,”
  7.     Num = Num.replace(/ /g, "") //替换tomoney()中的空格
  8.     Num = Num.replace(/¥/g, "") //替换掉可能出现的¥字符
  9.     if (isNaN(Num)) { //验证输入的字符是否为数字
  10.         //alert("请检查小写金额是否正确");
  11.         return "";
  12.     };
  13.     //字符处理完毕后开始转换,采用前后两部分分别转换
  14.     var part = String(Num).split(".");
  15.     var newchar = "";
  16.     //小数点前进行转化
  17.     for (var i = part[0].length - 1; i >= 0; i--) {
  18.         if (part[0].length > 10) {
  19.             return "";
  20.             //若数量超过拾亿单位,提示
  21.         }
  22.         var tmpnewchar = ""
  23.         var perchar = part[0].charAt(i);
  24.         switch (perchar) {
  25.             case "0":
  26.                 tmpnewchar = "零" + tmpnewchar;
  27.                 break;
  28.             case "1":
  29.                 tmpnewchar = "壹" + tmpnewchar;
  30.                 break;
  31.             case "2":
  32.                 tmpnewchar = "贰" + tmpnewchar;
  33.                 break;
  34.             case "3":
  35.                 tmpnewchar = "叁" + tmpnewchar;
  36.                 break;
  37.             case "4":
  38.                 tmpnewchar = "肆" + tmpnewchar;
  39.                 break;
  40.             case "5":
  41.                 tmpnewchar = "伍" + tmpnewchar;
  42.                 break;
  43.             case "6":
  44.                 tmpnewchar = "陆" + tmpnewchar;
  45.                 break;
  46.             case "7":
  47.                 tmpnewchar = "柒" + tmpnewchar;
  48.                 break;
  49.             case "8":
  50.                 tmpnewchar = "捌" + tmpnewchar;
  51.                 break;
  52.             case "9":
  53.                 tmpnewchar = "玖" + tmpnewchar;
  54.                 break;
  55.         }
  56.         switch (part[0].length - i - 1) {
  57.             case 0:
  58.                 tmpnewchar = tmpnewchar + "元";
  59.                 break;
  60.             case 1:
  61.                 if (perchar != 0) tmpnewchar = tmpnewchar + "拾";
  62.                 break;
  63.             case 2:
  64.                 if (perchar != 0) tmpnewchar = tmpnewchar + "佰";
  65.                 break;
  66.             case 3:
  67.                 if (perchar != 0) tmpnewchar = tmpnewchar + "仟";
  68.                 break;
  69.             case 4:
  70.                 tmpnewchar = tmpnewchar + "万";
  71.                 break;
  72.             case 5:
  73.                 if (perchar != 0) tmpnewchar = tmpnewchar + "拾";
  74.                 break;
  75.             case 6:
  76.                 if (perchar != 0) tmpnewchar = tmpnewchar + "佰";
  77.                 break;
  78.             case 7:
  79.                 if (perchar != 0) tmpnewchar = tmpnewchar + "仟";
  80.                 break;
  81.             case 8:
  82.                 tmpnewchar = tmpnewchar + "亿";
  83.                 break;
  84.             case 9:
  85.                 tmpnewchar = tmpnewchar + "拾";
  86.                 break;
  87.         }
  88.         var newchar = tmpnewchar + newchar;
  89.     }
  90.     //小数点之后进行转化
  91.     if (Num.indexOf(".") != -1) {
  92.         if (part[1].length > 2) {
  93.             // alert("小数点之后只能保留两位,系统将自动截断");
  94.             part[1] = part[1].substr(0, 2)
  95.         }
  96.         for (i = 0; i < part[1].length; i++) {
  97.             tmpnewchar = ""
  98.             perchar = part[1].charAt(i)
  99.             switch (perchar) {
  100.                 case "0":
  101.                     tmpnewchar = "零" + tmpnewchar;
  102.                     break;
  103.                 case "1":
  104.                     tmpnewchar = "壹" + tmpnewchar;
  105.                     break;
  106.                 case "2":
  107.                     tmpnewchar = "贰" + tmpnewchar;
  108.                     break;
  109.                 case "3":
  110.                     tmpnewchar = "叁" + tmpnewchar;
  111.                     break;
  112.                 case "4":
  113.                     tmpnewchar = "肆" + tmpnewchar;
  114.                     break;
  115.                 case "5":
  116.                     tmpnewchar = "伍" + tmpnewchar;
  117.                     break;
  118.                 case "6":
  119.                     tmpnewchar = "陆" + tmpnewchar;
  120.                     break;
  121.                 case "7":
  122.                     tmpnewchar = "柒" + tmpnewchar;
  123.                     break;
  124.                 case "8":
  125.                     tmpnewchar = "捌" + tmpnewchar;
  126.                     break;
  127.                 case "9":
  128.                     tmpnewchar = "玖" + tmpnewchar;
  129.                     break;
  130.             }
  131.             if (i == 0) tmpnewchar = tmpnewchar + "角";
  132.             if (i == 1) tmpnewchar = tmpnewchar + "分";
  133.             newchar = newchar + tmpnewchar;
  134.         }
  135.     }
  136.     //替换所有无用汉字
  137.     while (newchar.search("零零") != -1)
  138.         newchar = newchar.replace("零零", "零");
  139.     newchar = newchar.replace("零亿", "亿");
  140.     newchar = newchar.replace("亿万", "亿");
  141.     newchar = newchar.replace("零万", "万");
  142.     newchar = newchar.replace("零元", "元");
  143.     newchar = newchar.replace("零角", "");
  144.     newchar = newchar.replace("零分", "");
  145.     if (newchar.charAt(newchar.length - 1) == "元") {
  146.         newchar = newchar + "整"
  147.     }
  148.     return newchar;
  149. }
复制代码
42.判断一个元素是否在数组中
  1. export const contains = (arr, val) => {
  2.     return arr.indexOf(val) != -1 ? true : false;
  3. }
复制代码
43.数组排序,{type} 1:从小到大 2:从大到小 3:随机
  1. export const sort = (arr, type = 1) => {
  2.     return arr.sort((a, b) => {
  3.         switch (type) {
  4.             case 1:
  5.                 return a - b;
  6.             case 2:
  7.                 return b - a;
  8.             case 3:
  9.                 return Math.random() - 0.5;
  10.             default:
  11.                 return arr;
  12.         }
  13.     })
  14. }
复制代码
44.去重
  1. export const unique = (arr) => {
  2.     if (Array.hasOwnProperty('from')) {
  3.         return Array.from(new Set(arr));
  4.     } else {
  5.         var n = {}, r = [];
  6.         for (var i = 0; i < arr.length; i++) {
  7.             if (!n[arr[i]]) {
  8.                 n[arr[i]] = true;
  9.                 r.push(arr[i]);
  10.             }
  11.         }
  12.         return r;
  13.     }
  14. }
复制代码
45.求两个集合的并集
  1. export const union = (a, b) => {
  2.     var newArr = a.concat(b);
  3.     return this.unique(newArr);
  4. }
复制代码
46.求两个集合的交集
  1. export const intersect = (a, b) => {
  2.     var _this = this;
  3.     a = this.unique(a);
  4.     return this.map(a, function (o) {
  5.         return _this.contains(b, o) ? o : null;
  6.     });
  7. }
复制代码
47.删除其中一个元素
  1. export const remove = (arr, ele) => {
  2.     var index = arr.indexOf(ele);
  3.     if (index > -1) {
  4.         arr.splice(index, 1);
  5.     }
  6.     return arr;
  7. }
复制代码
48.将类数组转换为数组
  1. export const formArray = (ary) => {
  2.     var arr = [];
  3.     if (Array.isArray(ary)) {
  4.         arr = ary;
  5.     } else {
  6.         arr = Array.prototype.slice.call(ary);
  7.     };
  8.     return arr;
  9. }
复制代码
49.最大值
  1. export const max = (arr) => {
  2.     return Math.max.apply(null, arr);
  3. }
复制代码
50.最小值
  1. export const min = (arr) => {
  2.     return Math.min.apply(null, arr);
  3. }
复制代码
51.求和
  1. export const sum = (arr) => {
  2.     return arr.reduce((pre, cur) => {
  3.         return pre + cur
  4.     })
  5. }
复制代码
52.平均值
  1. export const average = (arr) => {
  2.     return this.sum(arr) / arr.length
  3. }
复制代码
53.去除空格,type: 1-所有空格 2-前后空格 3-前空格 4-后空格
  1. export const trim = (str, type) => {
  2.     type = type || 1
  3.     switch (type) {
  4.         case 1:
  5.             return str.replace(/\s+/g, "");
  6.         case 2:
  7.             return str.replace(/(^\s*)|(\s*$)/g, "");
  8.         case 3:
  9.             return str.replace(/(^\s*)/g, "");
  10.         case 4:
  11.             return str.replace(/(\s*$)/g, "");
  12.         default:
  13.             return str;
  14.     }
  15. }
复制代码
54.字符转换,type: 1:首字母大写 2:首字母小写 3:大小写转换 4:全部大写 5:全部小写
  1. export const changeCase = (str, type) => {
  2.     type = type || 4
  3.     switch (type) {
  4.         case 1:
  5.             return str.replace(/\b\w+\b/g, function (word) {
  6.                 return word.substring(0, 1).toUpperCase() + word.substring(1).toLowerCase();
  7.             });
  8.         case 2:
  9.             return str.replace(/\b\w+\b/g, function (word) {
  10.                 return word.substring(0, 1).toLowerCase() + word.substring(1).toUpperCase();
  11.             });
  12.         case 3:
  13.             return str.split('').map(function (word) {
  14.                 if (/[a-z]/.test(word)) {
  15.                     return word.toUpperCase();
  16.                 } else {
  17.                     return word.toLowerCase()
  18.                 }
  19.             }).join('')
  20.         case 4:
  21.             return str.toUpperCase();
  22.         case 5:
  23.             return str.toLowerCase();
  24.         default:
  25.             return str;
  26.     }
  27. }
复制代码
55.检测密码强度
  1. export const checkPwd = (str) => {
  2.     var Lv = 0;
  3.     if (str.length < 6) {
  4.         return Lv
  5.     }
  6.     if (/[0-9]/.test(str)) {
  7.         Lv++
  8.     }
  9.     if (/[a-z]/.test(str)) {
  10.         Lv++
  11.     }
  12.     if (/[A-Z]/.test(str)) {
  13.         Lv++
  14.     }
  15.     if (/[\.|-|_]/.test(str)) {
  16.         Lv++
  17.     }
  18.     return Lv;
  19. }
复制代码
56.函数节流器
  1. export const debouncer = (fn, time, interval = 200) => {
  2.     if (time - (window.debounceTimestamp || 0) > interval) {
  3.         fn && fn();
  4.         window.debounceTimestamp = time;
  5.     }
  6. }
复制代码
57.在字符串中插入新字符串
  1. export const insertStr = (soure, index, newStr) => {
  2.     var str = soure.slice(0, index) + newStr + soure.slice(index);
  3.     return str;
  4. }
复制代码
58.判断两个对象是否键值相同
  1. export const isObjectEqual = (a, b) => {
  2.     var aProps = Object.getOwnPropertyNames(a);
  3.     var bProps = Object.getOwnPropertyNames(b);
  4.     if (aProps.length !== bProps.length) {
  5.         return false;
  6.     }
  7.     for (var i = 0; i < aProps.length; i++) {
  8.         var propName = aProps[i];
  9.         if (a[propName] !== b[propName]) {
  10.             return false;
  11.         }
  12.     }
  13.     return true;
  14. }
复制代码
59.16进制颜色转RGBRGBA字符串
  1. export const colorToRGB = (val, opa) => {
  2.     var pattern = /^(#?)[a-fA-F0-9]{6}$/; //16进制颜色值校验规则
  3.     var isOpa = typeof opa == 'number'; //判断是否有设置不透明度
  4.     if (!pattern.test(val)) { //如果值不符合规则返回空字符
  5.         return '';
  6.     }
  7.     var v = val.replace(/#/, ''); //如果有#号先去除#号
  8.     var rgbArr = [];
  9.     var rgbStr = '';
  10.     for (var i = 0; i < 3; i++) {
  11.         var item = v.substring(i * 2, i * 2 + 2);
  12.         var num = parseInt(item, 16);
  13.         rgbArr.push(num);
  14.     }
  15.     rgbStr = rgbArr.join();
  16.     rgbStr = 'rgb' + (isOpa ? 'a' : '') + '(' + rgbStr + (isOpa ? ',' + opa : '') + ')';
  17.     return rgbStr;
  18. }
复制代码
60.追加url参数
  1. export const appendQuery = (url, key, value) => {
  2.     var options = key;
  3.     if (typeof options == 'string') {
  4.         options = {};
  5.         options[key] = value;
  6.     }
  7.     options = $.param(options);
  8.     if (url.includes('?')) {
  9.         url += '&' + options
  10.     } else {
  11.         url += '?' + options
  12.     }
  13.     return url;
  14. }
复制代码
点击关注,第一时间了解华为云新鲜技术~
雷斯魔 发表于 2023-10-4 20:05:07|来自:湖北 | 显示全部楼层
听我的就完事!前端不易,我用工具。今天我可是不要脸的遍访了四位经验丰富的前端工程师,历经七七四十天,九九八十一难,才整理出了这本葵花~啊不,前端开发工具宝典,用了你就知道,真香啊。

1、Responsively App:网页调试必备法宝



像我一样搞过前端的都知道,现在的大厂越来越重视网页在移动端的使用体验,是移动端的尺寸和型号太多,在不同的移动端上进行设备调试是个非常繁琐的工作。虽然Chrome 浏览器默认的工具也还不错,但是一次只能针对一种尺寸,开发成本相对还是高了一些。
Responsively 最主要的特色就是你只需要在一台设备上进行任何操作,便会实时同步到所有设备上,并且可以在一个窗口里查看所有目标设备的情况,形成一个镜像交互的效果。让你在进行网页调试的时候,如虎添翼。

2、D3.js:网红级数据可视化工具



这个工具可能是最受欢迎和最广泛的Javascript数据可视化库,足足收获了80kstars。它的优势就是在于能够将有数据的文档,使用HTML,SVG和CSS转化为一个可视化的图表,让信息更直观更灵活。而且它的通用性很强,并不需要通过专用框架,就可以直接与现代浏览器的功能结合,像是canvas类图表, 无论你代码操作粒度再细, 放在react组件里的无非就是一个canvas元素.而D3可以把任意数据绑定到文档对象模型(DOM),与react更好的结合。

3. CodePen:实现新创意代码



(codepen展示的优秀作品)
Codepen可以说是前端界的Dribbble,(一个展示设计和作品的网站)。它最大的存在意义,就是将HTML、CSS、JavaScript等创作出来的设计,更进一步的实现出来,把工具推向一个更真实的境地。它几乎支持所有你能够想到的库,也允许你添加外部资源,可以说是一块很好的实现创意的“画布”。所以如果你也是一个热衷于demo实现的设计师,那这里也将会是你研究技术、参观作品的灵感源泉。

4、bit.dev:很棒的组件中心



我一般用它来托管、记录和管理不同项目中的可重用构件。它最大的优势Bit可以轻松地在任何规模的项目和应用程序之间共享和管理组件。等于是只编写一次,就可以随处使用。而且它具有完全自动化的依赖性定义/分辨率和可扩展的版本控制,基本上满足设计系统所需,可以帮助你重新构建系统。
它还允许在团队之间共享组件,从而允许你的团队与其他团队协作。能够提高你们的团队协作效率,加快开发进程。

5、Npkill:系统打扫型工具

前端开发者一定能了解,node_modules 这个庞大的文件夹,每次执行 npm install 的时候都会安装项目的依赖包以及依赖的依赖,它存在于我们的每一个项目中,随着时间越来越长,它会变得越来越大,占据了不少储存空间。


当你头疼如何移除node模块文件夹时,Npkill就派上了大用场。它相当于是一个你系统清洁工,通过移除这些笨重的文件夹,给你的系统做一个瘦身。是开发者必须具备的清洁型工具。
俗话说,工欲善其事必先利其器,有了这些开发工具,希望能帮你提升战斗力,咱们争取聪明但不绝顶,偷懒也靠实力!
最后,给题主推荐一篇关于自学的文章:
如何更好的提升自己(程序员)?以及一个接有偿开发项目的平台——程序员客栈。
程序员客栈-领先的程序员自由远程工作平台商务合作可私聊。

快速回帖

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则