![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
文章平均质量分 79
sanly_shi
A front-end pupil
展开
-
js blob base64 file 的相互转换
file和base64file文件转换为base64,得到base64格式图片var reader = new FileReader();reader.readAsDataURL(this.files[0]);reader.onload = function(){ console.log(reader.result); //获取到base64格式图片};12345base64转换为filefunction dataURLtoFile(dataurl, filename)...原创 2022-01-19 16:24:07 · 548 阅读 · 0 评论 -
JS共享传参
目录导航一、概念 按值传递 VS. 按引用传递 按共享传递 call by sharing 二、实例解析 探究JS值的传递方式 按共享传递 call by sharing 基本类型的不可变(immutable)性质 一、概念 我们需了解什么是按值传递(call by value),什么是按引用传递(call by reference)。在计算机科学里,这个部分叫求值策略(Evaluation Strategy)。它决定变量之间、函数调用时实参和形参之间值是如何传..原创 2021-12-06 17:07:00 · 344 阅读 · 0 评论 -
await不能用在forEach中?
不知道你是否写过类似的代码: functiontest(){ letarr=[3,2,1] arr.forEach(asyncitem=>{ constres=awaitfetch(item) console.log(res) }) console.log('end') } ...转载 2021-10-27 15:44:10 · 2630 阅读 · 2 评论 -
chrome调试
1.Elements 1.选中 元素 切换至 Event… Tab可以查看这个元素绑定的事件 2.在 Element 选项卡中可以修改html 2.断点在 Sources 面板 js 文件行号处设置断点, 这里除了常规断点外, 还有个条件断点(右键 conditional breakpoint), 在设置的条件为 true 时才会断点, 在循环中需要断点时比较有用 在调用堆栈这里可以切换到堆栈中的任何地方重新执行(右键restart frame), 如果想查看断点前的信.原创 2021-10-20 14:52:35 · 277 阅读 · 0 评论 -
前端设计模式
最近对各种设计模式挺感兴趣,无论是架构设计还是代码优化都有可能用到,所以,每天掌握一个锻炼一下编码思维。废话不多说,直入正题。对前端编程来说,尤其是vue的使用者们,观察者模式是最常用而且最挂在耳边的,所以,不妨从这个开始搞起。下面的话这段带色的话,可以忽略,不影响后续阅读,仅做了解用:设计模式总体来说设计模式分为三大类:创建型模式,共五种:工厂方法模式、抽象工厂模式、单例模式、建造者模式、原型模式。结构型模式,共七种:适配器模式、装饰器模式、代理模式、外观模式、桥接模式、组合模式、享元模式。行原创 2021-07-16 16:13:32 · 259 阅读 · 0 评论 -
JS基础-一个完美的递归函数
一、什么是递归函数 二、完美的递归方法三、总结一、什么是递归函数 递归函数是在一个函数内通过名字调用自身的情况。二、完美的递归方法 写法一:/**方法说明:递归阶乘函数*/function test(num){ if(num <=1){ //递归停止的条件,必须得需要 return 1; } else{ //调用递归 retu...原创 2021-07-16 14:57:01 · 142 阅读 · 0 评论 -
JavaScript 内存泄漏
一、什么是内存泄漏?程序的运行需要内存。只要程序提出要求,操作系统或者运行时(runtime)就必须供给内存。对于持续运行的服务进程(daemon),必须及时释放不再用到的内存。否则,内存占用越来越高,轻则影响系统性能,重则导致进程崩溃。不再用到的内存,没有及时释放,就叫做内存泄漏(memory leak)。有些语言(比如 C 语言)必须手动释放内存,程序员负责内存管理。char * buffer;buffer = (char*) malloc(42);// Do s..转载 2021-07-16 14:53:31 · 85 阅读 · 0 评论 -
浅析 Tree Shaking
当 Javascript 项目达到一定体积时,将代码分成模块会更易于管理。但是,当这样做时,我们最终可能会导入实际上未使用的代码。Tree Shaking 是一种通过消除最终文件中未使用的代码来优化体积的方法。我们来举个例子,下面是一个简单的 Javascript 文件,命名为mathUtils.js,主要实现了基础的数学运算。export function add(a, b) { console.log("add"); return a + b;}export fun...转载 2021-07-13 11:08:19 · 111 阅读 · 0 评论 -
canvas rotate中心点问题
ctx = document.getElementByIdx_x_x_x('canvas').getContext('2d');ctx.fillStyle = "rgb(250,0,0)";ctx.save();ctx.translate(50,50);//这个translate(50,50)发生在rotate()之前,其目的是将旋转点从默认点(0,0),移动到(50,50),下面紧跟着的rotate就是按照这个点来转//rotate方法的旋转点完全是按照...原创 2021-06-24 17:54:30 · 1275 阅读 · 0 评论 -
前端之Vue项目如何做单元测试
关于单元测试,最常见的问题应该就是“前端单元测试有必要吗?”,通过这篇文章,你将会了解单元测试的必要性,以及在Vue项目中如何能够全面可靠的测试我们写的组件。单元测试的必要性一般在我们的印象里,单元测试都是测试工程师的工作,前端负责代码就行了;百度搜索Vue单元测试,联想词出来的都是“单元测试有必要吗?”“单元测试是做什么的?”虽然我们平时项目中一般都会有测试工程师来对我们的页面进行测试“兜底”,但是根据我的观察,一般测试工程师并不会覆盖所有的业务逻辑,而且有一些深层次的代码逻辑测试工程师在不了解.转载 2021-06-23 17:02:02 · 2419 阅读 · 0 评论 -
三种前端实现VR全景看房的方案!
前言事情是这样的,前几天我接到一个外包工头的新需求,某品牌要搭建一个在线VR展厅,用户可以在手机上通过陀螺仪或者拖动来360度全景参观展厅,这个VR展厅里会有一些信息点,点击之后可以呈现更多信息(视频,图文等)...image.png我第一反应是用3D引擎,因为我不久前刚用three.js做过一个BMW的在线展厅,基本把three.js摸熟了。2021-06-03 11_01_41.gif会另写一篇文章教大家用threejs做这个[BMW在线DIY],感兴趣的小伙伴请关注...转载 2021-06-21 17:17:10 · 5218 阅读 · 2 评论 -
js中的各类报错意思
1. RangeError当数字超出允许的值范围时,将抛出此错误。例如,const l = console.logconst arr = [90,88]arr.length=9099我们有一个带有两个元素的arr。接下来,我们尝试使数组包含9099 == 2.9512665430652753e+193元素。这个数字超出了大小数组可以增长的范围。所以运行时它会抛出RangeError:因为我们要增加arr数组的数量超出了JS指定的范围。2. ReferenceError当对变量/.转载 2021-03-08 14:40:23 · 1073 阅读 · 0 评论 -
javascript中常见的三种开发模式
一、单例模式: 所谓单例模式,即保证一个类只有一个实例,并提供一个访问它的全局访问点。 <script type="text/javascript"> //一个类有某个实例,就用这个实例,没有的话,就新生成一个实例 var singleTon = (function(){ var _instance = null; fun...原创 2021-03-01 11:14:28 · 382 阅读 · 1 评论 -
面向对象之三个基本特征(javaScript)
了解过面向对象的同学应该都知道,面向对象三个基本特征是:封装、继承、多态,但是对于这三个词具体可能不太了解。对于前端来讲接触最多的可能就是封装与继承,对于多态来说可能就不是那么了解了。封装在说封装之先了解一下封装到底是什么?什么是封装封装:将对象运行所需的资源封装在程序对象中——基本上,是方法和数据。对象是“公布其接口”。其他附加到这些接口上的对象不需要关心对象实现的方法即可使用这个对象。这个概念就是“不要告诉我你是怎么做的,只要做就可以了。”对象可以看作是一个自我包含的原子...转载 2020-12-08 16:24:51 · 127 阅读 · 0 评论 -
Generator和Async/Await
引言接触过Ajax请求的会遇到过异步调用的问题,为了保证调用顺序的正确性,一般我们会在回调函数中调用,也有用到一些新的解决方案如Promise相关的技术。在异步编程中,还有一种常用的解决方案,它就是Generator生成器函数。顾名思义,它是一个生成器,它也是一个状态机,内部拥有值及相关的状态,生成器返回一个迭代器Iterator对象,我们可以通过这个迭代器,手动地遍历相关的值、状态,保证正确的执行顺序。Iterator接口什么是Iterator接口遍历器(Iterat...转载 2020-12-08 16:06:17 · 117 阅读 · 0 评论 -
这一次彻底掌握深拷贝
这一次彻底掌握深拷贝写在前面在日常开发过程中,我们经常会涉及到数据的拷贝。使用时经常会困惑,到底是不是需要深拷贝,如果是深拷贝使用第三方库还是使用自己写的方法。如果使用第三方库比如lodash还好,基本上不会出错。但是如果使用的是自己写的方法,那么很容易出错,明明有些时候能够拷贝成功,为什么有些时候又不能实现拷贝成功了?这就是对深拷贝理解不深导致的。而且在日常面试过程中,面试官经常会来一句:写一个深拷贝吧。这个时候,可能面试前临时抱佛角背下了一个深拷贝,但是自己也是模棱两可讲不清楚,从而影响面试印转载 2020-11-27 14:20:13 · 185 阅读 · 0 评论 -
jQuery同步Ajax带来的UI线程阻塞问题及解决办法
俗话说不作死就不会死,今天作死了一回,写了一个比较二逼的函数,遇到了同步Ajax引起的UI线程阻塞问题,在此记录一下。 事情起因是这样的,因为页面上有多个相似的异步请求动作,本着提高代码可重用性的原则,我封装了一个名为getData的函数,它接收不同参数,只负责获取数据,然后把数据return。基本的逻辑剥离出来是这样的:function getData1(){ var result; $.ajax({ url : 'p.php',转载 2020-11-25 17:54:51 · 303 阅读 · 0 评论 -
数据结构处理
//题目:请用于过滤筛选出a数组中rowId,shippingId,countryId,provinceText,startTime一样的数据//解:var params = {};a.forEach((item,index)=>{ if (!params[rowId + '-' + shippingId + '-' + countryId + '-' + provinceText + '-' + startTime]) { params[rowId + '-' + s...原创 2020-11-20 16:25:59 · 136 阅读 · 0 评论 -
js处理异步的几种方式(more more more)
Javascript语言的执行环境是"单线程"(single thread,就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推)。这种模式的好处是实现起来比较简单,执行环境相对单纯;坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行。常见的浏览器无响应(假死),往往就是因为某一段Javascript代码长时间运行(比...原创 2020-03-12 11:40:02 · 296 阅读 · 0 评论 -
git常用命令
1.强制推送(慎用,除非你认为其他冲突等可以丢弃 或者不是很重要)git push -- force2.创建文件等小命令touch a // 创建一个a文件echo 1234 >> a // 把1234这个内容放入a文件cat a // 打开a文件 读取出a文件中的内容mkdir test // 创建test文件夹rm 文件名 // 删除文件pwd // 打印当前......原创 2020-02-18 10:30:58 · 580 阅读 · 0 评论 -
async和await(非要多加一些字标题不重复)
await后面接一个会return new promise的函数并执行它 await只能放在async函数里使用async和await获取成功的结果function 摇色子(){ return new Promise((resolve, reject)=>{ let sino = parseInt(Math.random() * 6 +1) ...原创 2020-01-02 14:31:22 · 146 阅读 · 1 评论 -
好用的数组树状图
原创 2019-11-21 12:00:48 · 136 阅读 · 0 评论 -
那些需要用但会影响加载速度的script脚本处理:async,defer
script标签用于加载脚本与执行脚本,在前端开发中可以说是非常重要的标签了。直接使用script脚本的话,html会按照顺序来加载并执行脚本,在脚本加载&执行的过程中,会阻塞后续的DOM渲染。现在大家习惯于在页面中引用各种的第三方脚本,如果第三方服务商出现了一些小问题,比如延迟之类的,就会使得页面白屏。好在script提供了两种方式来解决上述问题,async和defer,这两...转载 2019-10-17 11:20:33 · 405 阅读 · 0 评论 -
Javascript:引用类型复制
先总结下 我们哪些方法可以复制对象 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 // 直接赋值 ...原创 2019-06-25 09:13:03 · 368 阅读 · 0 评论 -
html,css设置var变量
好玩https://www.zhangxinxu.com/wordpress/2018/11/html-js-set-css-css3-var%E5%8F%98%E9%87%8F/原创 2019-06-18 17:54:47 · 573 阅读 · 0 评论 -
node 创建 http服务端和客户端
转载链接:https://juejin.im/post/5adeaac6f265da0b7025895d转载 2018-05-14 11:46:52 · 149 阅读 · 0 评论 -
vue刷新当前路由:router-view 复用组件时不刷新的3种解决方案总结
vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换。 对于路由,不同的路由跳转,vue会帮我们刷新路由,但是我今天要说的是,同一路...转载 2019-06-25 09:11:57 · 905 阅读 · 0 评论 -
移动端虚拟键盘引发的问题分析
https://www.jianshu.com/p/59abda0aad9b转载 2019-06-19 16:51:45 · 116 阅读 · 0 评论 -
两种方式实现表格 固定列
方案一:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e...原创 2019-06-14 09:10:40 · 4073 阅读 · 0 评论 -
Javascript:变量复制和变量访问
基本数据类型:按值访问,可以操作保存变量中的实际的值(不同点1不可添加属性和方法不同点2从一个变量到另一个变量复制基本数据类型的值时,会在变量对象上创建一个新的值,然后把该值复制到为新变量分配的位置上(如图1))引用类型:按引用访问,的值是保存在内存中的对象(js不能访问内存中的位置即不能直接操作对象的内存空间) (不同点1可以添加,改变,删除属性和方法不同点2当一个变量向另一个变量复制引用...原创 2019-07-09 17:17:41 · 192 阅读 · 0 评论 -
node:pm2应用的进程管理器
转载于https://blog.csdn.net/chengxuyuanyonghu/article/details/74910875转载 2019-07-31 09:59:37 · 46 阅读 · 0 评论 -
JavaScript:回调函数(callback)
前言callback,大家都知道是回调函数的意思。如果让你举些callback的例子,我相信你可以举出一堆。但callback的概念你知道吗?你自己在实际应用中能不能合理利用回调实现功能? 我们在平时的学习中容易犯不去深究的病,功能实现了也就不再去追其原由,对一些概念模模糊糊。如果对callback没有一个清楚的理解,估计你在学习Node.js后会崩溃,因为callback是Node.j...原创 2019-07-26 17:41:31 · 167 阅读 · 0 评论 -
Vue2.0:最佳实践 & 踩坑记录
代码规范关于代码规范,我的理解是不一定非要用什么特别严苛的标准或是特别权威的规范,只要项目团队遵循一套统一的约定就可以。当然,参考他人的经验沉淀从而制定自己的代码规范还是很有必要的。1. 对齐静态属性 (static binding) 在前, 动态属性 (dynamic binding) 在后 属性绑定 (:属性)在前, 事件绑定 (@事件) 在后 如果有使用指令,则指令语句...转载 2019-08-01 17:53:31 · 166 阅读 · 0 评论 -
JavaScript:对象,函数,原型和 this
1.对象在javascript里,一切都是对象,包括函数自身(不是指具体的函数,而是指"Function"这个东东)。例如:var fun1=new Function("num1","num2","alert(num1+num2)");这时,fun1是一个函数的"实例",或者说函数对象,所以当然是一个对象。fun1.__proto__指向Function.prototype...原创 2019-09-03 11:27:28 · 170 阅读 · 0 评论 -
Javascript MS题蓄力:
1. 下面代码的输出是什么?functionsayHi(){console.log(name);console.log(age);varname="Lydia";letage=21;}sayHi();A:Lydia和undefined B:Lydia和ReferenceError C:ReferenceError和21 D...原创 2019-10-08 15:37:31 · 668 阅读 · 0 评论 -
javaScript的事件循环机制
Js - 单线程的语言,所以它本身不可能是异步的,但js的宿主环境(比如浏览器,Node)是多线程的,宿主环境通过某种方式(事件驱动,)使得js具备了异步的属性任务队列:所有的任务可以分为两种,一种是同步任务(synchronous),另外一种是异步任务(asynchronous)。同步任务指的是,在主线程上,排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;异...原创 2019-10-09 10:41:25 · 147 阅读 · 0 评论 -
使用mutationObserver实现DOM变化监听
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...原创 2019-06-14 09:09:05 · 919 阅读 · 0 评论 -
js变量赋值的堆栈细节
原创 2019-05-31 11:54:53 · 454 阅读 · 0 评论 -
ajax
记一次完整的原生js ajax请求前端html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax完整请求</title> </head> <body> <p id="id">我是要改变的TEXT</p> <botton onclick=原创 2017-12-28 10:32:06 · 130 阅读 · 0 评论 -
常用正则 前端
一切困难都是纸老虎vscode清除空行 ^\s*(?=\r?$)\n匹配方法的使用:一、校验数字的表达式 1 数字:^[0-9]*$ 2 n位的数字:^\d{n}$ 3 至少n位的数字:^\d{n,}$ 4 m-n位的数字:^\d{m,n}$ 5 零和非零开头的数字:^(0|[1-9][0-9]*)$ 6 非零开头的最多带两位小数的数字:^([1-9][0-9]*)+(....转载 2018-12-20 11:39:27 · 113 阅读 · 0 评论