javascript
涵一
做自己
展开
-
js中静态方法、原型方法、实例方法
js静态方法和原型方法的主要区别是其被访问的对象不同:构造函数的 静态方法 只能被构造函数访问,不能被其实例访问;构造函数的 原型方法 只能被其实例访问,不能被构造函数访问;请看下面的示例,将说明二者被访问的对象不同。示例:// 构造函数function People() {}// 静态方法People.say = function() { console.log("People say: Hi!")}// 原型方法People.prototype.eat = functi原创 2021-11-19 14:50:59 · 2844 阅读 · 1 评论 -
js性能优化
1、数据存储的位置会对代码性能产生影响,为避免性能问题,应注意以下几点:1) 变量在作用域中的位置越深,访问时长越长,如若多次调用深层次的变量,可以将该变量赋值给局部变量;2)嵌套的对象成员会影响性能,尽量少用。...原创 2021-04-29 17:13:17 · 267 阅读 · 0 评论 -
js中对象参数的传递
js中对象参数传递都是按值传递,当参数为对象时,传递的是对象指针,函数中改变对象参数的值时,会影响函数外的该对象。但为对象参数重新赋值时,相当于改变了其指针指向,将其指向了其它内存地址,故自然不会影响函数外的同名对象。示例1:函数内改变对象参数的值,会影响到函数外该对象var person = { name: "Lucy"}function fn(obj){ obj.name = "Lilei"}fn(person);console.log(person.name); // 输原创 2021-03-28 19:56:31 · 5234 阅读 · 0 评论 -
前端实现内容拷贝功能
点击元素实现内容拷贝功能,代码如下:<div id="copyEl" onclick="handleCopy('18288880000')">18288880000</div><script> function handleCopy(data) { var oInput = document.createElement("input"); oInput.style.border = "0 none"; oInput.style.color原创 2020-10-15 14:37:29 · 630 阅读 · 0 评论 -
js的错误类型
1、SyntaxError - 语法错误SyntaxError是解析代码时发生的语法错误。2、ReferenceError - 引用错误ReferenceError是引用不存在的变量发生的错误。1)错误1:引用不存在的变量2)错误2:被赋值的变量无效3、TypeError - 类型错误TypeError是类型使用错误。4、RangeError - 范围错误5、URIError - uri错误6、EvalError - eval错误...原创 2020-05-29 11:38:36 · 184 阅读 · 0 评论 -
前端图片压缩并上传
一、简述移动端压缩图片并且上传主要用到filereader、canvas 以及 formdata 这三个h5的api。整个过程概述为三步: 1、用户使用input file上传图片的时候,用filereader读取用户上传的图片数据(base64格式) 2、把图片数据传入img对象,然后将img绘制到canvas上,再调用canvas.toDataURL对图片进行压缩 3、获取到压...原创 2020-05-07 12:07:45 · 1556 阅读 · 0 评论 -
js防抖和节流
防抖和节流一般应用于高频事件频繁触发的场景,如窗口大小改变,下拉加载,搜索等,可有效避免事件处理函数被频繁调用造成性能差的问题。一、区别防抖:指定时间内只执行一次,但在等待时间内再次触发事件,重新开始延时。节流:指定时间内只执行一次。二、介绍1、防抖防抖应用场景 – 搜索功能,实时响应用户输入,给出相关的建议词。通常查询某个词,会频繁触发按键事件,如果每次都执行事件处理函数,不仅会产...原创 2020-01-15 17:04:16 · 3043 阅读 · 0 评论 -
base64显示为图片
base64显示为图片格式:【data:$mimeType;base64,$base64Str】参数说明:$mimeType – 指图片的格式类型(image/jpeg 、image/gif 、image/png);$base64Str – 是指图片的base64的字符串。示例:<img src="data:image/png;base64,iVBORw0KGgoAAAANS...原创 2019-12-26 16:43:07 · 444 阅读 · 0 评论 -
前端处理后端返回的二进制流文件
前端处理后端返回的二进制流文件var xhr = new XMLHttpRequest(); xhr.open("post", "/download/scoreFile", true);xhr.responseType = "blob";xhr.onload = function() { if (this.status == 200) { var url = U...原创 2019-12-20 15:54:56 · 6701 阅读 · 0 评论 -
js如何判断当前页面是否处于激活状态
可通过document.hidden来判断当前页面是否处于激活状态,具体实现方式如下:var hiddenProperty = 'hidden' in document ? 'hidden' : 'webkitHidden' in document ? 'webkitHidden' : 'mozHidden' in document ? 'mozHidden' :...原创 2019-05-08 18:12:48 · 9324 阅读 · 0 评论 -
手机屏幕分辨率:物理分辨率和逻辑分辨率
手机屏幕分辨率有两个术语:物理分辨率和逻辑分辨率。那么二者的区别是什么?这里我们做下简单说明。正如俗话所说物理分辨率是硬件所支持的,逻辑分辨率是软件可以达到的。物理分辨率是手机显示屏实际存在的分辨率,而逻辑分辨率是我们肉眼感知的实际尺寸。通过代码(window.screen.width)获取到的屏幕宽高便是逻辑分辨率。这里列举了一些机型的物理和逻辑分辨率,可以参照对比下:...原创 2019-01-24 12:13:48 · 7077 阅读 · 0 评论 -
pageshow 和 pagehide
一、load、unload和pagehide、pageshow的主要应用load 和 unload 事件监听web页面的进入和离开,一般用于页面的首次加载、刷新和关闭等操作的监听;pageshow 和 pagehide 事件多用于监听浏览器的前进和后退等。二、pageshow和load事件的区别1、pageshow和load区别:pageshow 事件类似于 load 事件,load 事...原创 2019-03-06 17:27:06 · 9545 阅读 · 1 评论 -
js中call和apply的模拟实现
看到该文章,表示你对call和apply的使用已经有所了解,call和apply的调用都是用于改变函数的this指向的。call模拟实现call和apply功能一样,我们就不一一举例,这里以call的正常使用和模拟实现为例。示例:call的正常使用var key = "windowK";var obj = { key : "objK"}function fn(name,age...原创 2019-06-02 20:23:05 · 348 阅读 · 0 评论 -
js中使用btoa和atob进行Base64的编码和解码
window.atob(string)用来解码一个已经被base-64编码过的字符串。(参数string: 必需是一个通过 btoa() 方法编码的字符串)window.btoa(string)用来创建一个 base-64编码的字符串。示例://编码示例window.btoa('&lt;script src="test.js"&gt;&lt;/script&gt;'); 输出:"原创 2019-03-08 18:09:35 · 5094 阅读 · 0 评论 -
JS注意事项
1、如果数组中的某一项的值是null 或者undefined,那么该值在join()、toLocaleString()、toString()方法返回的结果中以空字符串表示。原创 2019-05-15 14:44:08 · 571 阅读 · 0 评论 -
ES6与ES5的差别
1、顶层对象顶层对象,在浏览器环境指的是window对象,在 Node 指的是global对象。ES5 之中,顶层对象的属性与全局变量是等价的。var x1=1;console.log(window.x1); //1ES6 为了改变这一点,一方面规定,为了保持兼容性,var命令和function命令声明的全局变量,依旧是顶层对象的属性;另一方面规定,let命令、const命令、cla...原创 2019-05-28 10:52:36 · 167 阅读 · 0 评论 -
对象拷贝
对象拷贝包括浅拷贝和深拷贝,修改浅拷贝的对象会影响原对象;修改深拷贝的对象对原对象没有影响。1、浅拷贝方式1:对象赋值新对象变量和原对象变量存储的是相同引用地址,它们指向同一对象,故改变任一对象,另外一对象都会改变。var person = { name : "Lucy", age : 20, sex : "woman", likeColors : ["white","black"...原创 2019-05-28 18:49:56 · 352 阅读 · 0 评论 -
call、apply和bind的区别
call、apply和bind都是用于改变方法中this指向的。var x = "window_x";var obj = { x : "obj_x", fn : function(y){ console.log(this.x + " ; " + y); }}obj.fn(1); //obj_x ; 1var fn = obj.fn;fn(1);...原创 2019-05-30 00:40:10 · 5048 阅读 · 0 评论 -
js中bind的模拟实现
bind的作用bind() 方法会创建一个新函数。当这个新函数被调用时,bind() 的第一个参数将作为它运行时的this,之后的一序列参数将会在传递的实参前传入作为它的参数。(来自于 MDN )var key = "windowK";var obj = { key : "objK"}function fn(name,age){ console.log("name=...原创 2019-06-04 10:24:31 · 863 阅读 · 0 评论 -
CommonJS、AMD和CMD区别
commonjs、AMD、CMD均是js的模块规范,那么三者的区别是什么呢?这里对三者作简短介绍:1、commonjsCommonJS定义的模块分为:{模块引用(require)}、 {模块定义(exports)} 、{模块标识(module)}。 require()用来引入外部模块;exports对象用于导出当前模块的方法或变量,唯一的导出口;module对象就代表模块本身。浏览器不兼容Comm原创 2017-06-02 12:38:38 · 1196 阅读 · 0 评论 -
HTML5 中download属性
最近接了个需求:要求点击下载,直接保存图片。开始认为图片下载功能是手机客户端才支持的,后来搜罗了下发现html5有这样的属性可以支持下载,废话不多说,直奔主题吧。html5 中<a>标签新增download属性,为<a>标签添加该属性可实现下载功能。语法: <a href="下载地址" download[=名字]>下载</a> //备注:do...原创 2019-03-05 17:54:56 · 1063 阅读 · 0 评论 -
解决ios10及以上 Safari 无法禁止缩放问题
一般情况下,我们用meta 标签的viewport属性来禁止页面缩放,示例:<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />但这种禁止缩放方式在ios10及以上safari的无效,没关系,我们还有其它方式来解决这个问题...原创 2019-01-16 11:46:40 · 2212 阅读 · 0 评论 -
encodeURIComponent和URLEncoder.encode的区别
二者的区别:1、 encodeURIComponent(str) :参数:str - 字符串;js(前端)编码方法;对应的解码方法:decodeURIComponent(str);编码差异:1 ) 中文解码 时,中文编码必须是utf-8才能正常解码;2 ) !’()~对这个五个符号不进行编码encodeURIComponent("!'()~");//!'()~输出结果:...原创 2018-12-27 17:48:03 · 3718 阅读 · 0 评论 -
Js的reduce()方法
Js 数组reduce()方法应用一个函数针对数组的两个值(从左到右),以减至一个值。 语法:array.reduce(callback[, initialValue]) 参数说明: 1)callback是调用方法; 2)initialValue是callback初次调用时的第一个参数值。示例1--数组求和: [1,2,3,4,5].r原创 2017-11-21 18:03:08 · 8016 阅读 · 0 评论 -
js eval()
什么是eval()eval(‘字符串’) 把其中的字符串解析成js代码并运行。示例:eval('2+2') //4eval('var x=6,y=6;x*y') //36注:JSON字符串转换为对象的时候可以用eval,var obj =eval(‘(‘+ 字符串 +’)’)eval()缺点eval()耗性能(一次解析js语句,一次执行); eval()不便于打断点,因此不易调试; eval原创 2017-07-31 16:55:17 · 546 阅读 · 0 评论 -
js实现内容滚动效果
首先说下实现内容滚动效果的思路:在一块区域内实现内容滚动效果,要求内容轮播,那么如何实现轮播呢?我们将原内容复制一份放置其后面,当原内容滚动完成(即父层scrollTop等于原内容区高度时),我们将父层scrollTop设置为0,此时又从原内容开始滚动。如果浏览者想看内容时,但内容一直再滚动怎么办呢?我们可以通过设置onmouseover事件来控制,当用户把鼠标悬停至内容区时,停止滚动;当鼠标移开时原创 2017-06-26 18:22:20 · 7644 阅读 · 0 评论 -
scrollTop无效问题
元素设置srcollTop的值无效,需要为该元素添加高度后,即可生效!原创 2017-06-26 14:42:31 · 8177 阅读 · 0 评论 -
Ajax关于readyState和status的讨论
熟悉web开发的程序员想必对Ajax也不会陌生。现在已经有很多js框架封装了ajax实现,例如JQuery的ajax函数,调用起来非常方便。当然本文不打算讲框架的使用,我们将从Ajax的javascript源码实现开始。Ajax源码实现var getXmlHttpRequest = function () { if (window.XMLHttpRequest) { //主流转载 2017-06-06 15:36:00 · 715 阅读 · 0 评论 -
js对全角与半角介绍及相互转化
什么是全角和半角?全角:是一种电脑字符,是指一个全角字符占用两个标准字符(或两个半角字符)的位置。全角占两个字节。汉字字符和规定了全角的英文字符及国标GB2312-80中的图形符号和特殊字符都是全角字符。在全角中,字母和数字等与汉字一样占据着等宽的位置。半角:是指一个字符占用一个标准的字符位置。半角占一个字节。半角就是 ASCII 方式的字符,在没有汉字输入法起作用的时候,输入的字母、数字和字符都是转载 2017-05-25 11:38:43 · 3520 阅读 · 0 评论 -
call与apply的区别
call与apply的作用一样,都可以调用一个对象的一个方法,用另一对象替换当前对象。预知两者的区别,先要了解两者的使用方法: call用法:obj1.call(obj2[,arg1[,arg2[,…argn]]]); apply用法:obj1.apply(obj2[,argArray]);两者不同之处在于传入的参数形式不一样: call的参数是一个新对象,和一个参数数组; apply的参数原创 2017-04-15 17:24:52 · 354 阅读 · 0 评论 -
es6箭头函数
箭头函数是用箭头(=>)标识的,是es6的新特性。 闲话就不多说了,直接上代码吧!这里我们拿箭头函数和普通函数做对比,代码如下: 示例1:无参数函数*箭头函数:* ()=>1+1;*等同于普通函数*: function(){return 1+1}示例2:有参函数箭头函数: (a,b)=>a*b等同于普通函数: funct原创 2017-04-15 16:49:20 · 502 阅读 · 0 评论 -
如何把类数组转为数组
首先说下什么是类数组:类数组对象拥有length属性,且可以在类数组对象上应用数组。举个类数组的的例子:getElementByTagName(‘div’)获取的dom序列为类数组,方法参数也为是类数组。数组概念就不再赘述了,下面是类数组转为数组的两种实现方法:常用实现方法: Array.prototype.slice.call(类数组)es6实现方法: Array.f...原创 2018-03-14 18:19:05 · 804 阅读 · 0 评论 -
javascript的垃圾回收机制与内存管理
一、垃圾回收机制—GCJavascript具有自动垃圾回收机制(GC:Garbage Collecation),也就是说,执行环境会负责管理代码执行过程中使用的内存。原理:垃圾收集器会定期(周期性)找出那些不在继续使用的变量,然后释放其内存。JavaScript垃圾回收的机制很简单:找出不再使用的变量,然后释放掉其占用的内存,但是这个过程不是实时的,因为其开销比较大,所以垃圾回收器会按...转载 2018-03-14 19:23:40 · 151 阅读 · 0 评论 -
javascript 数据类型转换规则
原创文章,转载请标记出处:1、其它类型转为逻辑类型null 转为逻辑类型为false; undefined 转为逻辑类型为false; NaN 转为逻辑类型为false;(注:NaN为特殊的number类型)number类型中 0转为逻辑类型为false,非0为true;string类型中 空字符转为逻辑类型为false,非空字符为true;object类型(除n...原创 2018-05-16 17:05:10 · 298 阅读 · 0 评论 -
js中new函数后带括号和不带括号的区别
用new创建构造函数的实例时,通常情况下new 的构造函数后面需要带括号(譬如:new Parent())。 有些情况下new的构造函数后带括号和不带括号的情况一致,譬如:function Parent(){ this.num = 1;}console.log(new Parent());//输出Parent对象:{num:1}console.log(new Parent);/...原创 2018-04-23 15:06:13 · 4873 阅读 · 1 评论 -
macrotask和microtask
事件循环的机制: 步骤1)执行macrotask 队列中最早的那个任务 task ,然后移出; 步骤2)执行 microtask 队列中所有可用的任务,然后移出; 上面两个的步骤是一个事件循环,重复以上步骤实现事件循环。范围所属: macrotasks: 代码块、setTimeout、setInterval、setImmediate、I/O、UI渲染; microtasks: pro...原创 2018-04-17 19:24:58 · 564 阅读 · 0 评论 -
Js对象的属性类型
Js有两种属性类型:‘数据属性’和‘访问器属性’。数据属性一般用于直接存储数据数值;访问器属性不能直接定义,必须使用Object.defineProperty()。修改属性的特性必须使用Object.defineProperty()。数据属性数据属性包含一个数据值的位置,在这个位置可以读取和写入值。数据属性有4 个描述其行为的特性:[[Configurable]]:表...原创 2018-04-11 17:27:59 · 2740 阅读 · 0 评论 -
使用正则表达式比较两字符串的不同
//利用正在exec方法function fn(str1,str2){ var re = new RegExp("[^"+str1+"]|[^"+str2+"]","g"); var arr = [],tmp=null; while((tmp=re.exec(str1+str2))!=null){ arr.push(tmp[0]) } re...原创 2018-04-03 11:39:08 · 3619 阅读 · 0 评论 -
js之slice()方法
slice()通过索引位置获取新的数组,该方法不会修改原数组,只是返回一个新的子数组。用法:arrayObj.slice(start,end) arrayObj - 原始数组; start - 必填;设定新数组的起始位置;如果是负数,则表示从数组尾部开始算起(-1 指最后一个元素,-2 指倒数第二个元素,以此类推)。 end - 可选;设定新数组的结束位置;如果不填写该参数,默认到...原创 2018-03-12 15:57:39 · 112249 阅读 · 2 评论 -
for循环中的setTimeout问题
原创内容,转载请标记出处:https://blog.csdn.net/yihanzhi/article/details/79565628//for循环1for (var i = 0; i < 3; i++) { setTimeout(function () { console.log(i); },0);}//for循环2for (var i...原创 2018-03-15 11:31:46 · 2782 阅读 · 0 评论