javascript
文章平均质量分 66
一条宝鱼
这个作者很懒,什么都没留下…
展开
-
vue+sentry 前端异常日志监控
敲代码最糟心不过遇到自己和测试的环境都OK, 客户使用有各种各样还复现不了的问题,被逼无奈只能走到这一步:前端异常日志监控!vue官方文档如下推荐:就是说, vue有错误机制处理errorHandler(错误机制处理也有errorCaptured),而Sentry利用这个钩子函数提供了集成。那接下来就是使用了, 首先我们点一下上图中的官方集成四个大字,来到了sentry官方文档(中关于VUE的文档):https://sentry.io/for/vue/。Get Started!鉴转载 2021-08-04 17:48:38 · 2711 阅读 · 3 评论 -
sentry的搭建和使用
Sentry 简介(https://sentry.io)Sentry是一个开源应用程序监控平台,可帮助您实时识别问题。支持 web 前后端、移动应用以及游戏,支持 Python、OC、Java、Go、Node、Django、RoR 等主流编程语言和框架 ,还提供了 GitHub、Slack、Trello 等常见开发工具的集成。Sentry 服务支持多用户、多团队、多应用管理,每个应用都对应一个 PROJECT_ID,以及用于身份认证的 PUBLIC_KEY 和 SECRET_KEY。由此组成一个这样转载 2021-08-04 17:47:09 · 3865 阅读 · 0 评论 -
react脚手架
https://createapp.dev/webpack原创 2021-06-25 16:57:42 · 167 阅读 · 0 评论 -
protobufjs
protobufjsprotobuf.js是一个纯JavaScript实现,支持Node.js和浏览器的TypeScript,它容易使用速度快速,可以直接反射.proto文件,不需要生成任何文件。protobuf.js是基于ByteBuffer.js的Protocol Buffers纯JavaScript实现,主要功能是解析.proto文件,构建Message类,编码解码。安装下载安装protobufjshttps://github.com/protobufjs/prot...转载 2021-05-20 10:39:58 · 6035 阅读 · 0 评论 -
yarn和npm的区别
https://blog.csdn.net/weixin_53430951/article/details/111132595原创 2021-05-20 10:31:00 · 103 阅读 · 0 评论 -
exports、module.exports和export、export default到底是咋回事
前言难得有空,今天开始重新规范的学习一下node编程。但是引入模块我看到用require的方式,再联想到咱们的ES6各种export、export default。阿西吧,头都大了....头大完了,那我们坐下先理理他们的使用范围。require: node 和 es6 都支持的引入export / import: 只有es6 支持的导出引入module.exports / exports: 只有 node 支持的导出这一刻起,我觉得是时候要把它们之间的关系都给捋清楚了,不然我...转载 2021-02-23 16:04:12 · 416 阅读 · 0 评论 -
react-router-dom中link与Navlink
React Router 是一个基于React之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与 URL 间的同步。目前react-router最新版本已经到4.0+,因为新的版本是一次非常大的改动,所以这里直接讨论4.0以上版本。引用react-router // React Router 核心react-router-dom // 用于 DOM 绑定的 React Routerreact-router-native // 用于 Re..转载 2020-12-14 12:01:32 · 1183 阅读 · 0 评论 -
关于this.setState()的那些事
在网上看了很多关于this.setState()的介绍,觉得受益匪浅,就总结了一些帮助自己理解的点,在此分享出来,如果有侵权的地方,请及时提醒。一、State的定义状态(state) 和 属性(props) 类似,都是一个组件所需要的一些数据集合,但是它是私有的,并且由组件本身完全控制,可以认为它是组件的“私有属性(或者是局部属性)”。二、关于 setState() 有三件事是你应该知道的。# 参考链接1.不要直接修改 state(状态)this.state.comment = .转载 2020-11-13 09:47:18 · 406 阅读 · 0 评论 -
React Hooks 教程
https://jspang.com/detailed?id=50#toc21原创 2020-10-28 15:05:34 · 117 阅读 · 0 评论 -
精读《Function VS Class 组件》
1. 引言为什么要了解 Function 写法的组件呢?因为它正在变得越来越重要。那么 React 中Function Component 与 Class Component 有何不同?how-are-function-components-different-from-classes这篇文章带来了一个独特的视角。顺带一提,以后会用 Function Component 代替 Stateless Component 的说法,原因是:自从 Hooks 出现,函数式组件功能在不断丰富,函数..转载 2020-10-20 12:00:22 · 254 阅读 · 0 评论 -
简单易懂的 React useState() Hook 指南
状态是隐藏在组件中的信息,组件可以在父组件不知道的情况下修改其状态。我更偏爱函数组件,因为它们足够简单,要使函数组件具有状态管理,可以useState()Hook。本文会逐步讲解如何使用useState()Hook。此外,还会介绍一些常见useState()坑。1.使用 `useState()` 进行状态管理无状态的函数组件没有状态,如下所示(部分代码):可以找 codesandbox 尝试一下。运行效果:这时,要如何添加一个按钮来打开/关闭灯泡呢?为此,咱们需要具有状...转载 2020-10-19 17:20:02 · 386 阅读 · 0 评论 -
React-navigation使用攻略
源码在此 仅供参考一、简介根据React Navigation官网文档描述:Learn once, navigate anywhere.React Navigation的诞生,源于React Native社区对基于Javascript的可扩展且使用简单的导航解决方案的需求。React Navigation是Facebook,Expo和React社区的开发者们合作的结果:它取代并改进了React Native生态系统中的多个导航库,其中包括Ex-Navigation,React Native的N转载 2020-10-19 10:55:47 · 1244 阅读 · 0 评论 -
基于indexDB的Dexie数据库
https://blog.csdn.net/qq_36587420/article/details/105058830?depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-4&utm_source=distribute.pc_relevant.none-task-blog-BlogCom...原创 2020-04-21 17:12:48 · 822 阅读 · 0 评论 -
JS数组reduce()方法详解及高级技巧
reduce()方法可以搞定的东西,for循环,或者forEach方法有时候也可以搞定,那为啥要用reduce()?这个问题,之前我也想过,要说原因还真找不到,唯一能找到的是:通往成功的道路有很多,但是总有一条路是最捷径的,亦或许reduce()逼格更高...1、语法arr.reduce(callback,[initialValue])reduce 为数组中的每一个元素依...转载 2020-04-05 22:17:17 · 234 阅读 · 0 评论 -
React Router V4 精讲
一、前端路由和后端路由1)后端路由多页应用中,一个URL对应一个HTML页面,一个Web应用包含很多HTML页面,在多页应用中,页面路由控制由服务器端负责,这种路由方式称为后端路由。多页应用中,每次页面切换都需要向服务器发送一次请求,页面使用到的静态资源也需要重新加载,存在一定的浪费。而且,页面的整体刷新对用户体验也有影响,因为不同页面间往往存在共同的部分,例如导航栏、侧边栏等,页面整...转载 2019-12-15 23:10:51 · 245 阅读 · 0 评论 -
require('./expample.js).default详解
最近总碰到类似于var a = require('./expample.js).default这样的代码,感觉很奇葩,总结一波。为什么会出现这个问题?import是静态编译的,而require可以动态加载,也就是说你可以通过判断条件来决定什么时候去require,而import则不行,所以有时候我们会面临需要通过require去导入一个es6模块(比如rea...转载 2019-12-15 19:59:14 · 1638 阅读 · 1 评论 -
彻底搞清楚javascript中的require、import和export
为什么有模块概念理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块。但是,Javascript不是一种模块化编程语言,在es6以前,它是不支持”类”(class),所以也就没有”模块”(module)了。require时代Javascript社区做了很多努力,在现有的运行环境中,实现”模块”的效果。原始写法模块就是实现特定功能的一组方法。只要把不...转载 2019-12-15 18:59:46 · 226 阅读 · 0 评论 -
react-hot-loader 的配置【局部刷新】--{create-react-app}
安装1.安装create-react-appnpm install -g create-react-app2.创建项目create-react-app my-app配置1.弹出配置文件npm run eject2.安装React Hot Loadernpm install --save-dev react-hot-loader@next3.添加babe...转载 2019-12-15 18:06:38 · 696 阅读 · 0 评论 -
React生命周期函数
/*https://reactjs.org/docs/react-component.htmlReact生命周期函数: 组件加载之前,组件加载完成,以及组件更新数据,组件销毁。 触发的一系列的方法 ,这就是组件的生命周期函数组件加载的时候触发的函数: constructor 、componentWillMount、 render 、componentD...转载 2019-12-12 14:07:15 · 98 阅读 · 0 评论 -
React生命周期执行顺序详解
一、组件生命周期的执行次数是什么样子的???只执行一次: constructor、componentWillMount、componentDidMount执行多次:render 、子组件的componentWillReceiveProps、componentWillUpdate、componentDidUpdate有条件的执行:componentWillUnmount(页面离...转载 2019-12-12 14:06:18 · 490 阅读 · 0 评论 -
用 async/await 来处理异步
昨天看了一篇vue的教程,作者用async/ await来发送异步请求,从服务端获取数据,代码很简洁,同时async/await 已经被标准化,也是需要学习一下了。 先说一下async的用法,它作为一个关键字放到函数前面,async function timeout() { return 'hello world';} 只有一个作用, 它的调用会返回一个promise对...转载 2019-11-11 23:56:00 · 322 阅读 · 0 评论 -
AMD 和 CMD 的区别有哪些?RequireJS 和 SeaJS 的差异
AMD 规范在这里:https://github.com/amdjs/amdjs-api/wiki/AMDCMD 规范在这里:https://github.com/seajs/seajs/issues/242AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。类似的还有 CommonJS Modules转载 2016-11-06 15:49:42 · 555 阅读 · 0 评论 -
window.on load、DOMContent Loaded和$(document).ready()
<html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <转载 2018-05-27 21:50:40 · 4622 阅读 · 0 评论 -
从onload和DOMContentLoaded谈起
这篇文章是对这一两年内几篇dom ready文章的汇总(文章的最后会标注参考文章),因为浏览器进化的关系,可能他们现在的行为与本文所谈到的一些行为不相符。我也并没有一一去验证,所以本文仅供参考,在具体开发中还是要以实践结果为准。当 onload 事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了。当 DOMContentLoaded 事件触发时,仅当DOM加载完成,不包...转载 2018-05-27 21:49:51 · 246 阅读 · 0 评论 -
前端js实现粘贴图片到可编辑的div(其他标签也可)中
输入框中要实现粘贴图片功能,不能用input、textarea等输入框作为父容器,因为input、textarea中只能接受字符串,对于html标签不进行转义以及渲染。所以用contenteditable='true'属性来使div(其他容器也可)实现可编辑,来模拟输入框,实现粘贴图片至输入框中的效果,提交数据给后端的时候可以用form提交,也可用异步提交,form提交的时候将div中的数据全部放...转载 2018-06-03 22:10:52 · 1697 阅读 · 0 评论 -
高性能Javascript--脚本的无阻塞加载策略
Javascript在浏览器中的性能,可以说是前端开发者所要面对的最重要的可用性问题。在Yahoo的Yslow23条规则当中,其中一条是将JS放在底部 。原因是,事实上,大多数浏览器使用单进程处理UI和更新Javascript运行等多个任务,而同一时间只能有一个任务被执行。Javascript运行了多长时间,那么在浏览器空闲下来响应用户交互之前的等待时间就有多长。 从基本层面说,这意味着<s...转载 2018-05-13 22:28:28 · 212 阅读 · 0 评论 -
浏览器UI线程 和 js线程
浏览器中的线程介绍 通常一个浏览器会至少存在三个线程:JS引擎线程(用于处理JS)、GUI渲染线程(用于页面渲染)、浏览器时间触发线程(用于控制交互)。 而因为JS可以操作DOM元素,进而会影响到GUI的渲染结果,因此JS引擎线程与GUI渲染线程是互斥的。也就是说当JS引擎线程处于运行状态时,GUI渲染线程将处于冻结状态。 JS引擎是基于事件驱动,采用的是单线程运行机制。...转载 2018-05-13 21:36:49 · 1976 阅读 · 1 评论 -
浏览器的多线程机制(转)
在讲之前,大家都知道js是基于单线程的,而这个线程就是浏览器的js引擎。首先来看一下大家用的浏览器都具有那些线程吧。 假如我们要执行一些耗时的操作,比如加载一张很大的图片,我们可能需要一个进度条来让用户进行等待,在等待的过程中,整个js线程会被阻塞,后面的代码不能正常运行,这可能大大的降低用户体验,这时候我们就期望拥有一个工作线程来处理这些耗时的操作。在传统的html时代是基本不可能实现的,而现在...转载 2018-05-13 21:36:02 · 4800 阅读 · 0 评论 -
浏览器内核常驻线程
浏览器内核常驻线程浏览器 GUI 渲染线程JavaScript 引擎线程浏览器定时触发器线程浏览器事件触发线程 浏览器 http 异步请求线程浏览器 GUI 渲染线程 和 JavaScript 引擎线程之间是互斥的在debug里面check一下如下代码的效果即可知道123456var sleep = function(time) { var date = new Date(); wh...转载 2018-05-13 21:35:09 · 188 阅读 · 0 评论 -
Handlebars.js 模板引擎
介绍Handlebars 是 JavaScript 一个语义模板库,通过对view和data的分离来快速构建Web模板。它采用"Logic-less template"(无逻辑模版)的思路,在加载时被预编译,而不是到了客户端执行到代码时再去编译, 这样可以保证模板加载和运行的速度。Handlebars兼容Mustache,你可以在Handlebars中导入Mustache模板。使用与安...转载 2018-08-28 12:00:25 · 218 阅读 · 0 评论 -
Handlebars的使用方法文档整理(Handlebars.js)
Handlebars是一款很高效的模版引擎,提供语意化的模版语句,最大的兼容Mustache模版引擎, 提供最大的Mustache模版引擎兼容, 无需学习新语法即可使用;Handlebars.js和Mustache 的 区别目前版本为 2.0.0 , 无压缩的情况下目测是 3000 行源代码,约 200kb ;下面这个是基本的模版表达式,其中 {{ 和 }} 之间为hand...转载 2018-08-28 12:34:21 · 10343 阅读 · 0 评论 -
js中变量声明提前
只要是写过点JS代码,很简单一个var 就完事了。那对于JS编译器背后它又发生了什么呢?那就一步步通过代码来讲起。x = 1;alert(x);var y = function() { alert(x); var x = 2; alert(x);}y(); 上面的代码也会你答对了它会分别输出:1,undefined,2。对于我来说,第一反应它会输出:1,1...转载 2018-09-24 12:04:47 · 226 阅读 · 0 评论 -
var js=function(){}和function js(){}的区别
在Javascript中,函数及变量的声明都将被提升到函数的最顶部,也就是说我们可以先使用后声明,但函数表达式和变量表达式只是将函数或者变量的声明提升到函数顶部,函数表达式和变量的初始化将不被提升var js=function(){} 这种叫做函数表达式 必须先定义后使用function js(){}这种是函数声明 可以先使用后定义 它会对函数的声明进行一个提升举个例子 1...转载 2018-09-24 12:08:56 · 12091 阅读 · 0 评论 -
HTML5 file API加canvas实现图片前端JS压缩并上传
by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=6308本文可全文转载,但需得到原作者书面许可,同时保留原作者和出处,摘要引流则随意。一、图片上传前端压缩的现实意义对于大尺寸图片的上传,在前端进行压缩除了省流量外,最大的意义是极大的提高了用户体验。这种体验包括两方面:由于上传图片尺寸比较小,因此上传速度会比较快,...转载 2018-11-28 21:56:03 · 336 阅读 · 0 评论 -
html5调用手机相机并压缩、上传
近日刚做的一个功能,要在app里使用内嵌页面进行图像的上传。从功能上看,原生的实现应该是最好的。毕竟页面上所有的东西都隔着一个浏览器,所有的实现都要依赖浏览器提供的接口,不同的浏览器对接口的实现又有差异……到最后又会陷入兼容性的大坑!吐槽归吐槽,但是折腾的劲头不能丢!使用input file[camera]属性调用相机简直So easy!<input type="file"...转载 2018-11-29 19:53:29 · 544 阅读 · 0 评论 -
javascript,jquery日期插件_比较好用的日期插件
网上有很多日期插件,jqueryUI也自带的日期插件,jqueryeasyui也有日期插件,等等五花八门,当然,简单期间,你可以运用那些日期插件。本文介绍两款相对比较好用的日期插件。声明:本插件非本人所写,来源于网络。首先,一款是完整显示年月日的插件。如下图:这款插件很好用,API文档请看:http://www.haorooms.com/uploads/example/datatr...转载 2019-07-28 12:37:40 · 372 阅读 · 1 评论 -
html-javascript前端页面刷新重载的方法汇总
一、javascript页面刷新重载的方法:<a href="javascript:location.reload();">点击重新载入页面</a><a href="javascript:history.go(0);">点击重新载入页面</a><a href="javascript:location=location;">...转载 2019-07-28 12:41:18 · 1589 阅读 · 0 评论 -
jquery的height()和javascript的height总结,js获取屏幕高度
jquery的各种高度首先来说一说$(document)和$(window),如下:$(document).height();//整个网页的高度$(window).height();//浏览器可视窗口的高度$(window).scrollTop();//浏览器可视窗口顶端距离网页顶端的高度(垂直偏移)用一句话理解就是:当网页滚动条拉到最低端时,$(document).hei...转载 2019-08-09 10:35:07 · 860 阅读 · 0 评论 -
为什么给html标签定义了id,就可以在js中(浏览器环境)直接通过id引用这个dom元素?
问题只要标签有id这个属性,不使用getElementById方法,也可以直接用id获取dom元素。解惑经过一波搜索及查资料,原因大概是:如果dom元素的id名称不和js内置属性或全局变量重名的话,该名称自动成为window对象的属性,所以可以直接用来操作dom。看网上的说法是,这个是IE首先支持,火狐谷歌后面才支持的。不过现在还未形成标准,为了保险,还是不用的好。不过看各大浏览器都支持,...转载 2019-08-09 11:01:26 · 686 阅读 · 0 评论 -
浏览器UI多线程及对JavaScript单线程底层运行机制的理解
早在我刚刚学习JavaScript的时候,我就被“灌输”了这样的思想 JavaScript是单线程的 可是在我不断的学习过程中 学到了定时器、ajax的异步加载 一度让我对这句话产生怀疑 既然JavaScript是单线程的,为什么它还存在异步加载? 后来我知道了浏览器中不仅仅有js一个线程,它与其他线程共同组成了 —– 浏览器UI多线程早就想写一篇这样的文章,只是感觉理解的还不够,怕我写的对大家产...转载 2018-05-13 21:22:32 · 348 阅读 · 1 评论