![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 83
@Demi
甘于平凡 不甘平庸
展开
-
Leaflet-学习
一、官网英文官网:Leaflet中文官网:Leaflet二、介绍Leaflet 是一个开源并且对移动端友好的交互式地图 JavaScript 库。 它大小仅仅只有39 KB, 并且拥有绝大部分开发者所需要的所有地图特性。Leaflet 简单、高效并且易用。 它可以高效的运行在桌面和移动平台, 拥有着大量的扩展插件、优秀的文档、简单易用的API和完善的案例, 以及可读性较好的源码。三、下载Leaflet【1】CDN// html头部引入<link rel="s...原创 2021-09-18 14:16:24 · 3902 阅读 · 0 评论 -
JavaScript实现类似sleep()的多种方式
编写复杂的JavaScript脚本时,有时会有需求希望脚本能停滞指定的一段时间,类似于 java 中的 Thread.sleep 或者 sh 脚本中的 sleep 命令所实现的效果。很多语言都有sleep函数,sleep() 方法的作用是在指定的毫秒数内让当前“正在执行的线程”休眠(暂停执行)但是JavaScript中并没有提供类似于 Java 的线程控制的功能, 虽然有 setTimeout 和 setInterval 两个方法可以做一些定时执行控制,但并不能满足所有的要求。因为setTimeou原创 2021-09-15 15:32:54 · 5470 阅读 · 3 评论 -
JS的 execCommand 方法实现一个简单的富文本编辑器
一、document.execCommand()从其名字上可以看出execCommand()是用来执行命令的,当一个HTML文档切换到设计模式时,document暴露execCommand方法,该方法允许运行命令来操纵可编辑内容区域的元素。如保存文件、打开新文件、撤消、重做、剪切、复制、删除,字体大小、背景颜色等操作,有了这个方法就可以很容易的实现网页中的文本编辑器【1】语法let bool = document.execCommand(aCommandName, aShowDefa...原创 2021-04-02 15:31:07 · 4772 阅读 · 2 评论 -
单张图片上传组件
一、input实现文件上传【1】type属性type='file'表示文件域,用于文件上传【2】accept属性input框的accept属性值,它规定能够通过文件上传进行提交的文件类型 eg: accept="image/gif, image/jpeg"【3】实例<input type="file" name="file" accept="image/png,image/jpg,image/gif,image/JPEG" />// 上面代码意思是:input...原创 2021-03-24 10:30:17 · 540 阅读 · 0 评论 -
详解defineProperty和Proxy (简单实现数据双向绑定)
前言"数据绑定" 的关键在于监听数据的变化,vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。其实主要是用了ES5中的Object.defineProperty方法来劫持对象的属性添加或修改的操作,从而更新视图。听说vue3.0 会用 proxy 替代 Object.defineProperty()方法。所以预先了解一些用法是有必要的。proxy 能够直接 劫持整个对象,而不是对象的属性,并且劫持的方法有多种。而且最后会返回劫持后的新对象。所以相对来讲,这个方法还是挺好用的。不过原创 2020-12-20 17:10:56 · 1241 阅读 · 0 评论 -
观察者模式和发布-订阅模式的区别
一、观察者模式【1】定义观察者模式定义了对象间的一种一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知,并自动更新。观察者模式属于行为型模式,行为型模式关注的是对象之间的通讯,观察者模式就是观察者和被观察者之间的通讯。观察者模式有一个别名叫“发布-订阅模式”,或者说是“订阅-发布模式”,订阅者和订阅目标是联系在一起的,当订阅目标发生改变时,逐个通知订阅者。【2】案例案例:我办了一个补习班,学生想来我这学习,必须先报名(订阅)。收齐一帮学生,开始教学,学生们听了我的原创 2020-12-17 11:40:47 · 3067 阅读 · 0 评论 -
class类学习 — 封装elementUI的dialog组件
前言在ES6之前,准确来说JavaScript语言只有对象,没有类的概念。生成实例对象的传统方法是通过构造函数,与传统的面向对象语言(比如 C++ 和 Java)差异很大,ES6 提供了更接近传统语言的写法,引入了 class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。但需要清楚的是ES6中class只是构造函数的一种语法糖,并非新鲜玩意,class能实现的,我们通过ES5构造函数同样可以实现。一、构造函数与class写法的部分区别【1.1】构造函数 functio原创 2020-12-13 01:51:16 · 1008 阅读 · 1 评论 -
JavaScript工厂模式创建对象和自定义构造函数的区别
工厂模式【1】定义工厂模式是一种软件工程领域一种广为人知的设计模式,这种模式抽象了创建对象的过程,因为ECMAScript无法穿类,所以开发人员就发明一个函数,用函数来封装以特定的接口创建对象。简单理解:通过函数封装对象,并通过调用函数来调用封装的对象。通过调用多次函数从而创建多次不同的对象。【2】代码工厂模式有返回值,因为通过调用函数会把把函数返回值(这里就是函数封装的对象obj)给返回,然后我们通过声明一个变量person1去接收,此时变量person1里面存的就是对象,然后通过对象调用原创 2020-12-11 12:16:46 · 986 阅读 · 0 评论 -
数组方法 sort() 排序错乱问题
一、问题在JavaScript中,数组使用sort()后发现有排序不正确的情况,如下:let arr = [1, 2, 3, 10, 20, 30]arr.sort()console.log(arr) // [1, 10, 2, 20, 3, 30]二、原因其实,sort方法会调用每个数组元素的toString方法得到字符串,然后再根据Unicode编码对得到的字符串进行排序。// toString后['1', '2', '3', '10', '20', '30']// 对原创 2020-10-10 14:26:37 · 4118 阅读 · 3 评论 -
图片的懒加载和预加载
一、懒加载【1.1】什么是懒加载?懒加载也就是延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式。当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次,俗称占位图),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。这就是图片懒加载。【1.2】为什么要懒加载?当很多页面,内容很丰富,页面很长,图片较多的时候。比如说各种商城页面。这些页面图片数量多,而且比较大,少说百来K,多则上兆。要原创 2020-09-27 16:57:16 · 1197 阅读 · 0 评论 -
异步编程的实现方式?
一、JavaScript为什么要异步?Javascript语言的执行环境是"单线程"(single thread)。所谓"单线程",就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推。这种模式的好处是实现起来比较简单,执行环境相对单纯;坏处是只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行。常见的浏览器无响应(假死),往往就是因为某一段Javascript代码长时间运行(比如死循环),导致整个页面卡在这个地方,其他任务无法执行。为原创 2020-08-21 17:21:05 · 1519 阅读 · 1 评论 -
对象序列化和反序列化过程
一.什么是对象序列化? 对象序列化是指将对象的状态转换为字符串(来自我这菜鸟的理解,好像有些书上也是这么说的,浅显易懂!); 序列化(Serialization)是将对象的状态信息转换为可以存储或传输的形式的过程(来自“百度百科—序列化“,学术性强,略显高端);二.为什么会有对象序列化? 世间万物,都有其存在的原因。为什么会有对象序列化呢?因为程序猿们需要它。既然是对象序列化,那我们就先从一个对象说起:varobj={x:1,y:2}; ...原创 2020-07-28 10:34:04 · 1018 阅读 · 0 评论 -
JavaScript 内存泄漏及如何避免
前言在过去,内存泄漏并没有为 Web 开发人员带来巨大的问题。页面保持着相对简单,并且在页面之间的跳转时可以释放内存资源,即便还存在内存泄露,那也是小到可以被忽略。现在,新的 Web 应用达到更高的水准,页面可能运行数小时而不跳转,通过 Web 服务动态检索和更新页面。JavaScript 语言特性也被发挥到极致,通过复杂的事件绑定、面向对象和闭包等特性构成了整个 Web 应用。面对这些变化,内存泄露问题变得越来越突出,尤其是之前那些通过刷新(导航)隐藏的内存泄露问题。内存泄漏是每个开发者最终都原创 2020-07-08 17:45:40 · 640 阅读 · 0 评论 -
全局作用域中,用 const 和 let 声明的变量不在 window 上,那到底在哪里?如何去获取?
一、全局作用域中,用const和let声明的变量去哪了?【1.1】在ES5中,全局变量直接挂载到全局对象的属性上,所以能在window上看到var命令和function命令声明的全局变量var a = 10;function f(){};console.log(window.a); // 10console.log(window.f); // f(){}【1.2】在ES6中,全局对象的属性和全局变量脱钩,但是为了保持兼容性,旧的不变,所以var、function声明的全局变量依然可以在原创 2020-06-22 10:03:52 · 5042 阅读 · 2 评论 -
箭头函数与普通函数的区别?
前言箭头函数是前端面试环节的一个高频考点,箭头函数是ES6的API,相信很多人都知道,因为它的语法比一般的函数更简洁,所以深受大家的喜爱。这是我们在日常开发中一直使用的API,但大多数同学对它的理解还不够,下面我们来详细了解下箭头函数的基本语法,以及箭头函数与普通函数的区别。一、基本语法【1.1】定义函数定义箭头函在数语法上要比普通函数简洁得多,ES6中允许使用箭头=>来定义箭头函数,箭头函数省去了function 关键字,函数的参数放在=>前面的括号中,函数体跟在=>..原创 2020-06-09 17:09:14 · 523 阅读 · 0 评论 -
为什么普通 for 循环的性能远远高于 forEach 的性能?
作为一名前端开发,for和foreach循环遍历几乎每天都在使用,那么这两种遍历方式哪一种效率更高呢? 效率高的原因是什么呢?一、for( )循环通过下标,对循环中的代码反复执行,功能强大,可以通过index取得元素。在处理比较复杂的处理的时候较为方便二、forEach( )循环forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。foreach有的也叫增强for循环,foreach其实是for循环的一个特殊简化版。注意,forEach() 对于空数组是不会执行回调函数的.原创 2020-05-15 14:18:50 · 3586 阅读 · 1 评论 -
你知道JavaScript中的Symbol类型怎么用吗?
前言ES5 的对象属性名都是字符串,这容易造成属性名冲突的问题。比如,你使用别人的模块/对象, 又想为之添加新的属性,这就容易使得新属性名与原有属性名冲突。这就是 ES6引入Symbol的原因,symbol能够保证每个属性的名字独一无二。一、Symbol介绍Symbol是 ES6 引入了一种新的原始数据类型,它是一种特殊的、不可变的数据类型,可以作为对象属性的标识符使用,表示独一无二的值。凡是属性名属于 Symbol 类型,就都是独一无二的,可以保证不会与其他属性名产生冲突。二、语法S.原创 2020-05-13 11:48:07 · 1008 阅读 · 0 评论 -
JavaScript 二进制数组(ArrayBuffer、Typed Array、DataView)
前言二进制数组是JavaScript用来操作二进制数据的一个接口。有ArrayBuffer对象、TypedArray视图和DataView视图三个对象接口。它们可以以数组下标的形式直接操作内存,可以与操作系统的原生接口进行二进制通信。随着Web应用程序变得越来越强大,尤其一些新增加的功能例如:音频视频编辑,访问WebSockets的原始数据等,很明显有些时候如果使用JavaScript代码可以快速方便地通过类型化数组(Typed Arrays)来操作原始的二进制数据将会非常有帮助。注意:(不要把类型原创 2020-05-09 17:48:35 · 2884 阅读 · 0 评论 -
Array() 和 Array.of() 的区别
Array()在JavaScript中,数组构造函数是new Array()或Array()let arr = Array(1, 2, 3, 4)console.log(arr) // 1, 2, 3, 4console.log(arr.length) // 4咋一看,好像什么毛病,我们改一下代码,将构造函数的参数设为只有一个数字时:let arr = Array(4...原创 2020-05-06 17:41:47 · 2959 阅读 · 0 评论 -
JavaScript类型判断的四种方法
一、JavaScript数据类型JavaScript有八种内置类型,除对象外,其他统称为“基本类型”。 空值(null) 未定义(undefined) 布尔值(boolean) 数字(number) 字符串(string) 对象 (object) 符号(symbol, ES6中新增) 大整数(BigInt, ES202...原创 2020-05-06 14:34:01 · 398 阅读 · 0 评论 -
JavaScript对象类别划分(原生对象、内置对象、宿主对象)
原生对象(native object)原生对象也可以叫做本地对象或者内部对象。ECMA-262 把原生对象(native object)定义为 " 独立于宿主环境的 ECMAScript 实现提供的对象 "。所以每一种宿主环境都可以使用原生对象。JavaScript中的原生对象有Object、Function、Array、String、Boolean、Math、Number、Date、Re...原创 2020-04-30 14:59:40 · 663 阅读 · 0 评论 -
了解JavaScript的运行核心——事件循环(Event Loop)
前言什么要学底层的事件循环Event Loop,不仅仅是因为这是一道面试的常考题。作为一个程序员,了解程序的运行机制是很重要的,这样可以帮助你去输出更优质的代码。前端是一个范围很广的领域,技术一直在更新迭代,掌握了底层的原理可以应对新的技术。JS初始设计JavaScript从诞生起就是单线程。原因大概是不想让浏览器变得太复杂,因为多线程需要共享资源、且有可能修改彼此的运行结果,对...原创 2020-04-28 16:29:37 · 549 阅读 · 0 评论 -
刷算法题遇到的新数据类型 — BigInt
今天在LeetCode做的一道关于 “加一” 的算法题,题目如下给定一个由整数组成的非空数组所表示的非负整数,在该数的基础上加一。最高位数字存放在数组的首位, 数组中每个元素只存储一个数字。你可以假设除了整数 0 之外,这个整数不会以零开头。示例 1:输入: [1,2,3]输出: [1,2,4]解释: 输入数组表示数字 123。示例 2:输入: [4,3,2,1...原创 2020-04-23 14:12:32 · 1285 阅读 · 0 评论 -
JS实现在DIV内拖动缩放图片
HTML <div id="father"> <div id="box"> <img src="https://i04piccdn.sogoucdn.com/5d60177b8e04757a"> <div id="scale"></div> </div> </div&g...原创 2020-03-03 13:48:44 · 1926 阅读 · 0 评论 -
看完这篇还搞不懂webpack,求你打我
一、什么是webpackwebpack是一个打包工具,他的宗旨是一切静态资源皆可打包。有人就会问为什么要webpack?webpack是现代前端技术的基石,常规的开发方式,比如jquery,html,css静态网页开发已经落后了。现在是MVVM的时代,数据驱动界面。webpack它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,T...原创 2019-12-24 17:44:52 · 2163 阅读 · 1 评论 -
textarea高度自适应 && 元素属性contenteditable介绍
近期实现的一个笔录页面如上图所示,考虑到笔录内容肯定会超出一行,所以我选择了使用textareas文本输入框,问题在于textarea不支持自适应高度,就是定好高度或者是行数之后,超出部分就会显示滚动条,看起来不美观。下面分享2种实现textarea高度自适应的做法,一种是利用JS控制textarea的高度,另一种是用div元素来模拟textarea一、textarea高度自适应...原创 2019-12-18 11:19:16 · 1459 阅读 · 0 评论 -
解决forEach无法退出循环问题
做项目时,习惯使用forEach来代替for循环,我们都知道for循环里要跳出整个循环是使用break,但在数组中用forEach循环如果要退出整个循环使用break会报错,return也无法跳出循环。也就是说forEach遍历并不能被终止问题【1】在fromEach中使用break let arr = ['1', '2', '3', '4', '5']; arr.fo...原创 2019-12-17 20:15:30 · 2886 阅读 · 1 评论 -
根据(字符 / 字节)数分段截取字符串
一、JS字符串截取函数substring()、substr()、slice()的区别【1】substring()substring()方法返回一个索引和另一个索引之间的字符串,语法如下:str.substring(indexStart, [indexEnd])下面有七点需要注意:indexStart需要截取字符串的起始位置,从零开始; indexEnd需要截取字符串的结束位...原创 2019-12-12 14:36:01 · 3187 阅读 · 1 评论 -
校验18位身份证号码(判断最后一位校验位和性别)
身份证号码组成公民身份号码是一系列组合码,由十七位数字本体码和一位校验码组成。排列顺序从左至右依次为:六位数字地址码,八位数字出生日期码,三位数字顺序码和一位校验码。18位身份证最后一位校验码的计算方法1、将身份证号码前17位数分别乘以不同的系数。从第一位到第十七位的系数分别为:【7-9-10-5-8-4-2-1-6-3-7-9-10-5-8-4-2】2、将这1...原创 2019-12-05 10:31:20 · 4343 阅读 · 0 评论 -
window.print() 前端实现网页打印详解
前言print作为浏览已经比较成熟的技术可以经常被用来打印页面的部分内容,我们可以在MDN上查看到相关的简单介绍。一、print()方法print() 方法用于打印当前窗口的内容。调用 print() 方法会产生一个打印预览弹框,让用户可以设置打印请求。最简单的打印就是直接调用window.print(),当然用 document.execCommand('print') 也可以达到同...原创 2019-12-02 19:39:41 · 65614 阅读 · 26 评论 -
Promise: 给我一个承诺,我还你一个承诺
为何产生promise?在 Promise 出现以前,我们处理一个异步网络请求,需求大概是这样:我们需要根据第一个网络请求的结果,再去执行第二个网络请求,再根据第二个网络请求的结果去执行第三个请求~,需求是永无止境的,于是乎出现了如下代码:请求1(function(){ // 一些其他操作 请求2(function(请求1结果){ // 一些其他操作 ...原创 2019-11-06 20:19:38 · 398 阅读 · 0 评论 -
JS获取当前浏览器URL参数(中英文通用)
一、获取浏览器参数方法function getParams(key) { let search = window.location.search.replace(/^\?/, ""); let pairs = search.split("&"); let paramsMap = pairs.map(pair => { let [key, ...原创 2019-09-27 14:12:51 · 1764 阅读 · 0 评论 -
JS处理事件的兼容性写法
参数说明element 操作的元素 type 事件类型 handler 需要执行的函数 ture&&false 是否捕获一、事件监听function addEvent(element, type, handler) { if (element.addEventListener) { element.addEventListener(type, ...原创 2019-02-14 16:35:38 · 279 阅读 · 2 评论 -
Ajax 是什么? 如何创建一个 Ajax?
在上世纪90年代,几乎所有的网站都由HTML页面实现,服务器处理每一个用户请求都需要重新加载网页。用户体验极差!由于每次应用的沟通都需要向服务器发送请求,应用的回应时间依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。在 2005 年,Google 通过其 Google Suggest 使 AJAX 变得流行起来。Google Suggest 使用 AJAX...原创 2019-01-07 11:46:49 · 3566 阅读 · 0 评论 -
JavaScript事件代理(事件委托)
基本概念事件代理(Event Delegation),又称之为事件委托。是JavaScript中常用绑定事件的常用技巧。顾名思义,“事件代理”即是把原本需要绑定在子元素的响应事件(click、keydown......)委托给父元素,让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡。举个通俗的例子比如一个宿舍的同学同时快递到了,一种方法就是他们一个个去领取,还有一种方...原创 2019-01-11 15:03:44 · 70170 阅读 · 8 评论 -
this、call、apply、bind
This指针每一个方法或函数都会有一个this对象,this对象是方法(或函数)在执行时的那个环境,也可以说是这个函数在那个作用域下运行的。说的更通俗一点:this就相当于咱们平时说话时候说的“我”,“我家”的概念。就是说当一个方法在运行的时候,它是属于谁的。它在运行的时候它的家是谁家。在 ES5 中,其实 this 的指向,始终坚持一个原理:this 永远指向最后调用它的那个对象例1...原创 2019-01-10 14:17:15 · 488 阅读 · 0 评论 -
JavaScript系列之数组去重
数组去重方法是老生常谈,特别是一些bat大厂的面试都会提到这个问题,既然是常谈,那么我也来谈谈嵌套循环(兼容性好)使用循环嵌套,最外层循环 array,里面循环 res,如果 array[i] 的值跟 res[j] 的值相等,就跳出循环,如果都不等于,说明元素是唯一的,这时候 j 的值就会等于 res 的长度,根据这个特点进行判断,将值添加进 res。 function uni...原创 2018-12-24 14:10:32 · 201 阅读 · 0 评论 -
localStorage用法小总结
一、什么是localStorage 在HTML5中,新加入了一个localStorage特性,这个特性主要是用来作为本地存储来使用的,解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)二、localStorage的优势和局限【1】优势 localStorage拓展了cookie的4K限制 localStorage会可以...原创 2018-12-18 11:07:39 · 17570 阅读 · 1 评论 -
回到顶部的几种实现方法
【1】使用默认链接锚点添加一个a链接,设置a链接的href属性值为"#top"即可实现<body> <div>我在顶部</div> <!-- 很多内容 --> <br><br><br><br><br><br><br><b...原创 2018-12-21 17:51:41 · 46392 阅读 · 4 评论 -
JavaScript数据类型
一、数据类型分类【1】值类型(基本类型): 字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(Undefined)【2】引用数据类型:对象(Object)、数组(Array)、函数(Function)二、类型详解【1】字符串(String)字符串是存储字符的变量。字符串可以是引号中的任意文本var myName = "Demi"...原创 2018-12-21 11:39:33 · 269 阅读 · 0 评论