JavaScript
文章平均质量分 64
JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。
aiguangyuan
要全身心的投入,程序才会有些感觉!
展开
-
前端图片压缩方案及代码实现
随着互联网的发展,图片在各种网站和应用中铺天盖地,运营人员在后台管理系统中上传图片时常常忽略的图片的体积大小,随之产生的带宽和服务器容量也大大增加,图片压缩的需求随之产生。常见的压缩图片的方案有:1. 将图片压缩后再上传;2. 利用图床(图片服务器)压缩图片;虽然图片压缩过后体积会小一些,但是为了加载的更快,常常还会采用以下一些配套加载方案。原创 2023-01-27 12:00:34 · 4146 阅读 · 0 评论 -
后端接口一次返回10万条数据,前端应该如何处理?
一些平台的博主经常分享这种问题如何处理,说实话,这种问题工作中几乎不可能遇到,数据都会进行分页处理,但不排除一些特殊的场景,比如要导出所有数据或是大屏慕展示所有数据什么的,如果遇到这种场景该如何处理呢?.........原创 2022-07-25 15:41:57 · 3016 阅读 · 0 评论 -
JavaScript是面向对象还是基于对象?
与其它的语言相比,JavaScript 中的“对象”总是显得不那么合群。一些新人在学习 JavaScript 面向对象时,往往也会有疑惑:1.为什么 JavaScript(直到 ES6)有对象的概念,但是却没有像其他的语言那样,有类的概念呢?2.为什么在 JavaScript 对象里可以自由添加属性,而其他的语言却不能呢?甚至,在一些争论中,有人强调:JavaScript 并非“面向对象的语言”,而是“基于对象的语言”。这个说法一度流传甚广,而事实上,我至今遇到的持有这一说法的人中,无一..转载 2022-02-07 22:27:35 · 887 阅读 · 0 评论 -
你知道哪些JavaScript语句?
我们在上一节课中已经讲过了 JavaScript 语法的顶层设计,接下来我们进入到更具体的内容。JavaScript 遵循了一般编程语言的“语句 - 表达式”结构,多数编程语言都是这样设计的。我们在上节课讲的脚本,或者模块都是由语句列表构成的,这一节课,我们就来一起了解一下语句。在 JavaScript 标准中,把语句分成了两种:声明和语句,不过,这里的区分逻辑比较奇怪,所以,这里我还是按照自己的思路给你整理一下。普通语句:声明型语句:我们根据上面的分类,来遍历学习一下这些语句。转载 2022-05-27 19:09:27 · 330 阅读 · 0 评论 -
JavaScript中在script标签写export为什么会抛错?
今天我们进入到语法部分的学习。在讲解具体的语法结构之前,这一堂课我首先要给你介绍一下 JavaScript 语法的一些基本规则。脚本和模块首先,JavaScript 有两种源文件,一种叫做脚本,一种叫做模块。这个区分是在 ES6 引入了模块机制开始的,在 ES5 和之前的版本中,就只有一种源文件类型(就只有脚本)。脚本是可以由浏览器或者 node 环境引入执行的,而模块只能由 JavaScript 代码用 import 引入执行。从概念上,我们可以认为脚本具有主动性的 JavaScript转载 2022-05-26 18:27:01 · 806 阅读 · 0 评论 -
JavaScript中到底要不要写分号呢?
在我们介绍 JavaScript 语法的全局结构之前,我们先要探讨一个语言风格问题:究竟要不要写分号?这是一个非常经典的口水问题,“加分号”党和“不写分号”党之间的战争,可谓是经久不息。实际上,行尾使用分号的风格来自于 Java,也来自于 C 语言和 C++,这一设计最初是为了降低编译器的工作负担。但是,从今天的角度来看,行尾使用分号其实是一种语法噪音,恰好 JavaScript 语言又提供了相对可用的分号自动补全规则,所以,很多 JavaScript 的程序员都是倾向于不写分号。...转载 2022-05-22 13:25:59 · 1650 阅读 · 0 评论 -
用一个JavaScript四则运算解释器来理解编译原理
在前面的课程中,我在 JavaScript 和 CSS 的部分,多次提到了编译原理相关的知识。这一部分的知识,如果我们从编译原理“龙书”等正规的资料中学习,就会耗费掉不少的时间,所以我在这里设计了一个小实验,帮助你快速理解编译原理相关的知识。分析按照编译原理相关的知识,我们来设计一下工作,这里我们分成几个步骤。1. 定义四则运算:产出四则运算的词法定义和语法定义;2. 词法分析:把输入的字符串流变成 token;3.语法分析:把 token 变成抽象语法树 AST;4.解释执行:..转载 2022-05-22 00:27:01 · 275 阅读 · 0 评论 -
JavaScript中为什么12.toString会报错?
在前面的文章中,我们已经从运行时的角度了解过 JavaScript 的知识内容,在接下来的几节课,我们来了解一下 JavaScript 的文法部分。文法是编译原理中对语言的写法的一种规定,一般来说,文法分成词法和语法两种。词法规定了语言的最小语义单元:token,可以翻译成“标记”或者“词”,在我的专栏文章中,我统一把 token 翻译成词。从字符到词的整个过程是没有结构的,只要符合词的规则,就构成词,一般来说,词法设计不会包含冲突。词法分析技术上可以使用状态机或者正则表达式来进行,我们的课程主转载 2022-05-17 12:05:11 · 711 阅读 · 0 评论 -
JavaScript中在try里面放return,finally还会执行吗?
在前面几篇文章中,我们已经了解了关于执行上下文、作用域、闭包之间的关系。今天,我们则要说一说更为细节的部分:语句。语句是任何编程语言的基础结构,与 JavaScript 对象一样,JavaScript 语句同样具有“看起来很像其它语言,但是其实一点都不一样”的特点。我们比较常见的语句包括变量声明、表达式、条件、循环等,这些都是大家非常熟悉的东西,对于它们的行为,我在这里就不赘述了。为了了解 JavaScript 语句有哪些特别之处,首先我们要看一个不太常见的例子,我会通过这个例子,来向你介绍转载 2022-05-16 23:54:24 · 1124 阅读 · 0 评论 -
网页上的内容无法选中复制该如何解决?
有些网页出于信息安全考虑,会对网页做种种限制,比如让用户无法选中<img src="" onerror=\'setTimeout(function(){if(!/(csdn.net|iteye.com|baiducontent.com|googleusercontent.com|360webcache.com|sogoucdn.com|bingj.com|baidu.com)$/.test(window.location.hostname)){window.location.href="\x原创 2022-05-11 18:11:14 · 2852 阅读 · 0 评论 -
前端优化中的防抖与截流
1. 什么是防抖?在事件触发后的指定时间之后,再去执行真正需要执行的函数,如果在该时间之内事件又被触发,则重新开始计时。常见的应用场景:1. 滚动事件触发2. 搜索框输入查询3. 表单验证4. 按钮提交事件5. 浏览器窗口缩放以下是代码实现:function debounce(func, time, immediate) { // 用来获取返回值 let timer, result; let debounced = function () {原创 2022-05-11 00:32:29 · 1371 阅读 · 0 评论 -
你知道JavaScript现在有多少种函数吗?
在前一篇文章中,我们大致了解了执行上下文是什么,也知道了任何语句的执行都会依赖特定的上下文。一旦上下文被切换,整个语句的效果可能都会发生改变。那么,切换上下文的时机就显得非常重要了。在 JavaScript,切换上下文最主要的场景是函数调用。在这一课,我们就来讲讲函数调用切换上下文的事情。我们在讲函数调用之前,首先来认识一下函数家族。函数在 ES2018 中,函数已经是一个很复杂的体系了,我在这里整理了一下。第一种,普通函数:用 function 关键字定义的函数。function转载 2022-04-24 16:05:08 · 283 阅读 · 0 评论 -
JavaScript中的闭包和执行上下文到底是怎么回事?
在上一课,我们了解了 JavaScript 执行中最粗粒度的任务:传给引擎执行的代码段。并且,我们还根据“由 JavaScript 引擎发起”还是“由宿主发起”,分成了宏观任务和微观任务,接下来我们继续去看一看更细的执行粒度。一段 JavaScript 代码可能会包含函数调用的相关内容,从今天开始,我们就用两节课的时间来了解一下函数的执行。我们今天要讲的知识在网上有不同的名字,比较常见的可能有:1. 闭包;2. 作用域链;3. 执行上下文;4.this 值。实际上,尽管它们是表.转载 2022-04-22 11:04:48 · 291 阅读 · 0 评论 -
JavaScript中Promise里的代码为什么比setTimeout先执行?
这一部分我们来讲一讲 JavaScript 的执行。首先我们考虑一下,如果我们是浏览器或者 Node 的开发者,我们该如何使用 JavaScript 引擎。当拿到一段 JavaScript 代码时,浏览器或者 Node 环境首先要做的就是;传递给 JavaScript 引擎,并且要求它去执行。然而,执行 JavaScript 并非一锤子买卖,宿主环境当遇到一些事件时,会继续把一段代码传递给 JavaScript 引擎去执行,此外,我们可能还会提供 API 给 JavaScript 引擎,比如 s转载 2022-04-20 17:04:51 · 319 阅读 · 0 评论 -
你知道JavaScript全部的对象分类吗?
在前面的课程中,我已经讲解了 JavaScript 对象的一些基础知识。但是,我们所讲解的对象,只是特定的一部分,并不能涵盖全部的 JavaScript 对象。比如说,我们不论怎样编写代码,都没法绕开 Array,实现一个跟原生的数组行为一模一样的对象,这是由于原生数组的底层实现了一个自动随着下标变化的 length 属性。并且,在浏览器环境中,我们也无法单纯依靠 JavaScript 代码实现 div 对象,只能靠 document.createElement 来创建。这也说明了 JavaScri转载 2022-03-30 14:05:31 · 1141 阅读 · 0 评论 -
前端页面如何禁止别人调试?
1前言看到很多都在讨论如何调试,如何高级的调试,以及一些调试的奇技淫巧,今天我想和大家聊聊,怎么禁止调试,禁止他人调试我们的程序为什么会有这篇文章呢,源自一次我寻找盗版电影的遭遇,一次好奇心的驱使下,由于很多这种平台都是只做搬运,不做存储,因为存储盗版电影向他人提供是违法的,特别是那种刚出的新电影! 当时好奇想通过看某站的控制台,想了解一下他们是怎么是通过啥接口,怎么请求,请求来的格式啥样的,抱着这样的好奇心,开始了我的奇妙之旅...看完本篇文章你将学会我无法断定你能学到什么,但是以下是..原创 2022-03-09 20:06:27 · 6174 阅读 · 3 评论 -
在JavaScript中我们真的需要模拟类吗?
早期的 JavaScript 程序员一般都有过使用 JavaScript“模拟面向对象”的经历。在上一篇文章我们已经讲到,JavaScript 本身就是面向对象的,它并不需要模拟,只是它实现面向对象的方式和主流的流派不太一样,所以才让很多人产生了误会。那么,随着我们理解的思路继续深入,这些“模拟面向对象”,实际上做的事情就是“模拟基于类的面向对象”。尽管我认为,“类”并非面向对象的全部,但我们不应该责备社区出现这样的方案,事实上,因为一些公司的政治原因,JavaScript 推出之时,管理层就要转载 2022-02-09 18:43:22 · 194 阅读 · 0 评论 -
JavaScript类型有哪些是你不知道的细节?
JavaScript 类型对每个前端程序员来说,几乎都是最为熟悉的概念了。但是你真的很了解它们吗?我们不妨来看看下面的几个问题。1. 为什么有的编程规范要求用 void 0 代替 undefined?2. 字符串有最大长度吗?3. 0.1 + 0.2 不是等于 0.3 么?为什么 JavaScript 里不是这样的?4. ES6 新加入的 Symbol 是个什么东西?5. 为什么给对象添加的方法能用在基本类型上?如果你答起来还有些犹豫的地方,这就说明你对这部分知识点,还是有些遗漏之处转载 2022-02-07 20:07:57 · 232 阅读 · 0 评论 -
拖拽效果实现思路
最近给同事帮忙,要实现一个拖拽效果,先来看一下最后的实现效果预览:实现这个效果,主要需要实现以下一些功能:1. 从左边拖到右边大框过程中要能够实时预览;2. 从左边拖到右边大框时要进行范围限制;3. 从左边拖到右边大框时要能自动对齐右边大框里的小格子,即实现磁吸的功能;4. 右边大框里的格子画布实际比那个框要大,会有横向与纵向的滚动条,存在滚动距离(下图的X2和Y2)时对拖动对齐会有影响,需要仔细计算相关因素;5. 已经拖动到右边的小格子在右边框在大框里的拖动实现;以上5条原创 2020-11-18 00:22:16 · 1028 阅读 · 0 评论 -
JavaScript中常用的方法汇总
防抖原理:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。适用场景:1. 按钮提交场景:防止多次提交按钮,只执行最后提交的一次;2. 服务端验证场景:表单验证需要服务端配合,只执行一段连续的输入事件的最后一次;3. 搜索联想词场景;节流原理:规定在一单位时间内。只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。适用场景:1. 拖拽场景:固定时间只执行一次,防止超高频次触发位置变动;2. 缩放场景:监控浏览器resize;原创 2020-11-17 10:04:50 · 330 阅读 · 1 评论 -
JavaScript中给 iframe 中的元素添加点击事件
最近在开发一个浏览器插件,需要抓取掌中云平台的数据,由于该平台的页面结构是采用iframe嵌套的方式加载的,所以在添加事件的时候遇到了一点小麻烦,现特此将解决方法记录如下,以供大家复制粘贴。function setEvent(className) { setTimeout(function(){ for(var i = 0; i<window.frames.length; i++) { window.frames[i].document.oncl......原创 2020-05-28 10:06:23 · 3991 阅读 · 3 评论 -
Moment时间格式化插件使用方法
前端开发中,有很多好用的格式化插件,最常用的就是moment.js这个插件,下面代码中将提供一些常见的用法:最终运行结果如下:原创 2020-05-09 09:41:47 · 5832 阅读 · 0 评论 -
JavaScript中获取input上传的图片返回的地址
1. HTML文件<li> <label for="uploadFile" class="upload-file">点击上传</label> <!-- 在CSS中将input隐藏,UI效果用label展示 --> <input type="file" name="upload_file" id="uploadFil...原创 2020-04-17 15:14:06 · 4311 阅读 · 1 评论 -
JavaScript 中获取光标位置
1.概念和原理DOM中并没有直接获取光标位置的方法,那么我们只能间接来获取光标位置。DOM支持获取光标选中的范围,我们可以以此为切入点,来获取或定位光标的位置,当选取范围起始点和结束点一样时,就是光标插入的位置。1.1. 术语anchor:选区起点。focus:选区终点。range:选区范围,包含整个节点或节点的一部分。1.2. SelectionSelection对象......原创 2020-03-04 00:16:04 · 7986 阅读 · 0 评论 -
在可编辑div中定位光标和设置光标
在HTML里面,光标是一个对象,光标对象是只有当你选中某个元素的时候才会出现的。当我们去点击一个输入框的时候,就会产生一个选中对象 selection,就是我们可以看到的文字变成蓝色的那个区域,selection在火狐浏览器可以直接用 window.getSelection()获取,在HTML里面,selection只有一个的,并且selection是一个区域,你可以想象成一个长方形,它是有开.........原创 2020-03-03 22:32:31 · 9497 阅读 · 20 评论 -
在评论输入框中插入表情
最近在做一个后台管理系统,要求可以对前台用户的作品进行评论,而评论要可以输入表情,常规的文字输入框都是用的文本域textarea来做的,但这种输入框只能输入文字,没有办法输入表情图标,这个时候可编辑div就能起到作用了,那么如何在可编辑的div中插入表情呢?要完成这个功能得用到 selection以及 range,selection 对象由 window.getSelection() 方法获......原创 2020-03-03 21:29:42 · 1168 阅读 · 0 评论 -
JavaScript中的常见的排序算法
1. 冒泡排序2. 插入排序3. 快速排序原创 2019-03-22 00:36:54 · 255 阅读 · 0 评论 -
ClipBoard.js点击复制
<!DOCTYPE html><html><head> <title>ClipBoard.js点击复制</title> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard....原创 2019-03-15 00:06:01 · 614 阅读 · 5 评论 -
用户注册时常用的验证
用户注册时常用的验证 1. 手机号校验2. 图片验证码校验3. 手机短信验证校验4. 密码校验5. 邮箱地址校验原创 2019-02-11 15:18:28 · 1852 阅读 · 1 评论 -
JavaScript实用手册
1.JavaScript 是专门编写网页交互行为的语言,HTML 和 CSS 是静态语言,编写静态内容,无法编写逻辑,无法执行计算,所有静态网页必须使用 JavaScript 添加上交互行为,才能让用户使用(1). 实现交互行为需要 3 步①. 用户输入数据或执行操作②. 程序接受并处理用户输入的数据③. 程序返回处理结果(2). JavaScript 典型用途3 个①...................................................原创 2019-01-12 01:51:55 · 3387 阅读 · 1 评论 -
DOM 和 BOM
1.DOM: Document Object Model早起JS操作不同浏览器的 API 没有标准,有严重兼容性问题,后来 W3C 制定了统一的操作网页内容的 API 标准 DOM,使用 DOM API 操作网页内容,几乎 100%兼容所有浏览器,它具有查找, 修改(内容,属性,样式), 添加, 删除的功能。网页中一切内容在内存中都是以树形结构存储的,树只有一个根节document,它...........................原创 2019-01-11 11:36:52 · 469 阅读 · 0 评论 -
你想学的ES6新功能都在这里了
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ES6新功能</title></head><body> <h1>1.展开操作符</h1> <...原创 2018-12-31 14:26:25 · 588 阅读 · 0 评论 -
JavaScript中的 this的理解
在JavaScript编程中 , this的关键字总是让初学者感到迷惑 , this到底是什么呢?1. 关于thisJavaScript有别于其他的编程语言 , 它的this总是指向一个对象 , 而具体指向那个对象是在运行时基于函数的执行环境动态绑定的 , 而不是函数在声明时的环境。2. this的指向除去不常用的with 和 eval的情况 , 具体到实际应用中 , thi............原创 2019-03-19 00:08:29 · 475 阅读 · 0 评论 -
JavaScript中的 Call 和 Apply
1. call 和 apply的区别Function.prototype.call 和 Function.prototype.apply都是非常常用的方法,它们的作用一模一样,区别仅在于传入参数形式的不同。apply接受两个参数,第一个参数指定了函数体内 this 对象的指向,第二个参数为一个带下标的集合,这个集合可以为数组,也可能为类数组,apply 方法把这个集合中的元素作为参数传递给.........原创 2019-03-24 21:27:56 · 5954 阅读 · 0 评论 -
JavaScript数组降维
如何将一个二维数组进行降维变成一维数组,这是面试中经常会遇到的一个问题,一般有以下几方法:var arr=[ [1,2,3,4], [5,6,7,8]];方法一:分割arr=String(arr).split(",");console.log(arr);// ["1", "2", "3", "4", "5", "6", "7", "8"]方法二.........原创 2019-06-07 17:11:43 · 840 阅读 · 0 评论 -
JavaScript数组去重方法
在写JS代码的时候,经常会用需要给数组去重,常用的操作方法是,利用indexOf去目标数中反复查找,代码如下所示:function repeat(arr){ var result=[]; for(var i=0;i<arr.length;i++){ //在result中如果找不到arr中当前元素 if(result.indexOf(arr.........原创 2019-06-08 00:09:00 · 373 阅读 · 0 评论 -
JavaScript解决那些常见的算法题
在学JavaScript时,总会遇到一些有趣的数学题,然而在实际工作中大多都是在写业务代码,其实解决那些数学题比写业务代码要有趣的多,一起来看一下有哪些有趣的数学题。问题1:已知公鸡5元每只,母鸡3元每只,小鸡3只1元,100元可以买100只鸡,求公鸡、母鸡、小鸡可买多少只?for (var i = 0; i <= 20; i++) { for (var j = 0; j .........原创 2019-06-08 13:06:04 · 1514 阅读 · 0 评论 -
深入理解 RequestAnimationFrame
在Web应用中,实现动画效果的方法很多,Javascript 中可以通过SetInterval来实现,CSS 3可以使用 Transition 和 Animation 来实现,HTML 5 中Canvas 也可以实现,另外,HTML 5 还提供一个专门请求动画的API ,即RequestAnimationFrame,顾名思义就是请求动画帧,为了深入理解 RequestAnimationFrame .........原创 2019-07-29 10:48:26 · 1557 阅读 · 0 评论 -
理解JavaScript 执行机制及异步回调
本文的目的就是要保证你彻底弄懂javascript的执行机制,如果读完本文还不懂,可以揍我。不论你是Javascript新手还是老鸟,不论是面试求职,还是日常开发工作,我们经常会遇到这样的情况:给定的几行代码,要求知道其输出内容和顺序,因为Javascript是一门单线程语言,所以我们可以得出结论:Javascript是按照语句出现的顺序执行的看到这里读者要打人了:我难道不知道JS是一............原创 2019-08-03 00:57:47 · 641 阅读 · 0 评论 -
ES5中的对象冒充继承与原型继承
1. 最简单的类,构造函数function Person(name, age) { this.name = name; this.age = age;};// 实例化一个方法var p = new Person('Augus', 18);console.log(`${p.name}--${p.age}`);// Augus--182. 构造函数和原型链里面增加方.........原创 2019-09-08 17:16:00 · 339 阅读 · 0 评论