javascript
文章平均质量分 74
夜码狂农
这个作者很懒,什么都没留下…
展开
-
深度解读Promise.prototype.finally
由一个问题引发的血案:手写源码实现Promise.prototype.finally。我们知道,对于promise来讲,当状态敲定,无论状态兑现或拒绝时都需要调用的函数,可以使用Promise.prototype.finally的回调来实现。那么如何手写实现Promise.prototype.finally呢?问题恐怕并不很简单,本文主要做finally的细节和实现做一些详细的解读。原创 2023-08-22 18:11:35 · 893 阅读 · 0 评论 -
深度解读thenable
在学习promise时,我们经常会遇到thenable一词。关于thenable,目前的资料解读不够通俗易懂,又或者脉络不够清晰,本文主要对thenable进行详细剖析,以便各位参考。笔者希望你能够仅凭这一篇文章,便能深度掌握该知识点。原创 2023-08-22 11:29:59 · 577 阅读 · 0 评论 -
谈forEach中使用async await踩坑
js实现异步请求的顺序问题原创 2022-10-29 20:35:59 · 2201 阅读 · 2 评论 -
彻底搞懂UTC时间
我们可能经常听说UTC时间这一名词,但不知道它代表了什么意思,什么时候该用,前后端通信时使用UTC时间意味着什么。为什么要使用UTC时间对于前端同学,即便经常使用moment进行各种时间转换,也可能并不清楚UTC时间是什么,因为如果不涉及到跨国家和地区,实际上的确用不到UTC时间。UTC时间的英文全称:Universal Time Coordinated,中文名称:协调世界时。我们可以通俗的理解为,这个时间是全世界通用的,即全世界都公用的一个时间。这样,就很容易理解了,UTC时间实际上反映了原创 2022-01-22 15:50:55 · 37391 阅读 · 0 评论 -
JavaScript使用H5 FileReader和Image对象获取本地图片的分辨率
业务场景试想这样的应用场景:当我们上传本地图片时,需要校验图片的分辨率,只有水平分辨率不大于1920、垂直分辨率不大于1080的图片才允许上传。后端处理方案显然,我们是可以将分辨率校验交给后端的,这样的问题在于,后端校验需要前端先发起ajax请求,并且后端校验也需要一定的处理时间,就整体体验而言,用户等待时间较长,不利于用户体验。因此还是推荐前端校验,直接给出结果。难点所在对于type='file'的input框,在其change事件中,我们可以直接拿到file对象,包含了name、siz原创 2020-05-15 17:27:45 · 6327 阅读 · 1 评论 -
JS实现元素的全屏、退出全屏功能
在实际开发中,我们很可能需要实现某一元素的全屏和退出全屏功能,如canvas。所幸的是,js提供了相关api用来处理这一问题,只需简单的调用requestFullScreen、exitFullScreen即可。但这两个api一般而言需要考虑其兼容性问题,那么就需要额外封装一下。笔者参考相关资料,结合自身实践,最终整理出以下封装函数,理念虽然没有特别之处,但这种封装的写法却属于一种微原创。以下经过...原创 2019-12-11 09:46:18 · 883 阅读 · 0 评论 -
原生JS中获取位置的方案总结
clientY: 鼠标当前位置 相对于 浏览器可视区域顶部 的位置;pageY: 鼠标当前位置 相对于 文档顶部的位置;screenY: 鼠标当前位置 相对于 屏幕顶部的位置;疑点1:clientY和pageY的区别?当文档高度和浏览器可视区域高度一致时,两者的取值是相同的。文档高度和浏览器可视区域高度不一致时,页面将出现滚动条,这时:(1)若滚动条尚未滚动,则浏览器可视区域...原创 2019-10-28 14:33:33 · 263 阅读 · 0 评论 -
前端跨域解决方案: JSONP的通俗解说和实践
对于前端开发者而言,跨域是一个绕不开的话题。前端开发者有必要亲自去验证各种跨域方案,深入每种方案的细节。本文将对前端的一种“鼎鼎大名”的跨域方案——jsonp的原理进行简单介绍,然而,这不是重点,重点是本文将以实际代码的形式去演示jsonp是如何工作的。问题引入:同源策略什么是同源?文档的来源相同,即协议、主机及端口均相同。假设有一台域名是http://www.aaa.com的服务器,...原创 2019-04-08 22:15:21 · 488 阅读 · 0 评论 -
逻辑与、或、非中至少一个操作数不是布尔值的情况讨论
在与运算的两个操作数都是布尔值时,很容易就能得出结果。但假使至少有一个操作数不是布尔值呢?一、第二个操作数不是布尔值如果第二个操作数不是布尔值,如下:true&&{a:1};//{a:1}false&&{a:1};//falseconsole.log(true && null);//nullconsole.log(false...原创 2019-10-13 13:59:28 · 884 阅读 · 0 评论 -
不同类型间使用相等操作符"=="的比较结果
在不同类型操作数之间,使用”==”来比较时,常常显得混乱和复杂。本文将试图对此进行一番分析和总结。一、有一个操作数是布尔值我们在浏览器中输入以下示例:false==0;//truefalse==1;//falsefalse==2;//falsetrue==0;//falsetrue==1;//truetrue==2;//falsetrue==NaN;//false...原创 2019-10-13 13:59:35 · 794 阅读 · 0 评论 -
谈谈JavaScript中的变量、指针和引用
1、变量我们可能产生这样一个疑问:编程语言中的变量到底是什么意思呢? 事实上,当我们定义了一个变量a时,就是在存储器中指定了一组存储单元,并将这组存储单元命名为a。变量a的值实际上描述的是这组存储单元中存放的具体信息。 例如,在JS中var a;a=10;第一个语句在存储器中指定了一组存储单元,并命名为a; 第二个语句在这组存储单元中存储了数字10。 变量a的值为10实际...原创 2019-10-13 13:59:46 · 6479 阅读 · 4 评论 -
由JS数组去重说起
一、问题描述: var array=[1,45,3,1,4,67,45],请编写一个函数reDup来去掉其中的重复项,即 reDup(array); console.log(array);//[1,45,3,4,67]二、遍历的思路首先,我们很自然想到,最终array数组得到了改变,我们可以使用引用类型的按值传递在内部改变arr的值。 因此,我们可以加入一个形式...原创 2019-10-13 14:00:25 · 235 阅读 · 0 评论 -
handlebars模板引擎使用初探1
谈到handlebars,我们不禁产生疑问,为什么要使用这样的一个工具呢?它究竟能为我们带来什么样的好处?如何使用它呢?一、handlebars可以干什么?首先,我们来看一个案例: 有这样的html结构: <div class="demo"> <h1>name</h1> &l...原创 2019-10-13 14:00:16 · 1725 阅读 · 0 评论 -
两种方法直接删除数组中特定值的项(JavaScript)
一、问题详情: 直接删除意为原数组需要被改变,而不是得到另一个数组。 二、JavaScript实现(一)巧用数组的push( )、shift( )方法 function del(arr,num) { var l=arr.length; for (var i = 0; i < l; i++) { if (ar原创 2019-10-12 09:28:39 · 5623 阅读 · 0 评论 -
使用Node.js的http-serve搭建本地服务器
为什么要使用它? 首先,类似于vue-cli创建的项目,都能够实现浏览器中自动刷新,实时查看项目效果。其中的原理在于,webpack这样的工具启动了一个本地服务器,将本机当作一台服务器,这样在浏览器中输入特定url(如http:localhost...)便相当于访问一台服务器的文件,这里的服务器比较特殊就是本机。 试想,如果我们的前端项目中,不采用这种方式,要查看一个html文件的运行...原创 2019-10-13 14:02:07 · 5621 阅读 · 0 评论 -
简要理解CommonJS规范
写在前面: 一个文件就是一个模块。 另外本文中的示例代码需要在node.js环境中方可正常运行,否则将出现错误。事实上ES6已经出现了模块规范,如果使用ES6的模块规范是无需node.js环境的。因此,需要将commonJS规范和ES6的模块规范区分开来。一、为什么制定CommonJS规范? 在后端,JavaScript的规范远远落后并且有很多缺陷,这使得难以使用JavaSc...原创 2019-10-12 09:29:16 · 23888 阅读 · 5 评论 -
原生JS设计轮播图
什么是轮播图? 比如淘宝首页这样:一、需求分析: 窗口:显示图片的固定位置,不管切换哪种图,始终在窗口中呈现。 1、切换按钮: 在窗口中,有两个固定的按钮,分别实现查看上一张图片和下一张图片的功能。 2、跳转按钮: 轮播窗口底部,有一排圆形按钮,点击对应按钮,将出现对应的图片,同时当前按钮高亮。如,点击第五个按钮,将出现第五张图片。 3、自动播放: 当鼠标不在窗口上时,自动轮播原创 2019-10-12 09:28:49 · 378 阅读 · 0 评论 -
啃算法:归并排序及JavaScript实现
在学习归并排序之前,有必要了解分治法,因为归并排序正是应用了分治模式。(以下部分摘录了《算法导论》的定义。)一、分治法1、思想: 将原问题分解为几个规模较小但类似于原问题的子问题,递归地求解这些子问题,然后合并这些子问题的解来建立原问题的解。2、三个步骤 分治法在每层递归时有三个步骤: *(1)分解:* 分解原问题分解为若干子问题,这些子问题是原问题的规模较小的实例。 举例:原创 2019-10-12 09:28:54 · 344 阅读 · 0 评论 -
JavaScript实现折半查找(二分查找)
一、问题描述: 在一个升序数组中,使用折半查找得到要查询的值的索引位置。如:var a=[1,2,3,4,5,6,7,8,9];search(a,3);//返回2search(a,1);//左边界,返回0search(a,9);//右边界,返回8search(a,0);//比最小的值还小,返回"您查找的数值不存在"search(a,10);//比最大的值还大,返回"您查找的数值不存原创 2019-10-12 09:28:12 · 2590 阅读 · 0 评论 -
JavaScript实现插入排序
一、插入排序简介:想象我们斗地主,摸排阶段,手里的牌都按照从小到大排序。如果每摸一张牌,我们就把他插入合适的位置,使得它比后面位置的牌小,比前面位置的牌大或者相等。类似这样的一种排序方法就是插入排序: 在一个数组a中,我们要实现升序排序,假设我们前面已经对a[0]到a[k]排好序,现在需要将a[k+1]的值放入合适的位置。(为简便,此处不讨论k的取值范围,只是用它代表数组的某个位置)1、首先,我们原创 2019-10-12 09:28:23 · 628 阅读 · 0 评论 -
JavaScript实现冒泡排序
一、冒泡排序简介: 假设有一个数组a,我们想象成有一个班级名叫a班,现在全班随意排成一排,排头的位置是a[0],排尾的位置是a[a.length-1]。但高矮顺序不是有序的,我们想从矮到高排,排头最矮,排尾最高。下面是一种方法: 第一轮: 1、首先,排头和旁边的队员比较,如果比旁边队员高,两个人交换位置;不比旁边队员高,则不变。经过这第一次比较,可以肯定站在a[1]位置的肯定是a[0]、a[1原创 2019-10-12 09:28:17 · 364 阅读 · 0 评论 -
JavaScript实现选择排序
一、选择排序简介 冒泡排序、插入排序、选择排序合称为简单排序。下面是选择排序的思想:假设有一个数组a,我们想象成有一个班级名叫a班,现在全班随意排成一排,排头的位置是a[0],排尾的位置是a[a.length-1]。但高矮顺序不是有序的,我们想从矮到高排,排头最矮,排尾最高。选择排序是这样工作的:第一轮:(1)a[1]位置队员与a[0]位置队员比较,如果比a[0]位置队员矮,就把a[1]的位置记住原创 2019-10-12 09:28:28 · 572 阅读 · 0 评论 -
一句话总结JS构造函数、原型和实例的关系
”每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,实例都包含一个指向原型对象的内部指针。” ——此段话摘自《JavaScript高级程序设计》。下面结合实例简要分析:一、每个构造函数都有一个原型对象 比如: 可以看到,每个构造函数本身都是一个对象,它有一个属性叫做prototype,它是一个对象。二、原型对象都包含一个指向构造函数原创 2019-10-12 09:29:07 · 6497 阅读 · 0 评论 -
bind()函数的深入理解及两种兼容方法分析
在JavaScript中,bind()函数仅在IE9+、Firefox4+、Chrome、Safari5.1+可得到原生支持。本文将深入探讨bind()函数并对两种兼容方法进行分析比较。由于本文将反复使用用到原型对象、原型、prototype、[[proto]],为使文章更加易读不致引起混淆,这里将对几者进行明确区分: 1、原型:每个函数本身也是一个对象,作为对象的函数拥有一个属性叫做原型...原创 2019-10-12 09:28:05 · 5018 阅读 · 0 评论