![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
javascript
join8
热爱学习 交友
展开
-
防抖和节流如何更好的理解
本质都是为了防止函数高频调用,利用闭包特性来缓存变量(状态)。1、防抖(debounce)重在清零clearTimeout(timer),执行最后一次原理:调用函数fn在一段时间后才执行,如果这段时间再次调用,则重新计算执行时间,如果规定的时间没有再次调用该函数,则执行函数fnfunction debounce(fn, wait) { let timer = null; return function () { let _this = this; .原创 2021-05-27 19:40:32 · 185 阅读 · 2 评论 -
实现一个audio模拟器
audio自带的样式一般满足不了ui需求,所以往往需要自己去实现。原理是将audio隐藏,监听audio事件,实现模拟播放效果。audio属性的值可以通过父组件传值过来,此代码可以封装成一个组件。<template> <div class="audio-wrapper"> <audio controls="controls" class="audio1" :src="url" :preload="audio.原创 2021-04-22 20:34:25 · 234 阅读 · 2 评论 -
搭建sentry前端异常日志监控环境
一、sentry可以做什么可以实时监控生产环境上的系统运行状态,一旦发生异常会第一时间把报错的路由路径、错误所在文件等详细信息以邮件形式通知我们,并且利用错误信息的堆栈跟踪快速定位到需要处理的问题。优点:支持几乎所有主流开发语言( JS/Java/Python/php )和平台, 并提供了web界面来展示输出错误。Sentry 分为服务端和客户端 SDK,前者可以直接使用它家提供的在线服务,也可以本地自行搭建;后者提供了对多种主流语言和框架的支持,包括 React、Angular、Node、Dj原创 2021-04-20 17:49:30 · 1279 阅读 · 1 评论 -
关于接口返回数据需要合并处理的思考
1、今天有个小伙伴问我后台返回一个data,需要将数组的每一项合并成一个新的数组。data=[[4, 8, 10, 3, 6778129614750487000], [3, 7, 7, 6, 6777475710194946000]]需要换成data=[[4, 3],[8, 7],[10, 7],[3, 6],[6778129614750487000, 6777475710194946000]]代码实现如下var data = [[4, 8, 10, 3, 67781296147504原创 2021-04-19 14:06:59 · 986 阅读 · 0 评论 -
一个DOM元素绑定多个事件时,先执行冒泡还是捕获
绑定在被点击元素的事件是按照代码顺序发生,其他元素通过冒泡或者捕获“感知”的事件,按照W3C的标准,先发生捕获事件,后发生冒泡事件。所有事件的顺序是:其他元素捕获阶段事件 -> 本元素代码顺序事件 -> 其他元素冒泡阶段事件 。一个DOM元素绑定两个事件,一个冒泡,一个捕获,则事件会执行多少次,执行顺序如何。首先来了解一下冒泡和捕获是怎么回事:1.冒泡冒泡是从下向上,DOM元素绑定的事件被触发时,此时该元素为目标元素,目标元素执行后,它的的祖元素绑定的事件会向上顺序执行。如下代码转载 2020-10-29 15:36:46 · 500 阅读 · 0 评论 -
一个二进制数组,计算其中最大连续1个数
示例:[1,0,0,1,1,1] 输出3function maxOne(arr) { let max = 0; let tmp = 0; for (let i = 0; i < arr.length; i++) { if (arr[i] ==1) { tmp++; } else { max = Math.max(max,tmp); tmp = 0; } } return Math.max(max,tmp);}时间复杂度O(N) 空间复杂度O(1)原创 2020-10-29 10:41:00 · 713 阅读 · 0 评论 -
图片懒加载实现思路
1、在img元素上绑定一个属性data-src,放上图片真实的地址,src可以放一个占位图或者为空。2、当图片进入可视区域的时候,将data-src值赋值给src。<!doctype html><html><head><meta charset="utf-8"><title></title><!--适应移动端--><meta name="viewport" content="width=devic原创 2020-09-25 15:13:19 · 404 阅读 · 0 评论 -
前端利用exif.js+canvas压缩上传图片
利用canvas作为媒介重新绘画一张图片达到压缩目的,由于ios存在图片翻转问题,所以需要借助exif.js对图片进行处理。注意:base64转成file 用new File()在ios部分机型存在不兼容问题,所以转成blob,再转成file文件。import EXIF from "exif-js"; // 压缩图片 export function changeFile(file,callback) { var Orientation = null; // 选原创 2020-09-22 17:38:40 · 380 阅读 · 0 评论 -
总结一下在页面中常用到的方法
//获取 ?后面参数function getQueryString (paras) { var url = location.hash var paraString = url.substring(url.indexOf('?') + 1, url.length).split('&') for (var i = 0; i < paraString.length; i++) { var pair = paraString[i].split('=') if (pai.原创 2020-09-22 17:07:50 · 114 阅读 · 0 评论 -
跨域常用方法
什么是跨域JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下:首先什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.com 域名下的js无法操作b.com或是c.a.com域名下的对象。更详细的说明可以看下表:U转载 2017-06-20 16:06:59 · 407 阅读 · 0 评论 -
利用事件委托解决js元素添加后未响应绑定事件问题
1.情景还原html 1 2 3添加js$(".divclick").click(function(){ console.log(2);})$("#add").click(function(){ htmlstr="4" $('#Container').append(htmlstr);})*在button添加第四个li元素原创 2017-09-27 19:23:10 · 336 阅读 · 0 评论 -
H5 touchstart、touchmove、touchend 拖拽
1.获取鼠标位置*clientX/clientY 相对浏览器窗口坐标(不会随着滚动条而变化,不包含工具栏、导航栏)event.clientX、event.clientY就是用来获取鼠标距游览器显示窗口的长度。*pageX/pageY page为页面的意思,页面的高度一般情况client游览器显示区域装不下,所以会出现垂直滚动条。鼠标距离页面初始page原点的长度。原创 2017-09-27 14:41:18 · 2739 阅读 · 0 评论 -
DOM 0级事件和2级事件区别
事件模型在不断发展,早期的事件模型称为DOM0级别。 DOM0事件模型,所有的浏览器都支持。 直接在dom对象上注册事件名称,就是DOM0写法,比如:1 document.getElementById("test").onclick = function(e){}; 意思就是注册一个onclick事件。当然,它和这种写法是一个意思:转载 2017-09-26 11:07:50 · 2113 阅读 · 0 评论 -
FormData上传文件显示进度百分比
FormData上传文件显示进度百分比StartCancelvar xhr = new XMLHttpRequest();var progressBar = document.getElementById('upload_progress');$('#btn_start').click(function() { var uploadFile = document.ge原创 2017-08-29 18:29:19 · 2265 阅读 · 1 评论 -
基本类型和引用类型赋值
1.基本类型的值是不变的var a=10;var b=a; b=b+1;console.log(a) //10console.log(b) //11基本类型的值都保存在栈区内,每个都有自己的独立地址。2.引用类型var a=new Object();a.value=1;b=a;console.log(a.value)//1b.value=2;console.log原创 2017-09-13 11:31:09 · 424 阅读 · 0 评论 -
对于js原型和原型链理解
1.原型 每创建一个函数,都有一个prototype属性,该属性指向一个对象,这个对象就是原型。 选择一些属性和方法通过prototype挂在到原型上。每个new出来的实例,都有一个proto属性,该属性指向构造函数的原型对象,通过这个属性, 让实例对象也能够放问原型对象上的方法。 因此,当所有的实例都能够proto放问到原型对象时,原型对象的方法与属性就变成共有的方法和属性。原创 2017-06-09 19:13:20 · 384 阅读 · 1 评论 -
前端模块化开发
1.通常我们写js是下面这样function fn1(){ //console.log(a) }function fn2(){ //console.log(2)}在需要调用的地方直接方法名调用就可以了,但多人开发容易引起命名的冲突,不利于优化!2.可以将所有的方法封装到一个对象中var demo = { channel:"wap", init:fu原创 2017-09-12 13:28:52 · 778 阅读 · 0 评论 -
简单GetQueryString方法
// function GetQueryString(name)// {// var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");// var ul='?ver=1.0&id=6';// var r = ul.substr(1).match(reg);// if(r!=null)return原创 2017-10-09 11:58:56 · 4343 阅读 · 1 评论 -
xss攻击方式
1.xss攻击方式反射型发出请求时,XSS代码出现在URL中,作为输入提交到服务器端,服务器端解析后响应,XSS代码随响应内容一起传回给浏览器,最后浏览器解析执行XSS代码。这个过程像一次反射,故叫反射性XSS。存储型存储型XSS和反射型XSS的差别仅在于,提交代码会存储在服务器端(数据库,内存,文件系统等),下次请求目标页面时不用再提交XSS代码。原创 2017-06-20 19:33:19 · 540 阅读 · 0 评论 -
sbustr和sbustring参数为负的情况
定义substr(start,length) 方法可在字符串中抽取从 start 下标开始的指定数目的字符。start 必需。要抽取的子串的起始下标。必须是数值。如果是负数,那么该参数声明从字符串的尾部开始算起的位置。也就是说,-1 指字符串中最后一个字符,-2 指倒数第二个字符,以此类推。length 可选。子串中的字符数。必须是数值。如果省略了该参数,那么返回从 stringOb原创 2017-10-12 17:53:40 · 842 阅读 · 0 评论 -
JS立即执行函数
一、JS立即执行函数的写法 方式1、最前最后加括号(function(){alert(1);}()); 方式2、function外面加括号(function(){alert(1);})(); 方式3、function前面加运算符,常见的是!与void!function(){alert(1);}(); void function(){转载 2017-10-31 09:44:16 · 254 阅读 · 0 评论 -
对于js继承理解
1、原型链继承(prototype) function Person(){ this.name="bob"; } Person.prototype.eat=function(){ return "food"; } function Student(){} Student.prototype=new Person();//将Perso原创 2017-06-14 14:37:27 · 222 阅读 · 0 评论 -
字符串反转几种方法
var str='123456';function reverse(str){ return str.split("").reverse().join("");}function reverse(str) { var newstr=''; for (var i = 0; i < str.length; i++) { newstr=str.charAt(i)+news原创 2017-10-16 16:03:41 · 570 阅读 · 0 评论 -
Object.keys(obj)返回参数obj可被枚举的属性
Object.keys(obj),返回一个数组,数组里是该obj可被枚举的所有属性。请看示例:示例一:function Pasta(grain, width, shape) {this.grain = grain;this.width = width;this.shape = shape;this.toString = function () {return (th转载 2016-06-06 10:56:50 · 1733 阅读 · 0 评论 -
js toFixed问题
var a=12.16;console.log(a.toFixed(0)); //12console.log(a.toFixed(1)); //12.2console.log(a.toFixed(2)); //12.16console.log(a.toFixed(3)); //12.160//console.log(12.toFixed(2)); //SyntaxError 因为.被原创 2017-06-19 12:12:51 · 839 阅读 · 0 评论 -
js delete属性
1.对象属性删除function fun(){ this.name = 'mm'; } var obj = new fun();console.log(obj.name);//mmdelete obj.name;console.log(obj.name); //undefined2.变量删除var name1 = 'lily';delete name1;原创 2017-06-19 11:48:45 · 344 阅读 · 0 评论 -
js几种设计模式
在JavaScript中,继承可以通过三种手法实现原型链继承 使用apply、call方法 对象实例间的继承。一、原型链继承 在原型链继承方面,JavaScript与java、c#等语言类似,仅允许单父类继承。prototype继承的基本方式如下:复制代码代码如下:function Parent(){}function Child(){}Chi原创 2016-07-30 09:29:05 · 1034 阅读 · 0 评论 -
js怎么绑定循环事件
信大家都遇到过类似的问题,for循环绑定完事件最后执行的时候都是最后一个事件相同,比如这段代码 Java代码 "list"> 1 2 3 4 5 var list_obj = document.getElementsByTagName('li'); for (var i = 0; i lis转载 2016-07-17 10:09:28 · 218 阅读 · 0 评论 -
对于js组合继承和寄生组合继承的理解
数组对象实例再看个数组对象的实例。当我们创建出array1这个对象的时候,array1实际在Javascript引擎中的对象模型如下:var array1 = [1,2,3];array1对象具有一个length属性值为3,但是我们可以通过如下的方法来为array1增加元素:array1.push(4); push这个方法来自于array1的__prot原创 2016-07-05 11:49:22 · 300 阅读 · 0 评论 -
JavaScript学习总结(五)原型和原型链详解
私有变量和函数在函数内部定义的变量和函数,如果不对外提供接口,外部是无法访问到的,也就是该函数的私有的变量和函数。script type="text/javascript"> function Box(){ var color = "blue";//私有变量 var fn = function() //私有函数 {转载 2016-07-04 22:55:58 · 201 阅读 · 0 评论 -
B和strong以及i和em的区别
今天看到一篇文章。因为两者所达到的效果一样,所以人们就没有太在意这两个到底有什么区别,那么今天我来告诉大家,是有区别的。它们的区别就再于一个是物理元素,一个是逻辑元素。什么是物理元素?什么是逻辑元素?物理元素所强调的是一种物理行为,比如说我把一段文字用b标记加粗了,我的意思是告诉浏览器应该给我加粗了显示这段文字,从单词的语义也可以分析得出,b是Bold(加粗)的简写,所以这个B标记原创 2016-07-04 22:13:09 · 622 阅读 · 0 评论 -
cookie,localStorage,sessionStorage三者的联系
CookieCookie 是小甜饼的意思。顾名思义,cookie 确实非常小,它的大小限制为4KB左右,是网景公司的前雇员 Lou Montulli 在1993年3月的发明。它的主要用途有保存登录信息,比如你登录某个网站市场可以看到“记住密码”,这通常就是通过在 Cookie 中存入一段辨别用户身份的数据来实现的。localStoragelocalStorage 是 HTM原创 2016-07-04 22:07:08 · 247 阅读 · 0 评论 -
整理javascript原生错误类型
1)SyntaxErrorSyntaxError是解析代码时发生的语法错误。// 变量名错误var 1a;// 缺少括号console.log 'hello');(2)ReferenceErrorReferenceError是引用一个不存在的变量时发生的错误。unknownVariable// ReferenceError: unknownV转载 2016-07-03 16:23:18 · 510 阅读 · 0 评论 -
面试题的收集
1.有一个长度未知的数组a,如果它的长度为0就把数字1添加到数组里面,否则按照先进先出的队列规则让第一个元素出队。分析:这道题主要是考核了数组的队列方法和栈方法。另外,原题还有字数限制的,只有在字数小于30并且结果正确时才可以满分。所以,我们可以使用三目运算符(: ?)来减少字数。代码如下:a.length === 0 ? a.push(1) : a.shift()转载 2016-06-07 17:01:55 · 746 阅读 · 0 评论 -
12个JavaScript技巧
使用!!操作符转换布尔值有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值。为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单。对于变量可以使用!!variable做检测,只要变量的值为:0、null、" "、undefined或者NaN都将返回的是false,反之返回的是true。比如下面的示例:f转载 2016-05-20 09:24:23 · 160 阅读 · 0 评论 -
javascript示例
一,javascript动态显示:如显示效果上图所示:如图显示鼠标放在百度谷歌等字样上市动态显示其内容明细:代码如下:head>title>/title>script type="text/javascript">function initEvent() {var links = document.getElementsByTagName("a");转载 2016-04-23 00:26:48 · 250 阅读 · 0 评论 -
Javascript中document.execCommand()的用法
document.execCommand()方法处理Html数据时常用语法格式如下:document.execCommand(sCommand[,交互方式, 动态参数])其中:sCommand为指令参数(如下例中的”2D-Position”),交互方式参数如果是true的话将显示对话框,如果为false的话,则不显示对话框(下例中的”false”即表示不显示对话框),动态参数一般为一可转载 2016-04-21 11:11:49 · 217 阅读 · 0 评论 -
汉字转换为拼音的JavaScript库
将JSPinyin剥离mootools这个JavaScript库,可以独立使用。1)一个是将汉字翻译为拼音,其中每一个字的首字母大写; pinyin.getFullChars(this.value);2)一个是可以将每一个字的拼音的首字母提取出来,是大写的形式。pinyin.getCamelChars(this.value);源码:/*---descrip转载 2016-05-26 11:25:39 · 16159 阅读 · 0 评论 -
js call 方法
应用于:Function 对象 要求 版本 5.5 调用一个对象的一个方法,以另一个对象替换当前对象。 call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 参数 thisObj 可选项。将被用作当前对象的对象。 arg1, arg2, , argN 可选项。将被传递方法参数序列。 说明 call 方法可以用来代替转载 2016-05-24 11:47:40 · 176 阅读 · 0 评论 -
函数声明和函数表达式的区别
题 1:functionfoo(){ functionbar(){ return3; } returnbar(); functionbar(){ return8; }}alert(foo());转载 2016-08-24 22:35:39 · 486 阅读 · 0 评论