码小白1-优快云博客

原创微信小程序使用canvas生成分享海报功能复盘

近期需要开发一个微信小程序生成海报分享的功能。在h5一般都会直接采用或者dom2image之类的库直接处理。但是由于小程序不具备传统意义的dom元素，所以也没有办法采用此类工具。所以就只能一笔一笔的用canvas画出来了，下面对实现这个功能中遇到的问题做一个简单的复盘。主题切换。图片弹框展示，适应不同的手机尺寸。图片上层有弹出框展示保存图片按钮。海报内容，标题部分根据实际内容展示，可能为一行也可能为两行描述部分，最多展示四行，超出的显示成…圆角图片展示圆角虚线框。

2023-01-30 13:59:53 3234 1

原创 Mac 安装 nvm 教程

在安装nvm之前我们首先需要确保电脑上没有安装 node 版本，如果安装了 node 版本，可以使用以下命令卸载已安装的node，然后再进行安装。

2022-08-18 13:57:11 12209 3

原创 vant 的日历（calendar ）组件如何禁用指定的日期

需求背景在Vant 的日历组件中想要禁用某些指定的日期，但是Vant 并没有提供类型disabledDate这样的的选项给我们配置。通过阅读Vant 的 calendar组件源码，可以发现当这个日期的 type 属性值为 disabled时，就会禁用当前日期。我们可以通过formatter这个属性来重新定义每一个日期的数据。从而改变 type的属性值。实现方法示例：所有的周日都不可选<van-calendar title="日历" :min-date="minDate"

2021-04-07 15:39:18 6090 4

翻译 Vue3 中插槽(slot)的用法

Vue3 中插槽(slot)的用法概要Vue3（其实从2.6开始）中引入了一个新的指令v-slot，用来表示具名插槽和默认插槽基础示例<foo v-slot="{ msg }"> {{ msg }}</foo><foo> <template v-slot:one="{msg}"> {{ msg }}

2021-02-03 14:58:39 44712 4

转载重新理解js闭包与内存泄漏

本文转自一文颠覆大众对闭包的认知，仅用作学习记录，无商业用途。闭包 & 内存泄漏网络上对闭包的解释基本上都和 MDN 大同小异，“闭包就是访问了自由变量的函数”。对于闭包产生的内存泄漏，网络中流传的大多数说法都是：“因为子函数执行时父函数的执行上下文已经退出执行上下文栈，但是由于子函数作用域链的引用导致父函数的活动对象AO 无法被销毁”导致的。其实上面的这两个广为流传的方法都是错误的，下面我将为你介绍真正的闭包和其内存泄漏的产生原理。作用域链 [[Scopes]]全局代码存储其变.

2022-04-20 17:09:05 770

原创 js 如何选取dom元素的全部文本

