javascript
逸尘️
沉稳大气,笃行克己
展开
-
js轮询之setInterval踩坑小记
写在开头最近负责的项目要接入计费功能,有了计费自然需要充值。说起充值,无外乎支付宝、微信和网银了,然后前端调用充值接口后,需要起一个轮询任务,去监听支付状态,根据轮询结果来进行下一步的操作(当然了,有条件的大户人家想要直接上websocket也没问题)。所以,业务场景倒是很easy,梳理完逻辑我就吭哧吭哧开搞了…发现问题然而,当我基本写完在调试时,发现每次轮询停止了,页面上的状态会刷新两次。当时的业务是需要我在支付状态时显示验证码过期的倒计时,然而倒计时结束后会重新计时一次,这里可以不关心,原因就是轮原创 2020-05-25 16:13:31 · 2794 阅读 · 0 评论 -
配置Prettier格式化代码
什么是Prettier?看下官方文档的说明,这里。Prettier 是一个自定义的代码格式化工具,它支持以下文件格式:JavaScript, including ES2017JSXAngularVueFlowTypeScriptCSS, Less, and SCSSHTMLJSONGraphQLMarkdown, including GFM and MDXYAML...原创 2019-11-18 14:50:50 · 8330 阅读 · 0 评论 -
WebRTC实现实时互动AI视频应用
前言在此之前,简单介绍下前因后果。最近负责一个人脸和手势识别的可视化大屏项目,需要前端负责视频的抽帧和传输任务。起初,我们使用的是海康威视的摄像头,通过局域网来推送RTSP视频流。因为原生的video标签是不支持rtsp格式的视频的,所以前端采用了视频直播常用的JSMpeg + WebSocket的方案,即JSMpeg 从 WebSocket 服务器拉取 MPEG-TS 流进行播放。JSMpe...原创 2019-11-01 16:30:38 · 2338 阅读 · 0 评论 -
写个随机生成函数拯救一下key(map,生成dom且没有key)
randomString(len) { len = len || 32; var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; var maxPos = $chars.length; var pwd = ''; for (let i = 0; i < len; i++) {...原创 2018-11-30 09:54:07 · 553 阅读 · 0 评论 -
React中监听鼠标滚轮事件
const rdom = require('react-dom'); class Hello extends React.Component { render() { handleScroll(e) { const ele = rdom.findDOMNode(this); if (e.nativeEvent.deltaY <= 0) { /* s...原创 2018-08-29 06:56:18 · 12231 阅读 · 0 评论 -
jsonp解决跨域请求问题
1、同源策略 要理解跨域,先要了解一下“同源策略”。所谓同源是指,域名,协议,端口相同。所谓“同源策略“,简单的说就是基于安全考虑,当前域不能访问其他域的东西。一些常见的是否同源示例可参照下表: 在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的。例如我们在自己的网站通过ajax去获取豆瓣上https://developers.douban.com/wiki/?...转载 2018-04-06 17:32:48 · 1281 阅读 · 0 评论 -
javascript之事件捕获和事件冒泡
1. 事件阶段事件分为三个阶段:捕获阶段、目标阶段和冒泡阶段。捕获阶段: 事件从文档的根节点流向目标对象节点。途中经过各个层次的DOM节点,并在各节点上触发捕获事件,直到到达事件的目标节点,主要任务是建立传播路径。目标阶段: 事件到达目标节点,事件就进入目标阶段。事件在目标节点上被触发,然后会逆向回流,直到传播至最外层的文档节点。冒泡阶段: 事件在目标元...原创 2018-04-06 14:48:21 · 340 阅读 · 0 评论 -
JS原型和原型链
1. 前言2. 函数对象3. 普通对象4. 原型对象5. __proto__属性6.构造器constructor7. 原型链8.思考解答1. 前言 JS中原型和原型链的概念一直都是混淆不清,确实需要时间,偶尔回头看看。对于原型和原型链的理解,其实一直处于比较浅的概念。有句话说,没理解透原型和原型链,就算还没有真正入门的前端。希望通过总结这...原创 2018-04-05 13:04:23 · 1577 阅读 · 0 评论 -
js实现图片质量压缩demo
<!DOCTYPE html><html><head><meta charset="UTF-8"> <title>XMLHttpRequest上传文件</title> <script type="text/javascript"> /* 三个参数 file:一个是文件(类型是图片格式), w:一个是文件压缩的后宽度原创 2017-12-28 13:58:15 · 10833 阅读 · 0 评论 -
Javascript中apply()和call()的区别
我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家分享.. 如有什么不对的或者说法不明确的地方希望读者多多提转载 2017-03-22 22:02:43 · 279 阅读 · 0 评论 -
XHR异步上传文件报错: “the request was rejected because no multipart boundary was found”
js 使用异步上传文件时报错:解决方法:// 开始上传xhr.open("POST", self.url, true);// xhr.setRequestHeader("Content-Type","multipart/form-data");xhr.send(formData);因为请求头的”Content-Type”会自动填充,不需要单独设置header,也就是说,多此一举了。https:原创 2017-12-04 16:23:40 · 10757 阅读 · 1 评论 -
理解JavaScript 执行机制及异步回调(setTimeout/setInterval/Promise)
对于javascript执行机制的理解一直都是混淆不清。在面试或工作的过程中,也经常会遇到代码执行顺序或函数生命周期加载等类似的问题,这些多多少少都与javascript的执行机制相关。今天发现一篇很好的文章,欣喜之余,加以转载,供感兴趣的小伙伴学习,感谢作者分享。不论你是javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定的几行代码,我们需要知道其输出转载 2017-11-24 11:22:48 · 5186 阅读 · 2 评论 -
javascript实现异步上传图片
html代码:<form id="uploadForm" action="http://storage.test.com/file/upload" method="post" enctype="multipart/form-data"> <input type="hidden" name="key" id="key" value="原创 2017-12-04 19:03:23 · 982 阅读 · 0 评论 -
JavaScript深拷贝踩坑小记
目录关于深拷贝然而,有坑!解决方案1. 结构化克隆算法2. lodash中的_.cloneDeep() 方法关于深拷贝关于深拷贝与浅拷贝的理解,这里不过多的进行描述。因为此前自己总结了一次深拷贝的常见方法,JSON.parse(JSON.stringify(obj)),jQury的$.extend(true,{},obj),for...in加递归已经满足了大部分的业务需求。具体内容可见Java...原创 2018-09-20 22:55:35 · 598 阅读 · 0 评论 -
Nodejs中使用nodemailer搭建邮件自动发送服务
在Nodejs中,使用nodemailer可以轻松实现邮件自动发送功能。一、安装nodemailer包npm install nodemailer --save二、代码如下:const nodemailer = require(&quot;nodemailer&quot;);const smtpTransport = nodemailer.createTransport({ service: ...原创 2018-10-14 00:07:04 · 3755 阅读 · 2 评论 -
js中使用Clipboard API获取剪贴板内容
首先,单纯的 JavaScript 没有一个很完美的访问剪贴板(Clipboard)的方案W3C 标准下的做法(webkit/opera):使用:Clipboard API and eventsclipboardData.getData('text/plain')IE 下的做法:IE支持的时候 W3C 标准还没有,所以只能用 Text 参数:clipboardData.getData...原创 2019-09-17 16:00:15 · 19285 阅读 · 0 评论 -
Common getUserMedia() Errors
在你的getUserMedia()开始运行的那一瞬间,就会遇到各种各样的错误:用户没有摄像头,只有一个麦克风用户(不小心地)拒绝了浏览器的使用摄像头请求用户在你的getUserMedia()代码已经初始化之后才将摄像头/麦克风插到电脑上媒体设备已经被其他的应用所占用了只针对Firefox:设备已经被Firefox浏览器的其他标签页所占用了为了解决这些状况,在...转载 2019-09-03 10:49:30 · 753 阅读 · 0 评论 -
getUserMedia video视频镜面反转
场景是这样的,我需要调用摄像头不间断地抽帧,发送给后端,后端通过调用人脸库模型进行人脸识别,手势识别。在此之前,我们尝试了使用摄像头推流的方法,把视频流通过node服务层中转(因为摄像机的ffmepg流不能直接播放),前端拉流以后抽帧。后来,因为上述方式衍生问题比较多,传输慢、视频延迟、清晰度等问题逐渐暴露,虽然后面一一解决,但是我们还是想尝试新的方案,以此达到更佳的体验效果。于是乎,我们买...原创 2019-09-02 16:28:12 · 8537 阅读 · 8 评论 -
Jest 断言归纳
Jest 实在是很方便,上手简单,几乎零配置。记录一下学习 Jest matchers。附上大部分说明及示例。普通匹配器toBe - toBe 使用 Object.is 来测试是否完全相等.not - 用来测试相反的用例.toEqual如果你想检查某个对象的值,请改用 toEqual。toBe最简单的测试值的方法是看是否精确匹配。test('two plus two is fou...转载 2019-05-31 18:15:29 · 4552 阅读 · 0 评论 -
extract-text-webpack-plugin 不再支持 Webpack 4.3.0
问题描述目前 extract-text-webpack-plugin 最新版本不支持 Webpack 4.3.0 版本. Webpack 4.2.0 一下可用。目前从 extract-text-webpack-plugin issues 了解, 未来 extract-text-webpack-plugin 将废弃,作者建议使用 mini-css-extract-plugineasywebpa...原创 2019-02-27 14:31:46 · 1907 阅读 · 0 评论 -
Chrome Extension插件开发概述
目录一、前言一、Chrome Extension还是Chrome Plugin?二、为什么选择Chrome浏览器?三、关于Chrome Extension四、开发调试1. 调试弹出页(popup)2. 调试选项页(option)3. 调试后台页(background)4. 调试内容脚本(content script)五、Manifest 文件六、content-script文件七、backgrou...原创 2019-02-02 16:11:42 · 20190 阅读 · 5 评论 -
关于Warning: setState(...): Can only update a mounted or mounting component.的解决方案
一、原因在做项目的时候,控制台一直报一个错误。最初以为是脏数据导致的key重复问题,后来发现这个问题一直存在。细看,发现具体错误提示如下:略经思考,脑子里首先闪现的问题原因是,setState异步函数在组件生命周期结束后异步抛出。经此设想,快速切换两个路由,此问题复现,即证明了猜想是正确的。react中快速切换路由时报此错误,是由于在组件开始挂载(componentWillmount)或...原创 2019-01-12 16:23:58 · 2890 阅读 · 0 评论 -
cookie和token身份验证
1. cookie身份验证用户输入登陆凭据;服务器验证凭据是否正确,并创建会话,然后把会话数据存储在数据库中;具有会话id的cookie被放置在用户浏览器中;服务器验证凭据是否正确,并创建会话;在后续请求中,服务器会根据数据库验证会话id,如果验证通过,则继续处理;一旦用户登出,服务端和客户端同时销毁该会话在后续请求中,服务器会根据数据库验证会话id,如果验证通过,则继续处理;...原创 2018-12-18 10:48:12 · 5915 阅读 · 0 评论 -
React中使用highcharts绘制图表demo
import React from 'react';import Highcharts from 'highcharts';export default class extends React.Component { componentDidMount() { this.renderGraph(); } renderGraph = () => { let...原创 2018-10-30 17:29:42 · 4330 阅读 · 0 评论 -
ES6中的Promise对象小结
Promise是一种异步编程的解决方案,ES6提供原生的Promise,它比传统的解决方案,回调函数和事件,更加合理和强大。Promise对象有以下两个特点:1、对象的状态不受外界影响。Promise对象代表一个异步操作,有三种状态:pending, resolved, rejected。只有异步操作的结果,可以决定是哪一种状态。2、状态一旦改变,就不会再变化,并且任何时候都可以得到这...转载 2017-10-23 15:35:26 · 739 阅读 · 0 评论 -
javascript中使用迭代操作数组替代for循环(map,filter,some,every,reduce,find )
1.Mapmap() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。语法:let new_array = arr.map(function callback(currentValue, index, array) { // Return element for new_array }[, thisArg])参数: callback 生成新数组元素的函原创 2017-11-22 15:41:56 · 1322 阅读 · 0 评论 -
JavaScript 武器库之window
setScrollTop/** * 设置滚动条距顶部的距离 * @param value * @returns {*} */function setScrollTop(value) { window.scrollTo(0, value); return value;}原创 2017-12-08 17:28:06 · 322 阅读 · 0 评论 -
javascript之事件委托(事件代理)
JavaScript高级程序设计上讲:事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。也就是:利用冒泡的原理,把事件加到父级上,触发执行效果。事件委托的原理:事件委托是利用事件的冒泡原理来实现的,何为事件冒泡呢?就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一个节点树,div>ul>li>a;比如给最里面的a加一个c...原创 2017-05-13 23:34:11 · 568 阅读 · 0 评论 -
javascript中typeof和instanceof 的用法区别
typeof操作符《javascript高级程序设计》第3版中这样给typeo定义。鉴于ECMAScript是松散类型的,因此需要有一种手段来检测给定变量的数据类型——typeof 就是负责提供这方面信息的操作符。对一个值使用typeof操作符可能会返回以下结果:number,boolean,string,object,undefined,functionalert(typeof(1));//num原创 2017-05-14 13:28:30 · 448 阅读 · 0 评论 -
原生javascript实现ajax异步请求
<script type="text/javascript"> //格式化post参数,此为post请求操作时使用,get无需使用 function formatParams(jsonData) { var arr = []; for (var name in jsonData) {原创 2017-05-15 23:32:36 · 762 阅读 · 0 评论 -
ECMAScript 6 十大特性
转自:http://www.oschina.net/news/71566/es6-developers-will-have-to-know 感谢分享!!!ES6(ECMAScript2015)的出现,无疑给前端开发人员带来了新的惊喜,它包含了一些很棒的新特性,可以更加方便的实现很多复杂的操作,提高开发人员的效率。本文主要针对ES6做一个简要介绍。 主要译自:《Top 10 ES6 Features转载 2017-05-29 20:19:06 · 2598 阅读 · 2 评论 -
javascript中数据类型值的存储方式和位置
JavaScript有两种类型的值,内存图如下:栈:原始数据类型(Undefined,Null,Boolean,Number、String)堆:引用数据类型(对象、数组和函数)区别:两种类型的区别是:存储位置不同;原始数据类型原始数据类型直接存储在栈(stack)中的简单数据段,占据空间小、大小固定,属于被频繁使用数据,所以放入栈中存储;引用数据类型引用数据类型存储在堆(heap)中的对象,占据空原创 2017-06-01 19:35:38 · 2116 阅读 · 0 评论 -
thinkphp5中如何通过url传参
window.location.href=”{:url(‘Index/index’)}>”+”/ID/”+ID; //这样可以生成,但url模式改变则不能用window.location.href=”{:url(‘Index/index’,’ID=” + ID+ “’)}” //解析不成功。window.location.href=”{:url(‘Index/detail’,[‘id’ => “+i原创 2017-03-17 09:54:44 · 18003 阅读 · 5 评论 -
为什么要用PolyFill(JS中的修补匠)
var users = [{name:”zhangsan”,age:18},{name:”jack”,age:20}]; 这是一个对象数组。如果我们要查询名字为”jack”用户的年龄、常用的办法是什么? 很多同学会想到遍历这个数组。我们来看看新的语法:var getUser = users.find(function(finder){ return finder.name = “j转载 2017-07-09 21:28:46 · 1494 阅读 · 0 评论 -
javascript中this对象的指向问题
1. 不像C#,this一定是指向当前对象。js的this指向是不确定的,也就是说是可以动态改变的。call/apply 就是用于改变this指向的函数,这样设计可以让代码更加灵活,复用性更高。2. this 一般情况下,都是指向函数的拥有者。这一点很重要!这一点很重要!这一点很重要! 这也是一道常见的面试题,如下代码:var myObject = { foo: "bar",原创 2017-04-24 16:56:02 · 1050 阅读 · 0 评论 -
javascript对象及内置对象属性和方法
JS中,可以将对象分为“内建对象”、“宿主对象”和“自定义对象”三种。1.内建对象js中的内部对象包括Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、String以及各种错误类对象,包括Error、EvalError、RangeError、ReferenceError、SyntaxError和TypeError。其中...原创 2017-04-23 17:18:58 · 1334 阅读 · 0 评论 -
javascript中void();执行返回SyntaxError
void是一元运算符,它出现在操作数之前,操作数可以是任意类型,操作数会照常计算,但忽略计算结果并返回undefined。由于void会忽略操作数的值,因此在操作数具有副作用的时候使用void来让程序更具语义console.log(void 0); // undefinedconsole.log(void(0)); // undefined常见的作用:1.替代undefined由于undefine原创 2017-04-16 14:16:26 · 554 阅读 · 0 评论 -
Ajax工作原理深入理解
1. 概念ajax 的全称是AsynchronousJavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式。2. 理解同步异步异步传输是面向字符的传输,它的单位是字符;而同步传输是面向比特的传输,它的单位是桢,它传输的时候要求接受方和发送方的时钟是保持一致的。 举个例子来说同步和异步,同步就好像我们买楼一次性支付,而异步就是转载 2017-04-26 11:11:58 · 542 阅读 · 0 评论 -
Javascript中布尔类型转换及返回false的参数
布尔类型里只有这几参数个返回false,其它都为trueBoolean(undefined) // falseBoolean(null) // false Boolean(0) // false Boolean(NaN) // false Boolean('') // false原创 2017-04-24 17:24:58 · 3756 阅读 · 0 评论 -
深入JavaScript学习底层内容
最近有种感觉,愈发强烈!随着代码量的积累叠加,接触到的前端新的东西越来越多,但是还是偶尔心存一种未知的不安定感或者危机感,这种感觉来自于对JavaScript未知部分的恐惧,来自于对解决问题却难以理解问题本身出现原因的尴尬。掌握再多的框架,也只不过是熟悉了一堆的API,解决问题不在话下,对未知问题还是心存顾虑。 我知道,是时候深入学习JavaScript了……原创 2017-12-08 17:04:06 · 1661 阅读 · 7 评论