前端开发
文章平均质量分 76
灬点点
菜鸟
展开
-
Vue和React代码检测工具
检查工具Midway 为常见的错误提供了一些检查工具,以方便用户快速排错。@midwayjs/luckyeye 包提供了一些基础的检查规则,配合 Midway 新版本可以快速排查问题。使用首先安装 @midwayjs/luckyeye 包。npm i @midwayjs/luckyeye --save-dev一般情况下,我们会将它加入到一个检查脚本中,比如:"scripts": { // ...... "check": "luckyeye"},接下去,我们需要配置“规则包”,比如原创 2021-01-20 00:21:40 · 1098 阅读 · 2 评论 -
推荐前端开发工具
一、nodejs后端服务框架(hapi、koa、sails、egg)1、hapi构建功能强大、可扩展的应用程序,以最小的开销和完全开箱即用的功能地址:https://hapi.dev/2、koaKoa–基于Node.js平台的下一代web开发框架Koa 是一个新的 web 框架,由 Express 幕后的原班人马打造, 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数,Koa 帮你丢弃回调函数,并有力地增强错误处理。 Koa 并没翻译 2020-12-13 21:52:46 · 218 阅读 · 0 评论 -
前端小工具总结
一、css 一行文本超出overflow: hidden;text-overflow:ellipsis;white-space: nowrap;二、多行文本超出显示display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;overflow: hidden;三、页面一键变黑html { -webkit-filter: grayscale(100%); -moz-filter: gray翻译 2020-12-06 23:06:12 · 137 阅读 · 0 评论 -
前端全栈开发
一、Malagu 框架Malagu 是一个基于 TypeScript 的无服务器第一、基于组件、独立于平台的渐进式应用程序框架。目前,微服务的落地方案有很多,也相当成熟,比如像 Spring Cloud、Dubbo 等等的微服务框架。而 Malagu 提供的微服务解决方案是 Serverless 优先的,更加贴合 Serverless 场景。Serverless 让微服务框架的实现变得更加轻量,框架的使用更为简单,而当我们在使用传统微服务框架部署在 Serverless 平台上的时候,我们会发现传统微服翻译 2020-12-03 22:49:20 · 874 阅读 · 0 评论 -
优化前端资源加载
一、优化前端资源加载js加载资源方式:1.1、使用内联图片,也就是将图片转换为base64编码的data-url。这种方式,其实是将图片的信息集成到css文件中,避免了图片资源的单独加载。但图片内联会增加css文件的大小,增加首屏渲染的时间。1.2、使用js代码对图片进行预加载。preloadImage() { const imgList = [ require('@/assets/imgs/error.png'), require('@/assets/im原创 2020-10-24 21:41:19 · 338 阅读 · 0 评论 -
前端工具集
一、集合类/** * 判断是否是数组 * @param {Array}} arr 数组 */export const arrJudge = arr => { if (Array.isArray(arr)) { return true }}/** * 数组去重 * @param {Array} arr 数组 */export const arrRemoveRepeat = arr => { return Array.from(new Set(arr))翻译 2020-07-11 19:04:27 · 495 阅读 · 0 评论 -
前端存储总结
一、题记:你除了用过 Cookies、localStorage 和 sessionStorage 外,还有用过其它的存储方式么?其实除了前面提到的 3 种存储方式,目前主流的浏览器还支持 Web SQL 和 IndexedDB。二、Sharedb开源地址:https://github.com/share/sharedbShareDB是基于JSON文档的操作转换(OT)的实时数据库后端。它是DerbyJS Web应用程序框架的实时后端,共享数据库。应用:实时查询订阅、实时排行榜、点赞等。三、 Imm翻译 2020-06-29 13:18:27 · 1235 阅读 · 0 评论 -
前端工具类集合(日期、常用校验、IndexedDB、Local Storage、深拷贝等)
一、日期function pluralize(time, label) { if (time === 1) { return time + label } return time + label + 's'}/** * 日期格式化 */export function dateFormat(date) { let format = 'yyyy-MM-dd hh:mm:ss'; if (date != 'Invalid Date') {翻译 2020-06-25 19:26:10 · 469 阅读 · 0 评论 -
前端脚手架与策略者模式
一、策略者模式package com.citydo.faceadd.decoratormode;public abstract class Attack implements GameRoleInterface { public GameRoleInterface gr; public Attack(GameRoleInterface gr){ this....翻译 2020-04-22 21:22:07 · 257 阅读 · 0 评论 -
开源画布
一、G6G6 是一个图可视化引擎。它提供了图的绘制、布局、分析、交互、动画等图可视化的基础能力。旨在让关系变得透明,简单。让用户获得关系数据的 Insight。开源地址:G6二、GraphinGraphin 取名意为 Graph Insight(图的分析洞察),是一个基于 G6 封装的 React 组件库,专注在关系可视分析领域,简单高效,开箱即用。开源地址:Graphin三、GG...原创 2020-03-06 22:44:02 · 949 阅读 · 0 评论 -
分享8个前端实用工具
一、词语与句子分词地址:https://magi.com/介绍:由 Peak Labs 研发的基于机器学习的信息抽取和检索系统,它能将任何领域的自然语言文本中的知识提取成结构化的数据,通过终身学习持续聚合和纠错,进而为人类用户和其他人工智能提供可解析、可检索、可溯源的知识体系。二、postwoman地址:https://postwoman.io/realtime介绍:Postwoman...原创 2020-01-12 18:54:39 · 1056 阅读 · 0 评论 -
uni-app
什么是uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS,Android,H5,以及各种小程序(微信/支付宝/百度/头条/ QQ /钉钉)等多个平台。即使不跨端,uni-app同时也是更好的小程序开发框架。DCloud公司拥有370万开发者用户,其中uni-app有5万+案例,800款插件,50 +微信/ qq群,并且被阿里小程序工具内置(详见),开...转载 2019-10-13 17:29:29 · 484 阅读 · 0 评论 -
npm 后台运行
pm2(推荐)官网地址:http://pm2.io/npm install -g pm2pm2 start scripts/start.js // 启动pm2 start scripts/start.js -i max //启动 使用所有CPU核心的集群pm2 stop scripts/start.js // 停止pm2 stop all ...原创 2019-09-11 21:53:41 · 5167 阅读 · 0 评论 -
前后端防XSS、SQL、CORS
后端:1、filter拦截(过滤器) 2、采用jsoup过滤组件前端:1、js-xss 2、https://segmentfault.com/a/1190000016551188原创 2019-08-10 10:46:34 · 1073 阅读 · 0 评论 -
前端离线技术实现
一、前端离线作用最近几年新起来的、5G、人工智能、或者卫星基站,但是有没有考虑到,如果有一天没有电或者能源逐渐枯竭、那么离线是一个不错的选择、很火的智能音响、其中也采用的离线技术、为了解决没有网络或者信号很差的时候。那么前端离线技术有哪些呢?1、Application Cache 与 Cache Storage不管是浏览器缓存还是APP的缓存,都可以采用Application Cache或者...原创 2019-07-29 22:54:16 · 3101 阅读 · 0 评论 -
前端dvajs与umijs
一、dvajs开源地址:https://dvajs.com/1.dvadva 首先是一个基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解为一个轻量级的应用框架。2.特性易学易用,仅有 6 个 api,对 redux 用户尤其友好,配合 umi 使用后更是降低为 0 APIel...转载 2019-06-24 00:09:37 · 4385 阅读 · 0 评论 -
收集炫酷可视化插件
1、WEBGLWebGL (Web图形库) 是一种JavaScript API,用于在任何兼容的Web浏览器中呈现交互式3D和2D图形,而无需使用插件。WebGL通过引入一个与OpenGL ES 2.0紧密相符合的API,可以在HTML5 元素中使用。https://developer.mozilla.org/zh-CN/docs/Web/API/WebGL_API2、three.js...原创 2019-04-18 23:54:47 · 952 阅读 · 1 评论 -
搜索端上变化与泛可视化心得
一、Viewing Broadcast1.搜索动态化场景、搜索关键词、搜索视频、优惠券、搜索API、搜索卡片、场景层、OneSearch等。2.Weex全链路性能3.上线监控与稳定性4.快速开发效率、复用、页面快速搭建与发布5.国际化产品赋能6.页面搭建平台,或者母版7.Hubble平台8.主搜国际平台二、Vision-泛可视化1.应用数和前端的资源矛盾,前端经常...翻译 2019-04-17 01:28:29 · 311 阅读 · 0 评论 -
跨域请求(资源)十一种请求方式
一、什么是跨域请求由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。具体可以查看下表:二、解决跨域方法1、JSONP1) JSONP原理利用<script> 标签没有跨域限制的漏洞,网页可以得到从其他来源动态产生的 JSON 数据。JSONP请求一定需要对方的服务器做支持才可以。注意:JSONP都是GET和异步请求的,不存...翻译 2019-04-12 00:28:56 · 2673 阅读 · 0 评论 -
浏览器指纹实现
一、什么是浏览器指纹?①、浏览器指纹是指仅通过浏览器的各种信息,如系统字体、屏幕分辨率、浏览器插件,无需 cookie 等技术,就能近乎绝对定位一个用户,就算使用浏览器的隐私窗口模式,也无法匿名。这是一个被动的识别方式。也就是说,理论上你访问了某一个网站,那么这个网站就能识别到你,虽然不知道你是谁,但你有一个唯一的指纹,将来无论是广告投放、精准推送,还是其他一些关于隐私的事情,都非常方便。另外,...原创 2019-03-10 18:09:41 · 21814 阅读 · 0 评论 -
解决部分安卓touchend不触发问题
问题描述:js的触屏事件,主要有三个事件:touchstart,touchmove,touchend。这三个事件最重要的属性是 pageX和 pageY,表示X坐标,Y坐标。touchstart=在触摸开始时触发事件touchend=在触摸结束时触发事件touchmove=这个事件比较奇怪,按道理在触摸到过程中不断激发这个事件才对,但是在我的 Android 中,在 touchstart...翻译 2019-02-27 18:37:28 · 8493 阅读 · 0 评论 -
leaflet教程一
Leaflet 是一个为建设交互性好适用于移动设备地图,而开发的现代的、开源的 JavaScript 库。代码仅有 33 KB,但它具有开发在线地图的大部分功能。Leaflet设计坚持简便、高性能和可用性好的哲学思想,在所有主要桌面和移动平台能高效运作,在现代浏览器上会利用HTML5和CSS3的优势,同时也支持旧的浏览器访问。支持插件扩展,有一个友好、易于使用的API文档和一个简单的、可读的源代码...原创 2018-06-20 22:41:27 · 3429 阅读 · 0 评论 -
简单搭建Swagger与Spring boot项目
1、配置Spring boot的项目 http://start.spring.io/ 2 、导入IDEA中 3、导入有关于Swagger的mavenjar包&lt;dependency&gt; &lt;groupId&gt;io.springfox&lt;/groupId&gt; &lt;artifactId&gt;springfox-swagger2&a原创 2018-07-20 19:49:09 · 707 阅读 · 0 评论 -
chrome浏览器USB调试Android的APK界面与请求
一、首先您的电脑可以翻墙 二、用电脑USB接口连接手机 三、手机需要开放权限,如下图: 四、打开Google浏览器,输入网址:chrome://inspect/#devices 如下图: ok,成功完美运行。...原创 2018-08-12 12:04:20 · 2741 阅读 · 1 评论 -
全景html
krpano简介 : 一个制作全景图的软件 教程 : http://www.krpano360.com/ 案例 : http://demo.krpano100.com/ 优点:制作简单、效果炫酷、制作成本低、支持vr、vr视频 缺点:需要学习krpano规定的xml语言、几乎没有办法用javascript去扩展全景图功能,扩展功能只能用它规定的xml语言、扩展难度大 制作方法 : ...原创 2018-04-14 11:17:44 · 3480 阅读 · 0 评论 -
JavaScript 资源大全中文版
伯乐在线已在 GitHub 上发起「JavaScript 资源大全中文版」的整理。欢迎扩散、欢迎加入。https://github.com/jobbole/awesome-javascript-cn包管理器管理着 javascript 库,并提供读取和打包它们的工具。 npm - npm 是 javascript 的包管理器。 Bower - 一个 web 应用的包管理器。...翻译 2017-12-19 22:56:26 · 793 阅读 · 0 评论 -
开源1897个js
D3.js 是一个基于数据操作文档JavaScript库。D3帮助你给数据带来活力通过使用HTML、SVG和CSS。D3重视Web标准为你提供现代浏览器的全部功能,而不是给你一个专有的框架。结合强大的可视化组件和数据驱动方式Dom操作。以下收集了1800+的 D3.js 示例。 113th U.S. Congressional Districts20 years of the eng...翻译 2017-12-19 21:26:21 · 885 阅读 · 0 评论 -
Heatmap.js – 最强大的 Web 动态热图
Heatmap.js – 最强大的 Web 动态热图最新公司项目需要用到热力图,在百度上搜下,了解到heatmap.js这款神器。然后搜了下例子,却很难搜到马上出效果的例子,特此写一篇heatmap.js基础教程。官网:http://www.patrick-wied.at/static/heatmapjs/api:http://www.patrick-wied.at/static/h...翻译 2017-12-19 16:47:44 · 26467 阅读 · 11 评论 -
jQuery 国家语言(Language)选择切换的示例。
现在网站不仅是做的国内的,更多的大企业或者是做外贸电子商务的网站都需要面向国际化,因此就涉及到语言的选择,多语言网站建的切换应该怎么设计呢?这里给你一款jQuery 国家语言(Language)选择切换的示例。<!doctype html> <html> <head> <meta charset="utf-8"> <tit...转载 2017-12-16 11:59:38 · 5370 阅读 · 0 评论 -
JQuery插件库
JQuery插件库: http://plugins.jquery.com/全球jQuery的UI框架集锦,有国产DWZ框架入选 http://www.4wei.cn/archives/1001093 收集源于http://www.iteye.com/problems/85278 JQuery: 1. JQuery UI http://jqueryui.com/demos/ 2. DWZ富客...转载 2017-10-27 15:28:22 · 1150 阅读 · 0 评论 -
jasmine前端测试框架教程
一、简介jasmine是一个用来编写Javascript测试的框架,它不依赖于任何其它的javascript框架。它有拥有灵巧而明确的语法可以让你轻松的编写测试代码。二、下载地址https://github.com/jasmine/jasmine/releases三、使用方式上代码:<!DOCTYPE html><html><head&g...原创 2018-08-21 22:20:02 · 2333 阅读 · 0 评论 -
分享(快速开发前端)
1.编写可视化地图地址:http://minedata.cn/minemapapi/demo/index.html#base_map2.一键生成前端代码地址:https://alibaba.github.io/ice/block3.快速组件开发地址:https://www.iviewui.com/docs/guide/introduce4.D3进行开发可视化大屏...原创 2018-09-30 10:09:54 · 1577 阅读 · 0 评论 -
PWA应用
一、什么是PWA应用一个新的前端技术,PWA( 全称:Progressive Web App )也就是说这是个渐进式的网页应用程序。官网:https://developers.google.com/web/progressive-web-apps/是 Google 在 2015 年提出,2016年6月才推广的项目。是结合了一系列现代Web技术的组合,在网页应用中实现和原生应用相近的用户体验。...转载 2018-09-30 11:45:32 · 13806 阅读 · 1 评论 -
js在web worker使用多线程
注:必须要在服务器环境。什么是webworker?Web Worker为Web应用程序提供了一种能在后台中运行的方法。通过Web Worker可以生成多个线程同时运行,并保证页面对用户的及时响应,完全不会影响用户的正常操作。**单线程:**单线程在程序执行时,所走的程序路径按照连续顺序排下来,前面的必须处理好,后面的才会执行。简单的说就是处理事务的任务链,当只有一条链,所有的事情都在这一条链...翻译 2018-10-31 14:06:47 · 4290 阅读 · 1 评论 -
轮询,侦听和回调的区别
通俗易懂解释轮询,侦听和回调区别轮询:过10分钟就到女朋友宿舍前面去看她有没有回来、没回来我就再去打游戏。监听:我搬个凳子坐到她宿舍前、直到她回来。回调:在她门口贴个条子:回来后请打电话至011 。一、什么是轮询&lt;html&gt;&lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt原创 2018-11-06 11:41:24 · 6586 阅读 · 3 评论 -
nginx配置移动端与PC端访问规则
一、今天有一个临时性的项目、前端2个项目PC端、H5端,后端一个接口。二、不想进行2个服务进行搭建、采用nginx判断是否是移动端或者手机端、总共2种方法三、第一种:user root;worker_processes 2;#error_log logs/error.log;#error_log logs/error.log notice;#error_log logs/...原创 2018-11-23 13:41:03 · 7187 阅读 · 0 评论 -
基于Web Audio API实现音频可视化效果
网页音频接口最有趣的特性之一它就是可以获取频率、波形和其它来自声源的数据,这些数据可以被用作音频可视化。这篇文章将解释如何做到可视化,并提供了一些基础使用案例。基本概念节要从你的音频源获取数据,你需要一个 AnalyserNode节点,它可以用 AudioContext.createAnalyser() 方法创建,比如:var audioCtx = new (window.AudioCont...翻译 2018-12-11 00:22:56 · 5474 阅读 · 5 评论 -
redux-saga
一、什么是redux-sagaredux-saga是一个用于管理redux应用异步操作的中间件,redux-saga通过创建sagas将所有异步操作逻辑收集在一个地方集中处理,可以用来代替redux-thunk中间件。二、编写demo推荐使用 https://jsbin.com/?js,output三、上代码整个流程:ui组件触发action创建函数 —&amp;gt; action创建函数返回...转载 2018-12-17 22:46:48 · 339 阅读 · 0 评论 -
鼠标滑动进行过渡动画
上代码HTML:<div class="a1"></div><div class="a2"></div>CSS代码:.a1{ width:84px; height:80px; background:url(http://www.uc.cn/images1_4/sprite_uc_android.png);}.a...原创 2018-02-28 17:08:36 · 495 阅读 · 0 评论