js基础
文章平均质量分 56
码小白1
在搬砖道路上渐行渐远。
展开
-
微信小程序使用canvas生成分享海报功能复盘
近期需要开发一个微信小程序生成海报分享的功能。在h5一般都会直接采用或者dom2image之类的库直接处理。但是由于小程序不具备传统意义的dom元素,所以也没有办法采用此类工具。所以就只能一笔一笔的用canvas画出来了,下面对实现这个功能中遇到的问题做一个简单的复盘。主题切换。图片弹框展示,适应不同的手机尺寸。图片上层有弹出框展示保存图片按钮。海报内容,标题部分根据实际内容展示,可能为一行也可能为两行描述部分,最多展示四行,超出的显示成…圆角图片展示圆角虚线框。原创 2023-01-30 13:59:53 · 2914 阅读 · 2 评论 -
重新理解js闭包与内存泄漏
本文转自 一文颠覆大众对闭包的认知,仅用作学习记录,无商业用途。闭包 & 内存泄漏网络上对闭包的解释基本上都和 MDN 大同小异,“闭包就是访问了自由变量的函数”。对于闭包产生的内存泄漏,网络中流传的大多数说法都是:“因为子函数执行时父函数的执行上下文已经退出执行上下文栈,但是由于子函数作用域链的引用导致父函数的 活动对象AO 无法被销毁”导致的。其实上面的这两个广为流传的方法都是错误的,下面我将为你介绍真正的闭包和其内存泄漏的产生原理。作用域链 [[Scopes]]全局代码存储其变.转载 2022-04-20 17:09:05 · 705 阅读 · 0 评论 -
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 · 1575 阅读 · 0 评论 -
如何优雅的实现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 · 268 阅读 · 0 评论 -
使用阿里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 · 1716 阅读 · 0 评论 -
手写一个基于发布订阅模式的js事件处理中心(EventEmitter)
定义发布-订阅模式其实是一种对象间一对多的依赖关系,当一个对象的状态发送改变时,所有依赖于它的对象都将得到状态改变的通知。订阅者(Subscriber)把自己想订阅的事件注册(Subscribe)到调度中心(Event Channel),当发布者(Publisher)发布该事件(Publish Event)到调度中心,也就是该事件触发时,由调度中心统一调度(Fire Event)订阅者注册到调度中心的处理代码。实现思路创建一个 EventEmitter 类在该类上创建一个事件中心(Map)on原创 2021-07-15 22:08:59 · 459 阅读 · 0 评论 -
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 · 912 阅读 · 0 评论 -
实现一个数组无限摊平的方法
// 定于无限常量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 · 212 阅读 · 0 评论 -
实现一个数组的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 · 2066 阅读 · 0 评论 -
javascript 中 String 与正则相关的方法
javascript 中 String 与正则相关的方法javascript 中 String 原型上有三个与正则相关的方法 search、replace、match;这三个方法使得我们提取字符串中的某些格式的数据提供了便利。replace()定义与用法replace() 方法用于在字符串中用一些字符替换另一些字符,或替换一个与正则表达式匹配的子串。语法stringObj.replace(regexp/substr,replacement)返回值一个新的字符串,是用 replac原创 2020-11-26 16:55:44 · 272 阅读 · 0 评论 -
使用 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 · 121 阅读 · 0 评论 -
使用正则表达式获取字符串中的所有数字
在项目开发中,我们时常会遇到一些奇怪的数据,我们需要进行一些转换才能达到我们的使用要求。最近在项目中遇到了 这样的数据 "{100, 200, 300x400}",字符串中的四个数字分别代表着 x,y,w,h,但是实际用到的数据格式应该为 {x:100, y:200, w:300, h:400},所以我们需要对字符串进行一个转换。我最先想到的方案是直接用字符串分割来获取各个数值,代码如下,function fn(str){ if(!str) return {} str = str.re原创 2020-11-26 14:09:26 · 4781 阅读 · 0 评论 -
JS:简单计算斐波那契数
斐波那契数,亦称之为斐波那契数列(意大利语: Successione di Fibonacci),又称黄金分割数列、费波那西数列、费波拿契数、费氏数列,指的是这样一个数列:1、1、2、3、5、8、13、21、……在数学上,斐波那契数列以如下被以递归的方法定义:F0=0,F1=1,Fn=Fn-1+Fn-2(n>=2,n∈N*),用文字来说,就是斐波那契数列由 0 和 1 开始,之后的斐波那契数...原创 2019-03-24 11:18:06 · 724 阅读 · 2 评论 -
JS:防抖与节流的实现
应用场景:防抖与节流在我们的日常开发中经常会遇到,我们可以看一下大概的应用场景:防抖:1.输入框做远程搜索时,用户不断的输入内容,我们可以用防抖来节约请求的资源;2.window触发resize时,我们可以通过防抖来保证只在用户停止拖拽的时候触发相应的方法;3.可以用来防止按钮的重复提交。节流:1.鼠标不断的点击触发click,保证单位时间内只触发一次;2.监听滚动...原创 2019-03-22 22:59:25 · 567 阅读 · 0 评论