前端工程师最常用的实用网站(JavaScript&&Vue)

目录

JavaScript 实用工具库

lodash

underscore

outils

ramda

常用动画库、图表汇总(常用)

animejs

animista

animate.css

three.js

d3js

echarts

Chart.js

highcharts

npm库集合

查npm的下载情况

npm包下载量对比

常用的npm包

前端监控、埋点

growingio

fundebug

 sentry

sonar

kibana

pinpoint

阿里 应用实时监控服务ARMS

腾讯日志服务

友盟

UI 、CSS 工具库

svga

gka

tinypng

vue ui库

react ui库

angular

其他

多个移动设备同时调试软件:

在线设置动画效果并生成css代码片段:


JavaScript 实用工具库

lodash

www.lodashjs.com

underscore

underscorejs.net

outils

GitHub - proYang/outils: 前端业务代码工具库

(业务代码工具库,可以按需引入,点击可直接查看函数的实现。易学易用,个人觉得值得推荐。)

ramda

github.com/ramda/ramda

(国外的一个工具库,只是了解,不常用。)

常用动画库、图表汇总(常用)

animejs

animejs.com/

(推荐,压缩后仅7kb, 易用,能实现较复杂的效果)

animista

animista.net/play/basic

(推荐尝试,自定义动画神器,有了它可以随心所欲的生成css动画代码,再copy到项目中,有效减少多余的未使用的css代码)

animate.css

https://github.com/animate-css/animate.css

three.js

https://github.com/mrdoob/three.js/

(实现3d动画,基于WebGL)

d3js

www.d3js.org.cn/

(数据可视化库、兼容性好)

echarts

Apache ECharts

Chart.js

www.chartjs.org/

highcharts

www.highcharts.com.cn/

npm库集合

查npm的下载情况

npm-stat.com/

(输入npm包名,多个包名用逗号隔开,点击Show charts即可查询,可展示天、周、月、年的数据)

npm包下载量对比

www.npmtrends.com/

常用的npm包

vuex-persistedstate、vuex-persist 、 js-cookie
、 budo 、 anywhere 、 http-server 、 lodash、echarts、dayjs、screenfull、qrcodejs2、clipboard、vue-clipboard2、nprogress、downloadjs、crypto-js、md5、uuid、mockjs、pdfkit、node-html-pdf、winston(日志服务)、mockjs、vue-quill-editor、node-cron(定时任务)、lru-cache(页面缓存)、chokidar(文件监控)、dotenv-defaults(支持默认值的 dotenv 系统,和devalue类似)、classnames、querystring、vue-lazyload、terser-webpack-plugin、webpack-bundle-analyzer、compression-webpack-plugin

前端监控、埋点

growingio

www.growingio.com/

(简称gio,埋点统计,数据可视化不错,使用的公司较多。)

fundebug

www.fundebug.com/

(付费产品,能支持js、nodejs、小程序、java等。如果有条件自研的话,可以参考这个)

 sentry

sentry.io(自动报告错误和异常)

sonar

前端质量代码扫描神器(推荐,很多公司有使用,能兼容不同语言。扫描找出代码中潜在的bug)


kibana

功能类似sentry, 在服务端的错误上报。

pinpoint

(统计、监控接口情况的工具)

阿里 应用实时监控服务ARMS

(数据统计、埋点可视化)

腾讯日志服务

日志服务 - 文档中心 - 腾讯云

(数据统计、埋点可视化)

友盟

www.umeng.com/ (数据统计、埋点可视化)

UI 、CSS 工具库

svga

svga.io/index.html(高新能动画播放)

gka

GitHub - tagerwang/gka: 一款高效、高性能的帧动画生成工具(推荐尝试,一键快速图片优化、生成动画文件)

tinypng

tinypng.com/(前端在线压缩必备工具)

vue ui库

elementUI、iview、vantUI(有赞出品)、antdv...这里就不一一介绍了。

react ui库

Material-UI(个人感觉用户体验真心不错,比如水波纹等)、antDesign、semantic-ui(貌似国外使用较多,不知是否好用,大家有用过吗?)

angular

ngAnt(国内基本就它了)、Angular Material(国外较多)

其他

多个移动设备同时调试软件:

A Web Developer's Browser | Responsively App


在线设置动画效果并生成css代码片段:

Animista - CSS Animations on Demand

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,以下是使用 JavaScript 设计的产品销售网站,包含一个主页和一个产品详情页。 1. 主页 在主页中,我们会使用 JavaScript 来实现以下功能: - 动态加载产品列表:从服务器获取产品数据,并使用 JavaScript 动态生成产品列表。 - 搜索框功能:在搜索框中输入关键字,可以动态过滤产品列表。 - 轮播图功能:使用 JavaScript 实现轮播图功能,让用户可以浏览最新产品和优惠活动。 - 点击跳转:点击产品图片或名称可以跳转到产品详情页。 以下是主页的代码: ``` <!DOCTYPE html> <html> <head> <title>产品销售网站</title> <style> /* 样式代码 */ </style> </head> <body> <header> <!-- 顶部导航栏 --> </header> <main> <!-- 轮播图 --> <section id="carousel"> <!-- 图片和文字说明 --> </section> <!-- 产品列表 --> <section id="product-list"> <h2>热门产品</h2> <input type="text" id="search-input" placeholder="搜索产品"> <ul id="products"> <!-- 动态生成产品 --> </ul> </section> </main> <footer> <!-- 底部导航栏 --> </footer> <script> // JavaScript 代码 </script> </body> </html> ``` 2. 产品详情页 在产品详情页中,我们会使用 JavaScript 来实现以下功能: - 动态加载产品数据:从服务器获取产品数据,并使用 JavaScript 动态展示产品信息和图片。 - 添加到购物车功能:点击“添加到购物车”按钮,将产品信息添加到购物车中。 - 图片放大功能:使用 JavaScript 实现图片放大功能,让用户可以查看产品细节。 以下是产品详情页的代码: ``` <!DOCTYPE html> <html> <head> <title>产品销售网站 - 产品详情页</title> <style> /* 样式代码 */ </style> </head> <body> <header> <!-- 顶部导航栏 --> </header> <main> <!-- 产品图片和信息 --> <section id="product"> <!-- 图片和信息 --> <button id="add-to-cart">添加到购物车</button> </section> </main> <footer> <!-- 底部导航栏 --> </footer> <script> // JavaScript 代码 </script> </body> </html> ``` 以上是使用 JavaScript 设计的产品销售网站的两个页面。需要注意的是,以上代码仅用于示范,还需要根据具体需求进行修改和完善。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值