'Ablaze 的专栏

渲染界面的技术纯客户端原生渲染缺点：无法动态打包，动态下发。纯Web技术来渲染缺点：在一些复杂交互的页面上可能会面临一些性能问题。同时，在Web技术中，UI渲染跟JavaScript脚本执行都是在一个单线程中执行，容易导致抢占资源。客户端原生 + Web界面主要由成熟的Web技术来渲染，辅之以大量的接口提供丰富的客户端原生能力。同时，每个小程序页面都是用不同的WebView来渲染，更贴近原生体验，避免单个WebView任务过于繁重。脚本执行的环境由于JavaScript的灵活性和浏览器的

早期先来看早期（2017年）的一篇解决方案：微信小程序跨页面通信解决思路这里总结出两种方案：方案一：获取Page实例，然后setData更新数据的，跟业务的耦合性比较大。方案二：使用发布订阅模式，但这种多了以后，同样不容易进行后期的维护。现状基础库2.7.3（2019年）开始支持页面间通信。如果一个页面由另一个页面通过 wx.navigateTo 打开，这两个页面间将建立一条数据通道：被打开的页面可以通过 this.getOpenerEventChannel() 方法来获得一个 Event

关于销毁当用户点击了右上角的胶囊按钮关闭小程序，或者滑动屏幕返回手机主页面（离开微信），这时候小程序并没有直接销毁，而是进入了后台。当再次进入微信或者再次打开小程序，又会从后台进入前台。只有当小程序进入后台一定时间（也就是时间过长），或者系统资源占用过高，才会被真正的销毁。冷启动 & 热启动冷启动：小程序首次打开或者销毁后再次被打开。热启动：是指从后台切换到前台，或者小程序在后台运行，重新打开小程序。下载更新小程序冷启动时如果发现有新版本，将会异步下载新版本的代码包，如果需要马上应用

核心概念缓存web缓存位于用户和应用程序服务器之间，用于保存和提供某些响应的副本。在下图中，我们可以看到三个用户一个接一个地获取相同的资源：缓存技术旨在通过减少延迟来提升页面加载速度，还可以减少应用程序服务器上的负载，同时达到防止Dos攻击的目的。缓存键缓存的概念可能听起来简单明了，但它隐藏了一些风险的假设。每当缓存服务收到对资源的请求时，它需要确定：是否已保存此指定资源的副本是否可以使用该副本进行响应是否需转发给应用程序服务器确定两个请求是否正在尝试加载相同的资源可能是很棘手的问

解决方法：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

首先了解下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

首先看一下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 的原型链也能找到

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

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

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

注意：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

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

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

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

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

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]

从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

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

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

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