![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
橘柚子
荆棘中爬行
展开
-
函数防抖与函数节流
防抖(debounce)函数防抖(debounce):当持续触发事件时,在设置的周期内没有再触发事件,事件处理函数才会执行一次,如果设定的周期没有结束,又一次触发了事件,就重新开始延时。为了有个直观的对比,我们先看下没有使用debounce技术的click事件:我们看到,当用户频繁点击button按钮时,控制台会频繁的输出结果,这种频繁调用事件处理程序,会加重浏览器的负担,导致用户体验非常糟糕。为了解决上述问题,我们在编码中可以使用debounce防抖技术。防抖原理:是维.原创 2020-11-27 17:37:57 · 226 阅读 · 0 评论 -
JavaScript 立即执行函数
1.什么是立即执行函数声明一个函数,并马上调用这个匿名函数就叫做立即执行函数;也可以说立即执行函数是一种语法,让你的函数在定义以后立即执行;立即执行函数的创建步骤,看下图:2.立即函数形式接下来看立即执行函数的两种常见形式://匿名函数包裹在一个括号运算符中,后面跟一个小括号(function(){ //...})()////匿名函数后面跟一个小括号,整个包裹在一个括号运算符中(function(){ //...}())(),!,+,-,=等运算符都原创 2020-10-30 15:54:16 · 284 阅读 · 0 评论 -
JavaScript闭包理解二
javascript闭包的例子 function outerFun() { var a = 0; function innerFun() { a++; alert(a); } return innerFun; //注意这里 } var obj = outerFun(); obj(); //结果为1 obj(); //结果为2原创 2020-10-30 14:06:41 · 126 阅读 · 0 评论 -
JavaScript闭包理解一
什么是闭包:当内部函数 在定义它的作用域 的外部 被引用时,就创建了该内部函数的闭包 ,如果内部函数引用了位于外部函数的变量,当外部函数调用完毕后,这些变量在内存不会被 释放,因为闭包需要它们.原创 2020-10-30 14:00:49 · 129 阅读 · 0 评论 -
完美解决settimeout回调函数中this总是指向window的问题
问题描述前些天在练习写一个小例子的时候用到了定时器,发现在setInterval和setTimeout中传入函数时,函数中的this会指向window对象,如下例:var num = 0;function Obj (){ this.num = 1, this.getNum = function(){ console.log(this.num); }, this.getNumLater = function(){ setTimeout原创 2020-10-29 18:13:25 · 1561 阅读 · 2 评论 -
JavaScript的值传递和引用传递
JavaScript有5种基本的数据类型,分别是:布尔、null、undefined、String和Number。这些基本类型在赋值的时候是通过值传递的方式。值得注意的是还有另外三种类型: Array、Function和Object,它们通过引用来传递。从底层技术上看,它们三都是对象。基本数据类型如果一个基本的数据类型绑定到某个变量,我们可以认为该变量包含这个基本数据类型的值。var x = 10;var y = 'abc';var z = null;当我们使用=将这些变量赋值到..原创 2020-10-29 11:03:36 · 504 阅读 · 0 评论 -
理解 JavaScript 的 async/await
1. async 和 await 在干什么任意一个名称都是有意义的,先从字面意思来理解。async 是“异步”的简写,而 await 可以认为是 async wait 的简写。所以应该很好理解 async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成。另外还有一个很有意思的语法规定,await 只能出现在 async 函数中。然后细心的朋友会产生一个疑问,如果 await 只能出现在 async 函数中,那这个 async 函数应该怎么调用?如果需要通过原创 2020-10-22 16:27:42 · 133 阅读 · 0 评论 -
js splice使用
splice方法可以用来对js的数组进行删除,添加,替换等操作。1. 删除功能,第一个参数为第一项位置,第二个参数为要删除几个。用法:array.splice(index,num),返回值为删除内容,array为结果值。2.插入功能,第一个参数(插入位置),第二个参数(0),第三个参数(插入的项)。用法:array.splice(index,0,insertValue),返回值为空数组,array值为最终结果值。3.替换功能,第一个参数(起始位置),第二个参数(删除的项数),..转载 2020-10-20 11:15:53 · 408 阅读 · 0 评论 -
es5、es6的.map()、.reduce()、.filter()
.map()、.reduce()、.filter()的使用基本思路上和for一样,只是在参数、功能等细节方面有各自擅长的地方 如果需要一个数组,请使用map方法 如果需要一个结果,请使用reduce方法 如果需要过滤一个结果,请使用filter方法,返回的也是数组1.map() var _arrObj = [ { age: 11, name: 'aaa' }, { age: 22,...原创 2020-10-14 16:18:17 · 420 阅读 · 0 评论 -
使用原生js以base64读取本地图片文件
起因在做项目的时候遇到了一个问题,需要用户上传一张图片在画布里操作,一般的逻辑是先传图片到服务器,然后从服务器读取这张图片,这过程中可能读取的时间会过长,而且服务器也没必要存操作前的图片,于是就需要本地读取图片(这里用base64的格式)。这里为了备忘,记录下。代码File.prototype.convertToBase64 = function(callback){ var FR= new FileReader(); FR.onload = function(e) {原创 2020-09-01 16:12:05 · 1754 阅读 · 0 评论 -
保存指定DOM为图片
1.引入一个js html2canvas.js,已上传我的资源https://download.csdn.net/download/qq_21987433/121538972.html DOM提供 <div id="Authbook" style="background-color: #fff;width: 100%"> <div...原创 2020-02-13 12:30:50 · 455 阅读 · 0 评论 -
Promise配合axios
Promise 是异步编程的一种解决方案,比传统的解决方案–回调函数和事件--更合理和更强大。它由社区最早提出和实现,ES6将其写进了语言标准,统一了语法,原生提供了Promise checkLogin: () => {// 返回一个promise对象 return new Promise((resolve, reject) => { axios({ ...原创 2020-01-21 15:36:15 · 283 阅读 · 0 评论 -
Promise详解
为什么会有promise,他的作用是什么?promise主要是为了解决js中多个异步回调难以维护和控制的问题.从图中,我们可以看出,Promise是一个函数,这个函数上有在项目中常用的静态方法:all, race, reject,resolve等,原型对象上有有catch, then等方法.也就是说,如果要调用catch和then方法,需要一个Promise的实例( new Pr...原创 2020-01-21 14:50:00 · 364 阅读 · 0 评论 -
异步跨域上传从剪贴板上传图片
首先跨域的需求是必须的,由程序架构所决定。关于跨域那最先想到的还是jq的ajax的jsonp,可是jsonp只能使用get的方式,图片数据太大有可能就不稳定。最终决定使用formdata封装file对象,使用XMLHttpRequest对象发送请求数据。为了模拟跨域,分别在本地的两个服务器localhost:80和localhost:8090部署后端和前端的代码前端代码:<...原创 2019-05-22 09:41:19 · 178 阅读 · 0 评论 -
JavaScript基础知识学习记录
1.DOM0级事件与DOM2级事件【1】DOM0级事件在标签内写onclick事件 在js中写onclick=function(){}函数示例:<input id="myButton" type="button" value="Press Me" onclick="console.log('thanks');" >document.getElementById...原创 2019-06-10 14:12:15 · 153 阅读 · 0 评论 -
javascript创建对象 之 原型模式的理解
原型概念:每个函数都有一个 prototype (原型)属性,这个属性是一个指针,指向一个对象。 用途:让所有对象实例共享它所包含的属性和方法。代码示例:function Person(){}Person.prototype.name = "Nicholas";Person.prototype.age = 29;Person.prototype.job = "Softwar...原创 2019-07-10 16:21:34 · 104 阅读 · 0 评论 -
javascript创建对象 之 工厂模式,构造函数模式
1.工厂模式function createPerson(name, age, job){ var o = new Object(); o.name = name; o.age = age; o.job = job; o.sayName = function(){ alert(this.name); }; return o;}var person1 = ...原创 2019-07-10 17:24:45 · 91 阅读 · 0 评论 -
javascript创建对象 之 变异的组合构造函数模式与原型模式
1.组合使用构造函数模式和原型模式构造函数模式用于定义实例属性,原型模式用于定义方法和共享的属性。混成模式支持向构造函数传递参数function Person(name, age, job){ this.name = name; this.age = age; this.job = job; this.friends = ["Shelby", "Court"];...原创 2019-07-10 17:46:56 · 88 阅读 · 0 评论 -
JavaScript 四种this的取值情况
在函数中this到底取何值,是在函数真正被调用执行的时候确定的,函数定义的时候确定不了。因为this的取值是执行上下文环境的一部分,每次调用函数,都会产生一个新的执行上下文环境。1.构造函数所谓构造函数就是用来new对象的函数。其实严格来说,所有的函数都可以new一个对象,但是有些函数的定义是为了new一个对象,而有些函数则不是。另外注意,构造函数的函数名第一个字母大写(规则约定)。例...原创 2019-07-10 21:36:54 · 707 阅读 · 0 评论 -
JavaScript 中call,apply方法的使用
1.call,apply的基本概念理解在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向。JavaScript 的一大特点是,函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。function fruits() {} fruits...原创 2019-07-11 10:45:14 · 143 阅读 · 0 评论 -
javascript 继承之原型链继承与类式继承
由于js不像java那样是真正面向对象的语言,js是基于对象的,它没有类的概念。所以,要想实现继承,可以用js的原型prototype机制或者用apply和call方法去实现1.原型链继承 //定义父类 function Parent(){ this.name = 'mike'; } //给父类添加原型属性 Parent.protot...原创 2019-07-11 11:57:17 · 412 阅读 · 0 评论 -
JavaScript 功能函数积累
1.获取地址栏中url的参数function getQueryString(name) { var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); var r = window.location.search.substr(1).match(reg); i...原创 2018-09-17 15:04:11 · 120 阅读 · 0 评论