自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

'Ablaze 的专栏

莫看江面平如镜 要看海底万丈深

  • 博客(271)
  • 论坛 (1)
  • 收藏
  • 关注

原创 【JavaScript】如何模拟一个flat

首先了解下flat的概念 Array.prototype.flat() - JavaScript | MDN将数组元素展开一层1、concat + 扩展运算符const arr = [1, 2, 4, [1, 2, [1, 3, [1, 2, 3]]], 5];// 扩展运算符 + concat[].concat(...arr)// [1, 2, 4, 1, 2, [1, 3, [1, 2, 3]]], 5];2、concat + applyconst arr = [1, 2, 4, [1

2021-03-19 00:08:03 42

原创 【JavaScript】如何模拟一个instanceof

首先看一下instanceof的用法。a instanceof B 判断的是,a是否为B的实例,即a的原型链上是否存在B的构造函数。function Person(name) { this.name = name}const p = new Person('mike')p instanceof Person // true这里的 p 是 Person 构造出来的实例对象。p.__proto__ === Person.prototype // true同时,顺着 p 的原型链也能找到

2021-03-18 11:44:43 42

原创 【算法】深度优先遍历

深度优先遍历不需要记住所有节点,占用空间小;但有回溯的操作,时间会长一点。第一题 打印出所有的name值const data = [ { name: 'a', children: [ { name: 'b', children: [{ name: 'e' }] }, { name: 'c', children: [{ name: 'f' }] }, { name: 'd', children:

2021-03-18 11:11:28 30

原创 【JavaScript】this指向的问题

this指向不是在创建时指定的,而是由最后调用它的对象决定的。全局对象的this在非严格模式下,this指向window;在严格模式下,this指向undefined。1)简单版function f1 () { console.log(this)}function f2 () { 'use strict' console.log(this)}f1() // windowf2() // undefined2)赋值版const foo = { bar: 10, fn: fun

2021-03-18 10:18:23 27 1

原创 【Node】Buffer 与 Stream

node 为什么会出现 Buffer 这个模块在最初的时候,JavaScript 只运行在浏览器端,对于处理 Unicode 编码的字符串很容易,但是对于处理二进制以及非 Unicode 编码的数据便无能为力。不过对于 Server 端操作来说 网络I/O 以及 文件I/O 的处理是必须的,所以 Node 中便提供了 Buffer 类处理二进制的数据。二进制缓冲区 Buffer一个 Buffer 类似于一个整数数组,可以取下标,有length属性,有剪切复制操作等,很多API也类似数组,但Buff

2021-03-15 19:00:34 10

原创 【微信小程序】自定义radio的默认样式和图标

注意:components使用radio原生组件修改样式无效代码片段:/*radio未选中时样式 */radio .wx-radio-input{ width: 44rpx; height: 44rpx; border: 2rpx solid #969696; box-sizing: border-box; margin-right: 18rpx;} /* 选中后的 背景样式 (红色背景 无边框 可根据UI需求自己修改) */radio .wx-radio-input.w

2021-03-14 10:41:46 51 1

原创 【微信小程序】如何加空格?

排除:直接加&nbsp;是没有效果的。直接按空格键是没有效果的。解决:给文字加上 decode="{{true}}" 属性之后再用&nbsp;<text decode="{{true}}">医院&nbsp;&nbsp;</text><text>科室</text>...

2021-03-14 10:28:51 17

原创 【前端安全】浅谈XSS攻击和防范

定义XSS是跨站脚本攻击(Cross Site Scripting),为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS。恶意攻击者往Web页面里插入恶意Script代码,当用户浏览该页之时,嵌入其中Web里面的Script代码会被执行,从而达到恶意攻击用户的目的。分类 大分类 小分类 原理 非存储 DOM型

2021-03-14 10:15:50 29

原创 【CSS】flex布局 - 左边超过打点, 右边完整展示

场景:宽度一定的情况下右边自适应,左边被挤压。需要的效果如下:flex 的三个参数分别对应:flex-grow、flex-shrink、flex-basis。flex-grow:定义项目的放大比例,默认为0。即如果存在剩余空间,也不放大。flex-shrink:定义项目的缩小比例,默认为1。即如果空间不足,该项目将缩小。flex-basis:定义在分配多余空间之前,项目占据的主轴空间。简单说,左边的设置flex: 0 1 auto; 右边的设置flex: 0 0 auto;直接上Demo

2021-03-14 09:57:28 37

原创 【JavaScript】版本号和日期时间的比较

JS使用 ‘>’ 运算符比较两个字符串大小时,会把字符串转换为ASCII码依次比较。比较标准时间格式可以直接使用 ’ > ’ 比较; (2018-07-20格式)

2021-03-14 09:27:17 21

原创 【JavaScript】forEach中的坑

1. forEach不支持break在使用for循环时可以使用break跳出循环,比如我希望找到数组中符合条件的第一个元素就跳出循环,这对于优化数组遍历是非常棒的。很遗憾,forEach并不支持break操作,使用break会导致报错。let arr = [1, 2, 3, 4], i = 0, length = arr.length; for (; i < length; i++) { console.log(arr[i]); //1,2 if (arr[i]

2021-03-14 09:24:56 45

原创 btoa和atob

从IE10浏览器开始,所有浏览器就原生提供了Base64编码解码方法:btoa (Binary to ASCII):base64编码atob (ASCII to Binary):base64解码const str = 'Hello World';const enc = window.btoa(str); // SGVsbG8gV29ybGQ=const dec = window.atob(enc); // Hello World当然还有一些PC项目需要兼容IE8、IE9,这时候我们可以在s

2021-03-14 09:19:33 38

原创 【微信小程序】wx.uploadFile不支持上传GIF动图

虽然 wx.chooseImage 选择图片时可以选择 .gif 格式的图片,但是当调用 wx.uploadFile 将其进行上传时,发现返回errorCode 200,对应的报错信息是 \u6587\u4ef6\u8def\u5f84\u4e0d\u80fd\u4e3a\u7a7a。将其转换为中文后为 “文件路径不能为空”。暂时没有想到什么办法可以解决…...

2020-05-22 16:29:56 265

原创 【微信小程序】底部操作菜单与拍照录像

这篇文章要解决三个问题:底部操作菜单自定义按钮“点按拍照,长按拍摄”调用朋友圈的API实现“点按拍照,长按拍摄”第一部分当点击“上传资料”按钮的时候,要从底部弹出操作菜单栏。<button type="primary" bindtap="openActionsheet">上传资料</button>Page({ data: {}, onLoad: function (options) {}, openActionsheet: function () {

2020-05-20 16:59:45 171

原创 【微信小程序】选择图片并上传时出现两个loading ?!

遇到这样一个业务场景,在小程序中 wx.chooseImage 选择图片后,调用 wx.uploadFile 上传图片到公司的一个数据库中,然后拿到对应的返回值后,再去请求一个接口,将所有图片一一进行绑定,等所有图片上传完毕后,最后请求一个接口进行总结汇报。我们希望的是当选择图片完成后,有一个loading加载中的效果,然后等所有图片上传完毕并一一绑定,且最后一个总结汇报的接口也请求完毕后,再隐藏loading弹窗,展示“上传完毕”。听起来很简单的一个事情,但是我却踩坑了。先看下大体的代码结

2020-05-20 15:35:12 385

原创 WebRTC(三)用屏幕分享录制一段视频

前一章节了解了屏幕分享的API,感觉跟我们常用的“屏幕共享”好像。那么可不可以用此进行一个屏幕录制呢?“纸上得来终觉浅,觉知此事要躬行。”看着挺简单的一个东西,没有落实都算说大话。首先画上三个按钮:<button @click="start" :disabled="disabled.start">开始录制</button><button @click="stop" :disabled="disabled.stop">结束录制</button>&lt

2020-05-18 18:23:23 512

原创 WebRTC(二)获取用户的媒体流

MediaStream 接口用于表示媒体数据流。(流可以是输入或输出,也可以是本地或远程)单个 MediaStream 可以包含零个或多个轨道。(每个轨道都有一个对应的 MediaStreamTrack 对象)MediaStreamTrack 表示包含一个或多个通道的内容,其中,通道之间具有定义的已知的关系。MediaStream 中的所有轨道在渲染时是同步的。下图显示了由单个视频轨道和两个不同的音频(左声道和右声道)轨道组成的 MediaStream。平时我们在开发时总是习惯性地定义 {v

2020-05-17 21:46:18 386

原创 WebRTC(一)从了解三个方面的API开始

WebRTC简介WebRTC是一个由Google发起的实时通信解决方案,其中包含音视频采集、编解码、数据传输、音视频展示等功能。虽然其名为WebRTC,但是实际上它不仅支持Web之间的音视频通讯,还支持Android和iOS端。底层技术图像引擎(VideoEngine)VP8编解码jitter buffer:动态抖动缓冲Image enhancements:图像增益声音引擎(VoiceEngine)iSAC/iLBC/Opus等编解码NetEQ语音信号处理回声消除和降噪会话管理

2020-05-17 17:41:10 403

原创 从传统媒体到p2p的流媒体

传统媒体在刚开始的时候,我们要看一段音视频,就要从网上下载完整个文件后才能观看。如果音视频文件大些的,那实在太痛苦了,可能得电脑挂机好多个小时(有时一下午甚至一天)才能下载完成。而在漫长的下载等待期间呢,我们一般去做一些不需要网速的事情,以让这个音视频文件尽可能早的下载完毕。流式媒体随着多媒体技术的发展,视频的分辨率越来越高,人们也越来越喜欢看高清、超高清的视频。传统媒体已然无法满足人们的日常需求,视频高清跟下载时长的矛盾愈来愈明显,人们越来越无法忍受了。于是,流式媒体技术应运而生。我们可以

2020-05-17 16:42:25 85

原创 无编译/无服务器,实现浏览器的CommonJS模块化

前些天写一个demo,需要用到require去引一个node包,但是又不想将其混进公司的整个node工程中去,因为想着越简单越好。同时,webpack能不用也不用了吧,不然又得初始化个webpack工程。在我折腾了半天后,发现一个利器 —— one-click.js。我们知道,如果希望CommonJS的模块化代码能在浏览器中正常运行,通常都会需要构建/打包工具,如webpack、rollup等。而one-click.js是一个可以让你在不需要这些构件工具的同时,也可以在浏览器中正常运行基于Com

2020-05-17 11:05:58 51

原创 流媒体的基本介绍

文章目录流媒体是什么?音视频组成编码格式音频编码格式视频编码格式存储封装格式视频码率、帧率码率帧率流媒体的传输方式顺序流式传输实时流式传输流媒体的传输协议HLSHLS 点播HLS 直播HTTP-FLVRTMPMPEG-DASHRTSP+RTP流媒体是什么?流媒体就是指采用流式传输技术在网络上连续实时播放的媒体格式,如音频、视频或多媒体文件。音视频就是流媒体的核心。音视频组成一个完整的视频文件,包括音频、视频和基础元信息。我们常见的视频文件如mp4、mov、flv、avi、rmvb等视频文件,就是

2020-05-17 10:42:03 90

转载 网络心跳包机制

为什么需要心跳机制?考虑以下两种典型的即时通讯网络层问题模型:1)情形一:一个客户端连接服务器以后,如果长期没有和服务器有数据来往,则可能会被防火墙程序关闭连接。但有时候我们并不想被关闭连接。例如,对于一个即时通讯软件来说,如果服务器没有消息时,我们确实不会和服务器有任何数据交换,但是,如果连接被关闭了,有新消息传来时,我们再也没法收到了,这就违背了“即时通讯”的设计要求。解决:当服务器与客户端一定时间内没有有效业务数据来往时,我们只需要给对端发送心跳包即可实现保活。2)情形二:通常情况下

2020-05-17 10:14:18 170

原创 npm ERR! Failed at the node-sass@4.13.1 postinstall script.

今天安装脚手架工具时遇到这样一个报错信息:npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! node-sass@4.13.1 postinstall: `node scripts/build.js`npm ERR! Exit status 1npm ERR!npm ERR! Failed at the node-sass@4.13.1 p...

2020-04-01 14:46:12 1788

原创 ?= 正向零宽断言

场景要匹配微信版本号,前人写了这样一段代码:const reg = /^\d(?=.\d.\d$)/;在微信7.0.10版本之前的所有版本中均没有问题,但7.0.10版本报错了。为什么呢?因为(?=exp)是正向零宽断言,它断言自身出现的位置的后面能匹配表达式exp。这样的话,上述正则需要匹配的就是 x.x.x,7.0.10属于x.x.xx,所以就无法匹配了。...

2020-01-07 18:04:21 63

原创 setDate() 解决跨月问题

起因我要做一个可选择“今天”、“明天”、“后天”的时间控件供用户选择,并发送选定后的日期给服务端。刚开始我是获取当前日期进行 +0、+1、+2 操作的,怪我想的太简单,跨月跨年之后很快暴露问题!那么我要如何解决这个问题呢?算平年 or 闰年?算这个月有多少天?算下个月有多少天?(看起来好复杂啊,我太懒…)setDate还好此时看到前人一段代码中的 setDate(0),Ok 一起来学习...

2020-01-07 12:23:30 421

原创 autocomplete="off" 阻止浏览器默认缓存input的值

只有火狐刷新后值没有自动更新火狐浏览器比较特殊,它默认会缓存input框的值,导致input的value值是最新的,但是显示给用户的却是之前的值,command+R刷新多次还是一样,只有command+shift+R强制刷新才可以。我们不能期望用户自己去尝试强制刷新,所以需要给 input加一个属性autocomplete="off",作用是阻止浏览器默认的input缓存。autoco...

2020-01-07 11:26:47 153

原创 【阅读Vue源码】createElement

源码来自于 https://github.com/vuejs/vuecreateElementsrc/core/vdom/create-elemenet.jsconst SIMPLE_NORMALIZE = 1const ALWAYS_NORMALIZE = 2 // wrapper function for providing a more flexible interface//...

2020-01-06 23:54:21 73

原创 【JavaScript】JS的NodeList对象

NodeList与HTML CollectiongetElementsByClassName()和getElementsByTagName()都返回NodeList对象,而类似document.images和document.forms的属性为HTML Collection对象。NodeList和HTML Collection对象不是历史文档状态的一个静态快照,而通常是实时的。也许你会问,...

2019-08-05 16:09:48 1425

原创 理清Hogan与Mustache模板引擎

Hogan与MustacheHogan与Mustache的关系就像V8与Node的关系一样。安装Hogannpm install hogan.js --save-devHogan用法// 引入hoganconst hogan = require('hogan.js'); // 渲染所需模板const tmpl = 引入模板文件 // 渲染所需数据let renderDat...

2019-08-05 14:33:48 109

原创 【JavaScript】JS的调用栈和堆

在JS代码的执行过程中会分配两个内存区域——调用栈和堆。第一个性能非常高,因此用于连续执行所提供的函数。每个函数调用在调用栈中创建一个所谓的“框架”,其中包含其局部变量的副本和this。你可以通过Chrome调试器查看它,就像在其他与堆栈类似的数据结构中一样,调用栈的栈被推送或弹出堆栈,具体取决于正在执行或终止的新函数。你可能见过调用栈上限溢出错误,通常是由于某种形式的无限循环导致的。谈到...

2019-08-05 11:55:11 144

原创 【JavaScript】this和event.target的异同

event.target每次触发DOM事件时会产生一个事件对象(也称event对象),而事件对象也有很多属性和方法,其中target属性是获取触发事件对象的目标,也就是绑定事件的元素,event.target表示该DOM元素,然后在获取其相应的属性值。this和event.target的区别:js中事件是会冒泡的 ,所以this是可以变化的,但是event.target不会变化,它永...

2019-08-05 11:45:51 98

原创 【NodeJS】node不认识正则

是因为node V8.4.0不认识正则,更换为node V8.16.0即可。不认识正则的报错信息:

2019-08-05 10:12:51 94

原创 【JavaScript】JS变量生命周期:为什么let没有被提升

理解背后原理:变量生命周期声明阶段 是在作用域中注册一个变量初始化阶段 是分配内存并为作用域中的变量创建绑定,在此步骤中,变量将使用undefined自动初始化赋值阶段 是为初始化的变量赋值变量在通过声明阶段时是 尚未初始化 状态,但未达到初始化状态。let变量的处理方式与var不同,主要区别在于声明和初始化阶段是分开的。变量未初始化时,变量位于暂时死区。当解释器执行到语句let...

2019-08-05 09:59:41 168

原创 【浏览器/虚拟机/服务器】浏览器对象键值对输出顺序

背景后台直接给前端一个对象让循环遍历出来,但遍历顺序与预期不一致。解决让后台直接返回一个数组进行遍历才能保证顺序与预期一致。原理浏览器控制台会重新按ASCII排序键值对,但这并不是对象的键值对没有顺序,对象依旧保持原本的顺序,只是浏览器控制台在显示时做了修改。JS对象是个哈希表,哈希表存储数据是有顺序的,所以不要觉得浏览器控制台优化输出就觉得顺序不重要,键名出现的顺序就是对象的顺序,f...

2019-08-05 09:52:19 177

原创 【前端安全】cookie和token都存放在header中,为什么不会劫持token?

token不是为了防止XSS的,而是为了防止CSRF的;CSRF攻击的原因是浏览器会自动带上cookie,而不会带上token;以CSRF攻击为例:cookie:用户点击了链接,cookie未失效,导致发起请求后后端以为是用户正常操作,于是进行扣款操作;token:用户点击链接,由于浏览器不会自动带上token,所以即使发了请求,后端的token验证不会通过,所以不会进行扣款操作;...

2019-08-05 09:41:15 9042 2

转载 【JavaScript】深拷贝与浅拷贝

如何区分深拷贝与浅拷贝?假设B复制了A,当修改A时,如果B也跟着改了,这就是浅拷贝,否则就是深拷贝。堆内存与栈内存堆是堆内存的简称,栈是栈内存的简称。堆是动态分配内存,内存大小不一,也不会自动释放。栈是自动分配相对固定大小的内存空间,并由系统自由释放。JS的基本数据类型(Undefined、Null、Boolean、String、Number、Symbol)键名存储在栈内存中,例如l...

2019-07-17 14:51:53 49

原创 AttributeError: module 'tensorboard.util' has no attribute 'PersistentOpEvaluator'

首先贴下出的问题以及解决到正确的整幅图:最后检验刚开始是通过 Anaconda Navigator 的 Environment 配置 tensorflow 和 tensorboard重复多次也未能解决题目中的问题,后通过 Anaconda Prompt 命令行多次卸载安装 tensorflow 后解决...

2019-03-12 19:43:44 3036

转载 警告:Your CPU supports instructions that this TensorFlow binary was not compiled to use: AVX2 FMA

转载自:警告:Your CPU supports instructions that this TensorFlow binary was not compiled to use: AVX2 FMA问题:安装TensorFlow(CPU版本),使用pip install tensorflow安装,安装一切顺利,但是在跑一个简单的程序时,遇到如下情况:大概意思是:你的CPU支持AVX扩展,...

2019-03-12 13:43:44 98

原创 【NodeJS】TCP客户端与服务端

server.jsvar net = require('net'); // 加载网络模块var clients = 0; // 创建ID来引用连接的每一个客户端var server = net.createServer(function(client) { clients++; var clientId = clients; // 当客户端连接时,ID自增,...

2018-11-10 17:24:04 642

转载 【JavaScript】从promise、process.nextTick、setTimeout出发,谈谈Event Loop中的Job queue

转载自:从promise、process.nextTick、setTimeout出发,谈谈Event Loop中的Job queue简要介绍:谈谈promise.resove,setTimeout,setImmediate,process.nextTick在EvenLoop队列中的执行顺序1. 问题的引出event loop都不陌生,是指主线程从“任务队列”中循环读取任务,比如...

2018-09-04 10:43:47 263

空空如也

abloume的留言板

发表于 2020-01-02 最后回复 2020-01-02

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人 TA的粉丝

提示
确定要删除当前文章?
取消 删除