- 博客(275)
- 收藏
- 关注
RSS订阅原创 【微信小程序】两大线程与微信WXS
渲染界面的技术纯客户端原生渲染缺点：无法动态打包，动态下发。纯Web技术来渲染缺点：在一些复杂交互的页面上可能会面临一些性能问题。同时，在Web技术中，UI渲染跟JavaScript脚本执行都是在一个单线程中执行，容易导致抢占资源。客户端原生 + Web界面主要由成熟的Web技术来渲染，辅之以大量的接口提供丰富的客户端原生能力。同时，每个小程序页面都是用不同的WebView来渲染，更贴近原生体验，避免单个WebView任务过于繁重。脚本执行的环境由于JavaScript的灵活性和浏览器的
2022-01-09 15:39:23
1226
原创 【微信小程序】页面间通信
早期先来看早期（2017年）的一篇解决方案：微信小程序跨页面通信解决思路这里总结出两种方案：方案一：获取Page实例，然后setData更新数据的，跟业务的耦合性比较大。方案二：使用发布订阅模式，但这种多了以后，同样不容易进行后期的维护。现状基础库2.7.3（2019年）开始支持页面间通信。如果一个页面由另一个页面通过 wx.navigateTo 打开，这两个页面间将建立一条数据通道：被打开的页面可以通过 this.getOpenerEventChannel() 方法来获得一个 Event
2022-01-09 13:22:02
1195
原创 【微信小程序】检测版本是否更新
关于销毁当用户点击了右上角的胶囊按钮关闭小程序，或者滑动屏幕返回手机主页面（离开微信），这时候小程序并没有直接销毁，而是进入了后台。当再次进入微信或者再次打开小程序，又会从后台进入前台。只有当小程序进入后台一定时间（也就是时间过长），或者系统资源占用过高，才会被真正的销毁。冷启动 & 热启动冷启动：小程序首次打开或者销毁后再次被打开。热启动：是指从后台切换到前台，或者小程序在后台运行，重新打开小程序。下载更新小程序冷启动时如果发现有新版本，将会异步下载新版本的代码包，如果需要马上应用
2022-01-09 12:54:57
1437
原创 【前端安全】web缓存投毒
核心概念缓存web缓存位于用户和应用程序服务器之间，用于保存和提供某些响应的副本。在下图中，我们可以看到三个用户一个接一个地获取相同的资源：缓存技术旨在通过减少延迟来提升页面加载速度，还可以减少应用程序服务器上的负载，同时达到防止Dos攻击的目的。缓存键缓存的概念可能听起来简单明了，但它隐藏了一些风险的假设。每当缓存服务收到对资源的请求时，它需要确定：是否已保存此指定资源的副本是否可以使用该副本进行响应是否需转发给应用程序服务器确定两个请求是否正在尝试加载相同的资源可能是很棘手的问
2022-01-09 11:48:07
2988
原创 git clone 仓库没有响应
解决方法：GitHub镜像域名法将 github.com 替换为 github.com.cnpmjs.org。如：git clone https://github.com/Abloume/ShowdownDemo.git替换为：git clone https://github.com.cnpmjs.org/Abloume/ShowdownDemo.git
2021-08-17 10:18:13
2399
原创 【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
333
原创 【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
353
原创 【算法】深度优先遍历
深度优先遍历不需要记住所有节点，占用空间小；但有回溯的操作，时间会长一点。第一题 打印出所有的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
215
原创 【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
201
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
634
原创 【微信小程序】自定义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
1446
1
原创 【微信小程序】如何加空格？
排除：直接加 是没有效果的。直接按空格键是没有效果的。解决：给文字加上 decode="{{true}}" 属性之后再用 <text decode="{{true}}">医院 </text><text>科室</text>...
2021-03-14 10:28:51
857
原创 【前端安全】浅谈XSS攻击和防范
定义XSS是跨站脚本攻击(Cross Site Scripting)，为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆，故将跨站脚本攻击缩写为XSS。恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页之时，嵌入其中Web里面的Script代码会被执行，从而达到恶意攻击用户的目的。分类 大分类 小分类 原理 非存储 DOM型
2021-03-14 10:15:50
264
原创 【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
954
原创 【JavaScript】版本号和日期时间的比较
JS使用 ‘>’ 运算符比较两个字符串大小时，会把字符串转换为ASCII码依次比较。比较标准时间格式可以直接使用 ’ > ’ 比较； (2018-07-20格式)
2021-03-14 09:27:17
250
原创 【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
526
原创 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
1236
1
原创 【微信小程序】wx.uploadFile不支持上传GIF动图
虽然 wx.chooseImage 选择图片时可以选择 .gif 格式的图片，但是当调用 wx.uploadFile 将其进行上传时，发现返回errorCode 200，对应的报错信息是 \u6587\u4ef6\u8def\u5f84\u4e0d\u80fd\u4e3a\u7a7a。将其转换为中文后为 “文件路径不能为空”。暂时没有想到什么办法可以解决…...
2020-05-22 16:29:56
782
原创 【微信小程序】底部操作菜单与拍照录像
这篇文章要解决三个问题：底部操作菜单自定义按钮“点按拍照，长按拍摄”调用朋友圈的API实现“点按拍照，长按拍摄”第一部分当点击“上传资料”按钮的时候，要从底部弹出操作菜单栏。<button type="primary" bindtap="openActionsheet">上传资料</button>Page({ data: {}, onLoad: function (options) {}, openActionsheet: function () {
2020-05-20 16:59:45
512
原创 【微信小程序】选择图片并上传时出现两个loading ?!
遇到这样一个业务场景，在小程序中 wx.chooseImage 选择图片后，调用 wx.uploadFile 上传图片到公司的一个数据库中，然后拿到对应的返回值后，再去请求一个接口，将所有图片一一进行绑定，等所有图片上传完毕后，最后请求一个接口进行总结汇报。我们希望的是当选择图片完成后，有一个loading加载中的效果，然后等所有图片上传完毕并一一绑定，且最后一个总结汇报的接口也请求完毕后，再隐藏loading弹窗，展示“上传完毕”。听起来很简单的一个事情，但是我却踩坑了。先看下大体的代码结
2020-05-20 15:35:12
1239
原创 WebRTC（三）用屏幕分享录制一段视频
前一章节了解了屏幕分享的API，感觉跟我们常用的“屏幕共享”好像。那么可不可以用此进行一个屏幕录制呢？“纸上得来终觉浅，觉知此事要躬行。”看着挺简单的一个东西，没有落实都算说大话。首先画上三个按钮：<button @click="start" :disabled="disabled.start">开始录制</button><button @click="stop" :disabled="disabled.stop">结束录制</button><
2020-05-18 18:23:23
1461
原创 WebRTC（二）获取用户的媒体流
MediaStream 接口用于表示媒体数据流。（流可以是输入或输出，也可以是本地或远程）单个 MediaStream 可以包含零个或多个轨道。（每个轨道都有一个对应的 MediaStreamTrack 对象）MediaStreamTrack 表示包含一个或多个通道的内容，其中，通道之间具有定义的已知的关系。MediaStream 中的所有轨道在渲染时是同步的。下图显示了由单个视频轨道和两个不同的音频（左声道和右声道）轨道组成的 MediaStream。平时我们在开发时总是习惯性地定义 {v
2020-05-17 21:46:18
1223
原创 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
1206
原创 从传统媒体到p2p的流媒体
传统媒体在刚开始的时候，我们要看一段音视频，就要从网上下载完整个文件后才能观看。如果音视频文件大些的，那实在太痛苦了，可能得电脑挂机好多个小时（有时一下午甚至一天）才能下载完成。而在漫长的下载等待期间呢，我们一般去做一些不需要网速的事情，以让这个音视频文件尽可能早的下载完毕。流式媒体随着多媒体技术的发展，视频的分辨率越来越高，人们也越来越喜欢看高清、超高清的视频。传统媒体已然无法满足人们的日常需求，视频高清跟下载时长的矛盾愈来愈明显，人们越来越无法忍受了。于是，流式媒体技术应运而生。我们可以
2020-05-17 16:42:25
218
原创 无编译/无服务器，实现浏览器的CommonJS模块化
前些天写一个demo，需要用到require去引一个node包，但是又不想将其混进公司的整个node工程中去，因为想着越简单越好。同时，webpack能不用也不用了吧，不然又得初始化个webpack工程。在我折腾了半天后，发现一个利器 —— one-click.js。我们知道，如果希望CommonJS的模块化代码能在浏览器中正常运行，通常都会需要构建/打包工具，如webpack、rollup等。而one-click.js是一个可以让你在不需要这些构件工具的同时，也可以在浏览器中正常运行基于Com
2020-05-17 11:05:58
148
原创 流媒体的基本介绍
文章目录流媒体是什么？音视频组成编码格式音频编码格式视频编码格式存储封装格式视频码率、帧率码率帧率流媒体的传输方式顺序流式传输实时流式传输流媒体的传输协议HLSHLS 点播HLS 直播HTTP-FLVRTMPMPEG-DASHRTSP+RTP流媒体是什么？流媒体就是指采用流式传输技术在网络上连续实时播放的媒体格式，如音频、视频或多媒体文件。音视频就是流媒体的核心。音视频组成一个完整的视频文件，包括音频、视频和基础元信息。我们常见的视频文件如mp4、mov、flv、avi、rmvb等视频文件，就是
2020-05-17 10:42:03
1697
转载 网络心跳包机制
为什么需要心跳机制？考虑以下两种典型的即时通讯网络层问题模型：1）情形一：一个客户端连接服务器以后，如果长期没有和服务器有数据来往，则可能会被防火墙程序关闭连接。但有时候我们并不想被关闭连接。例如，对于一个即时通讯软件来说，如果服务器没有消息时，我们确实不会和服务器有任何数据交换，但是，如果连接被关闭了，有新消息传来时，我们再也没法收到了，这就违背了“即时通讯”的设计要求。解决：当服务器与客户端一定时间内没有有效业务数据来往时，我们只需要给对端发送心跳包即可实现保活。2）情形二：通常情况下
2020-05-17 10:14:18
1105
原创 npm ERR! Failed at the [email protected] postinstall script.
今天安装脚手架工具时遇到这样一个报错信息：npm ERR! code ELIFECYCLEnpm ERR! errno 1npm ERR! [email protected] postinstall: `node scripts/build.js`npm ERR! Exit status 1npm ERR!npm ERR! Failed at the [email protected] p...
2020-04-01 14:46:12
3702
原创 ?= 正向零宽断言
场景要匹配微信版本号，前人写了这样一段代码：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
187
原创 setDate() 解决跨月问题
起因我要做一个可选择“今天”、“明天”、“后天”的时间控件供用户选择，并发送选定后的日期给服务端。刚开始我是获取当前日期进行 +0、+1、+2 操作的，怪我想的太简单，跨月跨年之后很快暴露问题！那么我要如何解决这个问题呢？算平年 or 闰年？算这个月有多少天？算下个月有多少天？（看起来好复杂啊，我太懒…）setDate还好此时看到前人一段代码中的 setDate(0)，Ok 一起来学习...
2020-01-07 12:23:30
1629
原创 autocomplete="off" 阻止浏览器默认缓存input的值
只有火狐刷新后值没有自动更新火狐浏览器比较特殊，它默认会缓存input框的值，导致input的value值是最新的，但是显示给用户的却是之前的值，command+R刷新多次还是一样，只有command+shift+R强制刷新才可以。我们不能期望用户自己去尝试强制刷新，所以需要给 input加一个属性autocomplete="off"，作用是阻止浏览器默认的input缓存。autoco...
2020-01-07 11:26:47
1092
原创 【阅读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
156
原创 【JavaScript】JS的NodeList对象
NodeList与HTML CollectiongetElementsByClassName()和getElementsByTagName()都返回NodeList对象，而类似document.images和document.forms的属性为HTML Collection对象。NodeList和HTML Collection对象不是历史文档状态的一个静态快照，而通常是实时的。也许你会问，...
2019-08-05 16:09:48
4416
原创 理清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
219
原创 【JavaScript】JS的调用栈和堆
在JS代码的执行过程中会分配两个内存区域——调用栈和堆。第一个性能非常高，因此用于连续执行所提供的函数。每个函数调用在调用栈中创建一个所谓的“框架”，其中包含其局部变量的副本和this。你可以通过Chrome调试器查看它，就像在其他与堆栈类似的数据结构中一样，调用栈的栈被推送或弹出堆栈，具体取决于正在执行或终止的新函数。你可能见过调用栈上限溢出错误，通常是由于某种形式的无限循环导致的。谈到...
2019-08-05 11:55:11
327
原创 【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
278
原创 【JavaScript】JS变量生命周期：为什么let没有被提升
理解背后原理：变量生命周期声明阶段 是在作用域中注册一个变量初始化阶段 是分配内存并为作用域中的变量创建绑定，在此步骤中，变量将使用undefined自动初始化赋值阶段 是为初始化的变量赋值变量在通过声明阶段时是 尚未初始化 状态，但未达到初始化状态。let变量的处理方式与var不同，主要区别在于声明和初始化阶段是分开的。变量未初始化时，变量位于暂时死区。当解释器执行到语句let...
2019-08-05 09:59:41
331
原创 【浏览器/虚拟机/服务器】浏览器对象键值对输出顺序
背景后台直接给前端一个对象让循环遍历出来，但遍历顺序与预期不一致。解决让后台直接返回一个数组进行遍历才能保证顺序与预期一致。原理浏览器控制台会重新按ASCII排序键值对，但这并不是对象的键值对没有顺序，对象依旧保持原本的顺序，只是浏览器控制台在显示时做了修改。JS对象是个哈希表，哈希表存储数据是有顺序的，所以不要觉得浏览器控制台优化输出就觉得顺序不重要，键名出现的顺序就是对象的顺序，f...
2019-08-05 09:52:19
454
原创 【前端安全】cookie和token都存放在header中，为什么不会劫持token？
token不是为了防止XSS的，而是为了防止CSRF的；CSRF攻击的原因是浏览器会自动带上cookie，而不会带上token；以CSRF攻击为例：cookie：用户点击了链接，cookie未失效，导致发起请求后后端以为是用户正常操作，于是进行扣款操作；token：用户点击链接，由于浏览器不会自动带上token，所以即使发了请求，后端的token验证不会通过，所以不会进行扣款操作；...
2019-08-05 09:41:15
13175
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人