使用js选取dom中的全部文本select_text:function(element){ if(!element) return var selection = window.getSelection(); var range = document.createRange(); range.selectNodeContents(element); selection.removeAllRanges(); selection.add

2022-02-19 16:13:33 1684

原创你可能不知道的git revert操作细节

git revert主要用于还原一个或多个现有提交，并生成一条新的更改记录。日常开发过程中，可能会出现要发版的时候，发现master分支上合并了这一期不需要发版的功能点，需要将这些提交还原。以下是 git 官网给出的git revert 命令相关的选项。git revert [--[no-]edit] [-n] [-m parent-number] [-s] [-S[<keyid>]] <commit>git revert (--continue | --skip |

2022-01-07 10:18:03 4633

原创 vue3响应式基础API-Refs

ref接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property.value。const count = ref(0)console.log(count.value) // 0count.value++console.log(count.value) // 1ref实现原理ref的原理就是将一个普通值，转化成对象，并且在获取和设置值时可以增加依赖收集和触发更新的功能function ref(value){ return createR

2022-01-05 17:21:04 351

原创 Vue3的响应式基础API-toRaw & makeRaw

toRaw返回 reactive 或 readonly 代理的原始对象。这是一个“逃生舱”，可用于临时读取数据而无需承担代理访问/跟踪的开销，也可用于写入数据而避免触发更改。不建议保留对原始对象的持久引用。请谨慎使用。const foo = {}const reactiveFoo = reactive(foo)console.log(toRaw(reactiveFoo) === foo) // truemarkRaw标记一个对象，使其永远不会转换为 proxy。返回对象本身。

2022-01-05 17:19:57 330

原创 Vue3响应式API-reactive的数组代理

基本用法返回对象的响应式副本，只能代理对象，不能代理普通值const obj = reactive({count: 0, name: 'hyh'})const count = reactive(1)// value cannot be made reactive: 1实现原理reactive 是基于 Proxy 实现的响应式。const ReactiveFlags = { SKIP = '__v_skip', IS_REACTIVE = '__v_isReactive',

2022-01-05 17:19:27 2349

原创 Vue3 响应性基础 API-- readonly

基本用法接受一个对象 (响应式或纯对象) 或 ref 并返回原始对象的只读代理。const original = reactive({ count: 0 })const copy = readonly(original)watchEffect(() => { // 用于响应性追踪 console.log(copy.count)})// 变更 original 会触发依赖于副本的侦听器original.count++// 变更副本将失败并导致警告copy.count

2022-01-05 17:18:52 1040

原创 Vue3 响应性基础 API --reactive

基本用法返回对象的响应式副本，只能代理对象，不能代理普通值const obj = reactive({count: 0, name: 'hyh'})const count = reactive(1)// value cannot be made reactive: 1响应式转换是“深层”的——它影响所有嵌套 propertyconst obj = reactive({count: 0, name: 'hyh', info: { age: 25 }})console.log(obj

2022-01-05 17:18:18 3369

原创 Vue3 v-model的用法

在Vue3.0中，将移除`v-bind`的`.sync`修饰符使用带参数的`v-model`替代。

2022-01-05 17:17:33 2752

原创如何优雅的实现js资源的按序加载

在实际的开发过程中，我们有时候会遇到动态加载静态资源的需要，这当然是一个很简单的需求，但是如何做到更优雅的实现呢？参考优秀的vue-ueditor-wrap库首先，我们可以采用回调函数的方法实现function loadScript(link, cb){ if(typeof cb !== 'function'){ cb = function(){} } const script = document.createElement('script'); sr

2021-08-30 21:06:34 334

原创用js实现二分查找法

二分查找法二分查找也称折半查找（Binary Search），它是一种效率较高的查找方法。但是，折半查找要求线性表必须采用顺序存储结构，而且表中元素按关键字有序排列。function binarySearch(arr, target){ let start = 0; let end = arr.length - 1; if(!end) return -1 if(end == 1){ return arr[0] === target ? 0 : -1

2021-08-14 15:04:23 3964 3

原创使用阿里Web播放器aliPlayer，自定义清晰度切换

<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maxim

2021-08-12 14:32:52 1876

原创手写一个基于发布订阅模式的js事件处理中心(EventEmitter)

定义发布-订阅模式其实是一种对象间一对多的依赖关系，当一个对象的状态发送改变时，所有依赖于它的对象都将得到状态改变的通知。订阅者（Subscriber）把自己想订阅的事件注册（Subscribe）到调度中心（Event Channel），当发布者（Publisher）发布该事件（Publish Event）到调度中心，也就是该事件触发时，由调度中心统一调度（Fire Event）订阅者注册到调度中心的处理代码。实现思路创建一个 EventEmitter 类在该类上创建一个事件中心（Map）on

2021-07-15 22:08:59 546

原创 js 实现按权重随机抽奖

请实现抽奖函数rand，保证随机性输入为表示对象数组，对象有属性n表示人名，w表示权重随机返回一个中奖人名，中奖概率和w成正比let peoples = [ { n: 'p1', w: 1 }, { n: 'p2', w: 100 }, { n: 'p3', w: 100 }];let rand = function (p) { const totalWeight = p.reduce(function (pre, cur, index) { cur.startW = pr

2021-07-01 18:34:52 1000

原创实现一个数组无限摊平的方法

// 定于无限常量const INFINITY = 1/0;// 定义用于判断是否可继续摊平的方法function isFlattenable(value){ return Array.isArray(value)}function flatMapDeep(array){ return baseFlatten(array, INFINITY)}function baseFlatten(array, deep, result){ result || (result.

2021-06-25 16:30:16 262

原创实现一个数组的findLastIndex的方法

Js 数组为我们提供了很多的数据查找与遍历的方法例如：find,findIndex,但是没有一个倒序查找的方法，我们可以模拟实现一个 findLast 和 findLastIndex的方法const findLast = function(array, cb){ if(!Array.isArray(array)){ return undefined } if(array.length === 0){ return undefined } for(var i = ar

2021-06-23 15:51:41 2348

原创 React 中this指向问题

概要在初次使用React时，经常会遇到this丢失的问题。下面总结几种React中绑定this的方法。首先看下面的代码：class Demo extends Component{ constructor(props){ super(props) } handleClick(){ console.log('this', this) } render(){ return ( <div&gt

2021-03-17 17:34:41 230

原创 Vue 3.x 废弃和修改的用法

filtersVue3.0 将不再支持filters语法。{{ msg | format }}{{ format(msg) }}原因Filters的功能可以通过方法调用或计算属性轻松复制，因此它主要提供的是语法价值，而不是实际价值。Filters需要一个自定义的小语法，然而这打破表达式只是JavaScript的假设——这增加了学习和实现的成本。事实上，它与JavaScript自己的位或运算符(|)相冲突，

2021-03-16 17:14:47 861

翻译 Vue3 中指令参数支持动态参数

Vue3 中指令参数支持动态参数在Vue3 的 RFCs文档中,Vue3中指令参数将支持动态参数。基础示例<div v-bind:[key]="value"></div><div v-on:[event]="handler"></div><div v-slot:[slotName]="slotProps"></div>为什么要这么做在Vue3.0之前，Vue中的指令参数都是静态设置的，当然也可以通过JavaScript的

2021-02-03 15:40:20 1287

原创 javascript 中 String 与正则相关的方法

javascript 中 String 与正则相关的方法javascript 中 String 原型上有三个与正则相关的方法 search、replace、match;这三个方法使得我们提取字符串中的某些格式的数据提供了便利。replace()定义与用法replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。语法stringObj.replace(regexp/substr,replacement)返回值一个新的字符串，是用 replac

2020-11-26 16:55:44 308

原创使用 while 来封装一个类似于 forEach的方法

javascript 为我们提供了 for、forEach、for in、for of, while等循环方式来遍历数组。但是，使用for、for in、forEach遍历数组的效率没有使用 while 的效率高，在日常开发中我们又习惯于使用for、for in、forEach来遍历数组。接下来，我们来使用while 来封装一个类似于 forEach 的方法。/** * @param {Array} [array] 要遍历的数组. * @param {Function} iteratee 每一次迭

2020-11-26 14:11:09 158

weixin_41489378的博客