JavaScript随笔 - 随笔分类 - unfetteredman

base64转file上传

摘要：base64图片转file上传 base64ToFile(dataurl, filename) { const arr = dataurl.split(',') const mime = arr[0].match(/:(.*?);/)[1] const bstr = atob(arr[1]) let 阅读全文

posted @ 2024-01-27 13:37 unfetteredman 阅读(107) 评论(0) 推荐(0)

split 截取分割字符串

摘要：JavaScript中拆分字符串 1，Split拆分字符串 eg： 1, 以字符串本身分割 ‘asfk#dsaklfjdslakf ‘.split('#') //结果：[ 'asfk', 'dsaklfjdslakf '] 2, 以正则表达式分割 ‘asfk#dsaklfjdslakf ‘.spli 阅读全文

posted @ 2023-11-09 16:23 unfetteredman 阅读(27) 评论(0) 推荐(0)

使用 canvas 重画文字重影问题

摘要：刷新canvas，有时会出现上次的内容无法清除而造成重影，需要进行以下步骤的处//在手机上，需加上这步，先隐藏再显示，类似刷新 const oldWidth = canvasRef.current.width; const oldHeight = canvasRef.current.height; 阅读全文

posted @ 2022-12-07 10:44 unfetteredman 阅读(334) 评论(0) 推荐(0)

canvas适配（图片、文字在移动端显示模糊问题）

摘要：canvas图片、文字在移动端显示模糊问题因为 canvas 不是矢量图，而是像图片一样是位图模式的。高 dpi 显示设备意味着每平方英寸有更多的像素。也就是说二倍屏，浏览器就会以2个像素点的宽度来渲染一个像素，该 canvas 在 Retina 屏幕下相当于占据了2倍的空间，相当于图片被放大了一阅读全文

posted @ 2022-12-07 10:20 unfetteredman 阅读(983) 评论(0) 推荐(0)

重排(reflow)和重绘(repaint)

摘要：重排(reflow)和重绘(repaint) 页面生成的过程： 1.HTML 被 HTML 解析器解析成 DOM 树； 2.CSS 被 CSS 解析器解析成 CSSOM 树； 3.结合 DOM 树和 CSSOM 树，生成一棵渲染树(Render Tree)，这一过程称为 Attachment； 4. 阅读全文

posted @ 2022-09-01 16:59 unfetteredman 阅读(417) 评论(0) 推荐(0)

将文本复制到粘贴板上

摘要：将文本复制到粘贴板上 js也是有复制命令的，那就是document.execCommand('copy'); 这个命令会将选中的内容复制到粘贴板中； input和textarea元素有一个select()方法，这个方法可以帮我们自动选中。 function copy(text) { var text 阅读全文

posted @ 2021-09-23 10:24 unfetteredman 阅读(302) 评论(0) 推荐(0)

js——原生js借助Cavas自动下载保存图片

摘要：1 function downFile (imgsrc, name) { //下载图片地址和图片名 2 let image = new Image(); 3 // 解决跨域 Canvas 污染问题 4 image.setAttribute("crossOrigin", "anonymous"); 5 阅读全文

posted @ 2021-06-22 19:47 unfetteredman 阅读(336) 评论(0) 推荐(0)

JavaScipt-Object-可选链 "?."

摘要：可选链 "?." “不存在的属性”的问题我们大多数用户的地址都存储在 user.address 中，街道地址存储在 user.address.street 中，但有些用户没有提供这些信息。在这种情况下，当我们尝试获取 user.address.street，而该用户恰好没提供地址信息，我们则会收阅读全文

posted @ 2021-06-12 10:47 unfetteredman 阅读(88) 评论(0) 推荐(0)

javaScript遍历数组总结

摘要：javaScript遍历数组总结 1、使用forEach遍历 2、使用for..in..遍历 3、使用for-of遍历不仅支持数组，还支持大多数类数组对象，例如DOM NodeList对象. 也支持字符串遍历，它将字符串视为一系列的Unicode字符来进行遍历. 阅读全文

posted @ 2021-03-15 11:59 unfetteredman 阅读(59) 评论(0) 推荐(0)

JavaScript遍历对象的常见方法

摘要：js es6遍历对象的6种方法（应用中推荐前三种） 1.for … in 循环遍历对象自身的和继承的可枚举属性(循环遍历对象自身的和继承的可枚举属性(不含Symbol属性).). 2、使用Object.keys()遍历 (返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性阅读全文

posted @ 2021-03-15 11:57 unfetteredman 阅读(2246) 评论(0) 推荐(0)

JS中的可枚举属性与不可枚举属性

摘要：JS中的可枚举属性与不可枚举属性什么是枚举？枚举是指对象中的属性是否可以遍历出来，再简单点说就是属性是否可以以列举出来。一、怎么判断属性是否可枚举在JavaScript中，对象的属性分为可枚举和不可枚举之分，它们是由属性的enumerable值决定的。可枚举性决定了这个属性能否被for…in查阅读全文

posted @ 2021-03-14 22:02 unfetteredman 阅读(1243) 评论(0) 推荐(0)

JavaScript中深拷贝的实现方法

摘要：js实现递归深拷贝的demo 1.Object.assin()此方法不适合业务复杂场景拷贝 2.lodash中的deepClone方法 3.JSON.parse（JSON.Stringfy（obj））注意此方法的特殊应用场景 4.jQuery 中的extentd方法 5.递归（见下列）： 1 <!D 阅读全文

posted @ 2021-03-14 21:37 unfetteredman 阅读(186) 评论(0) 推荐(0)

闭包

摘要：一、变量的作用域要理解闭包，首先必须理解Javascript特殊的变量作用域。变量的作用域无非就是两种：全局变量和局部变量。 Javascript语言的特殊之处，就在于函数内部可以直接读取全局变量。 var n=999; function f1(){ alert(n); } f1(); // 9 阅读全文

posted @ 2020-11-26 15:15 unfetteredman 阅读(95) 评论(0) 推荐(0)

call、apply、bind的作用

摘要：call、apply、bind的作用是改变函数运行时this的指向，所以先说清楚this。以下是函数的调用方法：方法调用模式：当一个函数被保存为对象的一个方法时，如果调用表达式包含一个提取属性的动作，那么它就是被当做一个方法来调用，此时的this被绑定到这个对象。 var a = 1 var obj 阅读全文

posted @ 2020-11-26 15:05 unfetteredman 阅读(113) 评论(0) 推荐(0)

Javascript非构造函数的继承

摘要：一、什么是"非构造函数"的继承？比如，现在有一个对象，叫做"中国人"。 var Chinese = { nation:'中国' }; 还有一个对象，叫做"医生"。 var Doctor ={ career:'医生' } 请问怎样才能让"医生"去继承"中国人"，也就是说，我怎样才能生成一个"中国医生阅读全文

posted @ 2020-11-26 14:28 unfetteredman 阅读(90) 评论(0) 推荐(0)

Javascript构造函数的继承

摘要：对象之间的"继承"的五种方法。比如，现在有一个"动物"对象的构造函数。 function Animal(){ this.species = "动物"; } 还有一个"猫"对象的构造函数。 function Cat(name,color){ this.name = name; this.color = 阅读全文

posted @ 2020-11-26 14:26 unfetteredman 阅读(206) 评论(0) 推荐(0)

JavaScript 的 this 原理

摘要：JavaScript 的 this 原理一、问题的由来学懂 JavaScript 语言，一个标志就是理解下面两种写法，可能有不一样的结果。 var obj = { foo: function () {} }; var foo = obj.foo; // 写法一 obj.foo() // 写法二阅读全文

posted @ 2020-11-15 12:34 unfetteredman 阅读(113) 评论(0) 推荐(0)

js—BOM：浏览器对象模型

摘要：1 BOM：浏览器对象模型 2 load等页面全部加载完毕，包含页面dom元素，图片，flash，css等 3 window.onload = function(); //　当页面 DOM 结构中的 js、css、图片，以及 js 异步加载的 js、css 、图片都加载完成之后，才会触发 load 阅读全文

posted @ 2020-09-05 20:58 unfetteredman 阅读(138) 评论(0) 推荐(0)

jsDOM事件流

摘要：1 DOM事件流： 2 事件流描述的是从页面中接受事件的顺序。事件发生时会在元素节点之间按照特定的顺序传播，这个过程即DOM事件流。 3 DOM事件流分为三个阶段： 4 1，捕获阶段 5 2，当前目标阶段 6 3，冒泡阶段 7 事件冒泡：IE最早提出，事件开始是由最具体的元素接收，然后逐级向上传播到阅读全文

posted @ 2020-09-05 20:57 unfetteredman 阅读(316) 评论(0) 推荐(0)

js监听事件

摘要：1 监听事件： 2 传统监听事件： 3 添加监听事件： 4 elementTarget.onclick = function(){} 5 移除监听事件： 6 elementTarget.onclick = function(){ 7 elementTarget.onclick = null; //当阅读全文

posted @ 2020-09-05 20:55 unfetteredman 阅读(518) 评论(0) 推荐(0)

随笔分类 - JavaScript随笔