![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JavaScript
文章平均质量分 78
huangpb0624
这个作者很懒,什么都没留下…
展开
-
剪切、复制、粘贴事件
但是 div 不是表单元素,不能直接通过 focus() 来使其聚焦,需要在div元素上增加 contenteditable=“true” 先使其变成可编辑元素(该类元素可以使用focus来聚焦),然后给div绑定onmouseenter和onmouseleave方法,鼠标移入时使其聚焦,移出时失焦,这样就能在鼠标移入div区域时粘贴触发onpaste事件。粘贴事件的 event 提供了一个 clipboardData 属性,该属性包含了剪切板数据,可以设置和读取剪切板内容。原创 2023-08-09 23:23:03 · 532 阅读 · 0 评论 -
WebSocket 双向通信
何为 WebSocket?WebSocket 是一个持久化的协议,它实现了浏览器与服务器的全双工通信,同时也是跨域的一种解决方案。属于 HTML5 新特性,IE 只兼容到 IE10。WebSocket 和 HTTP 都是应用层协议,都基于 TCP 协议。但是 WebSocket 是一种双向通信协议,在建立连接之后,WebSocket 的 server 与 client 都能主动向对方发送或...原创 2018-11-04 22:46:11 · 1759 阅读 · 0 评论 -
前端实现 Excel 导入和导出功能
以上只是实现了简单的单个导入、导出功能,可以将其完善为批量操作,但是要注意批量操作带来的耗时性,将对应的耗时部分通过 webworker等方式处理,这样页面就不需要一直等待当前的操作完成。另外,如果有要求在导出 Excel时有表格样式(如:行列宽高设置等)可以通过来实现。给我实现一个前端的 Excel 导入和导出功能 - 掘金。转载 2022-10-19 00:30:55 · 2174 阅读 · 0 评论 -
单例 Promise 和 Promise 缓存
单例 Promise 就是只会有一个 Promise,接口也就只会请求一次。这里,我们将 Promise 放入缓存中,然后将其返回给调用方。最终,获取用户信息接口只会调用一次。最后的效果:连续点击按钮,但最终只会调用一次获取用户信息的接口。原创 2022-09-07 00:02:51 · 388 阅读 · 0 评论 -
浏览器的5种观察器
该观察器自动"观察"目标元素与根元素交叉区域的变化。默认根元素为文档视口,此时交叉区域的变化决定了用户在当前视口能否看到目标元素,因此它经常被用于“元素可见性”观察。比如:图片懒加载、无限滚动、广告曝光量统计等。兼容性:IE不支持1. 创建观察器实例2. 定义观察到目标元素与根元素交叉区域变化时的回调函数 callback(entries, observer)。entries数组中,每个成员都是一个IntersectionObserverEntry对象,如果同时有两个被观察的对象的可见性发生变化,en转载 2022-06-21 23:32:42 · 502 阅读 · 0 评论 -
如何监听DOM元素尺寸的变化?
window 有 resize 事件,我们可以联想到 iframe 也有 resize 事件。我们在要监听尺寸变化的 DOM 元素内添加一个 iframe,iframe 设置 width、height 都为 100%,并绑定 resize 事件就可以监听了。原创 2022-06-20 23:14:33 · 1084 阅读 · 0 评论 -
js【剪切、复制、粘贴】功能实现
针对现代浏览器实现(Navigator.clipboard)Navigator.clipboardAPI可以用来访问系统剪贴板,可以实现【剪切、复制、粘贴】功能。该 API 被设计用来取代使用 document.execCommand() 的剪贴板访问方式,不兼容 IE。使用 Navigator.clipboardAPI时会弹出用户授权弹窗。如果用户没有授予权限,则不允许读取或更改剪贴板内容。let clipBoard = navigator.clipboard;// 写入文本至操作系..原创 2022-03-21 00:22:21 · 2486 阅读 · 0 评论 -
ES6 中的 super 关键字
super 关键字指向当前对象的原型对象。1.super的简单应用const person = {name:'jack'}const man = {sayName(){return super.name;}}Object.setPrototypeOf( man, person );let n = man.sayName(); //jack注意,super 关键字表示原型对象时,只能用在对象的方法之中,用在其他地方都会报错。目前...转载 2021-07-01 23:48:48 · 537 阅读 · 0 评论 -
jQuery源码解析:attr,prop,attrHooks,propHooks详解
我们先来看一下jQuery中有多少个方法是用来操作元素属性的。首先,看一下实例方法:jQuery.fn.extend({ attr, removeAttr, prop, removeProp, addClass, removeClass, toggleClass, hasClass, val});然后,看下静态方法(工具方法):jQuery.extend({ valHooks, attr, removeAttr, at转载 2020-12-26 10:10:43 · 247 阅读 · 0 评论 -
js常用字符串API汇总
js的字符串是不可变的:String 类的所有方法都不允许改变某个字符串的内容。那些像 String.toUpperCase() 之类的方法返回一个全新的字符串,而没有修改原始字符串。在 ES5 以及之前,字符串的行为类似于每个元素为单个字符的只读数组。一、字符串 API1. str.slice(start [,end]) 和str.substring(start [,end])截取。slice() 和 substring() 用法类似,只是slice支持负数,而substring的负.原创 2020-11-21 23:17:13 · 4827 阅读 · 0 评论 -
浏览器Cookie详解
一、了解 CookieCookie最开始被设计出来是为了弥补HTTP在状态管理上的不足。HTTP协议是一个无状态协议,客户端向服务器发请求,服务器返回响应,故事就这样结束了,但是下次发请求如何让服务端知道客户端是谁呢?这种背景下,就产生了Cookie。 cookie 存储在客户端: cookie 是服务器发送到用户浏览器并保存在本地的一小块数据,它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。因此,服务端脚本就可以读、写存储在客户端的cookie的值。 cookie 是不可跨域...原创 2020-10-15 23:26:22 · 25081 阅读 · 2 评论 -
通信API MessageChannel
一、简介MessageChannel 接口允许我们创建一个新的消息通道,并通过它的两个MessagePort 属性发送数据。简单来说,MessageChannel创建了一个通信的管道,这个管道有两个口子,每个口子都可以通过postMessage发送数据,而一个口子只要绑定了onmessage回调方法,就可以接收从另一个口子传过来的数据。MessageChannel的使用场景:2个Web Worker间通信二、2个简单的使用例子例子1: var ch = new Messa..原创 2020-07-05 17:47:36 · 794 阅读 · 0 评论 -
文件上传、导入
上传前用户要选择本地要上传的文件,用户可以通过以下三种方式操作触发:通过input type="file" 选择本地文件 通过拖拽的方式把文件拖过来 在编辑框里面复制粘贴一、三种选择文件的不同操作1. 通过input type="file" 选择本地文件通过这种方式选择文件的话,前端可以有2种上传方式:Ajax请求 和 Form表单。Ajax请求:就是平时用的 post...原创 2020-04-11 11:45:57 · 781 阅读 · 0 评论 -
对象getter和setter属性 - 属性监听
一、在新对象初始化时定义 getter settervar obj = { log: ["a", "b", "c"], get latest() { if (this.log.length == 0) { return undefined; } return this.log[this.log.length - 1]; }, set lat...原创 2020-02-23 22:41:37 · 495 阅读 · 0 评论 -
事件冒泡、事件捕获和事件委托
一、事件冒泡和事件捕获的区别事件冒泡:目标元素事件先触发,然后父元素事件触发 事件捕获:父元素事件先触发,然后目标元素事件触发事件执行顺序是:先事件捕获(从 Windows -> document 依次往下) 再是目标事件处理 最后是事件冒泡addEventListener() 第三个参数为 false 事件触发顺序是冒泡顺序,true 为捕获顺序,默认为 false(这个...原创 2020-02-22 10:44:55 · 2670 阅读 · 0 评论 -
Blob、File、FileReader 和 Data URL
一、Blob 对象Blob,全称 Binary Large Object,代表二进制类型的大对象。在Web领域,Blob对象表示一个不可变、二进制原始数据的类文件对象,因此可以像操作文件对象一样操作Blob对象。File 接口基于Blob,继承了 Blob 的功能并将其扩展使其支持用户系统上的文件。一、Blob基本用法1. 创建Blob对象生成Blob对象有两种方法:使用Blo...原创 2020-02-06 00:17:40 · 3502 阅读 · 2 评论 -
Base64编码、解码
Base64 就是一种编码方法,可以将任意值转成 0~9、A~Z、a-z、+、/ 这64个字符组成的可打印字符。使用它的主要目的,不是为了加密,而是为了不出现特殊字符,简化程序的处理。经编码后,文本体积会变大 1/3。一、ASCII 编码转Base64js原生提供两个 Base64 相关的方法:window.btoa():ASCII 编码转为 Base64 编码 window.atob():Base64 编码转为原来的ASCII 编码window.btoa('hello') // aGV.原创 2020-02-02 12:06:12 · 5443 阅读 · 0 评论 -
URI 和 URL 的关系
一、URI(统一资源标识符)URI 是用来标识互联网上的资源(例如,网页或文件)和怎样访问这些资源的传输协议(例如,HTTP 或 FTP)的字符串。js编码解码URI的方法有4个:encodeURI、encodeURIComponent、decodeURI、decodeURIComponent。1、一个URI的组成一个 URI 是由组件分隔符分割的组件序列组成。其一般形式是:Sch...原创 2020-02-02 10:38:17 · 379 阅读 · 0 评论 -
JavaScript的内存管理
前言像C语言这样的底层语言一般都有底层的内存管理接口,比如 malloc()和free()用于分配内存和释放内存。 而对于JavaScript来说,会在创建变量时分配内存,并且在不再使用它们时“自动”释放内存,这个自动释放内存的过程称为垃圾回收。 因为自动垃圾回收机制的存在,让大多Javascript开发者感觉他们可以不关心内存管理,所以会在一些情况下导致内存泄漏。一、内存结构内存分为...原创 2020-01-01 14:09:57 · 1518 阅读 · 0 评论 -
JSON.parse() 和 JSON.stringify()
一、语法JSON.stringify(value[, replacer [, space]])二、JSON.stringify() 实际使用场景对象和数组的深拷贝 对 http 请求参数进行序列化 对要存储到 Storage 的数据转换成字符串三、JSON.stringify() 的六大特性第一大特性对于 undefined、任意的函数以及 symbol 三个特殊的值分...原创 2019-12-28 22:43:51 · 1090 阅读 · 0 评论 -
栈、堆、队列 深入理解
栈、堆、队列都属于常见数据结构。一、栈1.1 简介栈 是一种遵循 后进先出(LIFO) 原则的有序集合。新添加和待删除的数据都保存在栈的同一端栈顶,另一端就是栈底。新元素靠近栈顶,旧元素靠近栈底。 栈由编译器自动分配释放。栈使用一级缓存。调用时处于存储空间,调用完毕自动释放。举个栗子:乒乓球盒子/搭建积木1.2 基本数据结构的存储(存储栈)javaScript中,...转载 2019-12-21 22:30:51 · 4968 阅读 · 1 评论 -
JS引擎执行一段js的过程
最初,JavaScript 只能在 Web 浏览器中运行,但是随着 Node 的出现,现在 JavaScript 也可以在服务端运行。虽然我们可能知道应该在何时何地去使用它, 但是我们真的了解这些脚本执行的背后发生了什么吗?如果您觉得自己对 JavaScript 引擎有了一些了解的话,可以先给自己鼓个掌,但不要急着关掉本文,我相信阅读完成后您仍然可以从中学到一些东西。JavaScript ...转载 2019-11-27 23:19:01 · 374 阅读 · 0 评论 -
跨域及解决方案
目录什么是浏览器同源策略?什么是跨域?如何实现跨域?最经典的跨域方案jsonp最流行的跨域方案Cors最方便的跨域方案Nginx反向代理其它跨域方案什么是浏览器同源策略?同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地...原创 2018-03-08 14:07:18 · 441 阅读 · 0 评论 -
什么是闭包?闭包的作用是什么?
闭包的定义《JavaScript高级程序设计》:闭包是指有权访问另一个函数作用域中的变量的函数《JavaScript权威指南》:从技术的角度讲,所有的JavaScript函数都是闭包:它们都是对象,它们都关联到作用域链。《你不知道的JavaScript》当函数可以记住并访问所在的词法作用域时,就产生了闭包,即使函数是在当前词法作用域之外执行。自己的解释:一个...转载 2019-10-21 22:47:55 · 771 阅读 · 0 评论 -
require,export,module.exports区别
require: node 和 es6都支持的引入export / import: 只有es6支持的导出引入module.exports / exports: 只有 node 支持的导出node模块Node里面的模块系统遵循的是CommonJS规范。那问题又来了,什么是CommonJS规范呢?由于js以前比较混乱,各写各的代码,没有一个模块的概念,而这个规范出来其实就是对模块的一个定义。Comm...原创 2018-01-09 10:05:14 · 1133 阅读 · 0 评论 -
ES5有几种方式可以实现继承?分别有哪些优缺点?
ES5 有 6 种方式可以实现继承,分别为:1. 原型链继承原型链继承的基本思想是利用原型让一个引用类型继承另一个引用类型的属性和方法。function SuperType() { this.name = 'Yvette'; this.colors = ['pink', 'blue', 'green'];}SuperType.prototype.getName =...转载 2019-10-20 22:11:43 · 685 阅读 · 0 评论 -
js异步加载、预加载资源、dns预解析
异步加载 js 的几种方式<script src="script.js"></script>以上写法是平常常用的写法,浏览器遇到该script 脚本会立即加载并执行此脚本,是一个同步的过程。有时候我们想让 script 脚本异步加载,那要怎么处理呢?方式一:在 <script> 标签中加上 defer 或 async 属性<scr...原创 2018-11-17 11:25:04 · 4513 阅读 · 0 评论 -
如何正确判断this的指向?
如果用一句话概括 this 的指向,那么即是: 谁调用它,this 就指向谁。但是仅通过这句话,我们很多时候并不能准确判断 this 的指向。因此我们需要借助一些规则去帮助自己:this 的指向可以按照以下顺序判断:全局环境中的 this浏览器环境:无论是否在严格模式下,在全局执行环境中(在任何函数体外部)this 都指向全局对象window;node 环境:无论是否在严格模...原创 2019-10-13 23:02:38 · 616 阅读 · 0 评论 -
Window对象的属性
一、location 对象示例:http://www.home.com:8080/location/page.html?ver=1.0&id=timlq#love1. window.location.href:完整的 URL(可读取可设置)读取:返回值 http://www.home.com:8080/location/page.html?ver=1.0&id=timl...原创 2016-08-26 13:45:06 · 2967 阅读 · 0 评论 -
观察者模式
背景设计模式并非是软件开发的专业术语,实际上,“模式”最早诞生于建筑学。设计模式的定义是:在面向对象软件设计过程中针对特定问题的简洁而优雅的解决方案。通俗一点说,设计模式是在某种场合下对某个问题的一种解决方案。如果再通俗一点说,设计模式就是给面向对象软件开发中的一些好的设计取个名字。这些“好的设计”并不是谁发明的,而是早已存在于软件开发中。一个稍有经验的程序员也许在不知不觉中数次使用过...原创 2019-04-22 22:28:54 · 437 阅读 · 0 评论 -
浏览器打印 之 window.print() 设置打印样式和内容
项目中用的是谷歌浏览器,js 执行window.print() 就会调用谷歌浏览器的打印功能。打印其实打印的是整个当前网页,只是用媒体查询(@media print)把网页中要打印的内容做了显示,不打印的内容做了隐藏而已。针式打印机由于存在失真问题,所以像有些边框颜色设置的比较浅的就没法打印出来,可以设置边框颜色深一点。<!doctype html><html&...原创 2019-04-16 11:25:09 · 18549 阅读 · 3 评论 -
js数据类型判断
一、Object.prototype.toString.call (推荐)Object.prototype.toString.call可能的返回值如下:类型 结果 Undefined "[object Undefined]" Null "[object Null]" Boolean "[object Boolean]" Number "[...原创 2019-04-07 10:56:26 · 115 阅读 · 0 评论 -
原型链
ES6 中的class类,只是一个基于原型的语法糖,跟 Java 或 C++ 中的 class 有所不同。构造函数有一个原型对象prototype(原型对象里的 constructor 指向构造函数)。prototype可与new 操作符一起使用,对原型对象的引用被复制到新实例的 __proto__ 属性。你在 prototype 中定义的所有内容都可以由所有实例有效共享,你甚至可以稍...原创 2019-04-05 23:32:54 · 175 阅读 · 0 评论 -
keyDown 与 keyPress 原生事件的区别
keyDown 与 keyPress 的区别keyDown会在你按下任何按键时触发,但是keyPress只会在你按下的按键可以产生出一个字符(输入东西)的时候触发。charCode代表着是一个 char(字符)的 code(专业点讲是 Unicode 码),那keyCode显然就是代表一个 key(按键)的 code。可以用event对象的key,which去判断按下了键盘的哪个键。whi...原创 2019-04-05 21:22:36 · 721 阅读 · 0 评论 -
JavaScript 简介
一、JavaScript是一门轻量级,单线程,弱类型,非独立,解释性语言轻量级js 只需要网页就可以解释执行,不需要安装本地编译环境。单线程浏览器只分配给js一个主线程,一次只能执行一个任务(即,同一时刻仅有一处代码正在执行),这些任务形成一个任务队列排队等候执行。JavaScript 单线程的目的是为了避免多线程冲突。例如,多线程下同时操作同一个 DOM 节点就可能导致每次运...原创 2019-03-26 18:02:23 · 119 阅读 · 0 评论 -
图片懒加载
一、什么是懒加载?“懒加载”即:延迟加载,对于一个很长的页面,优先加载可视区域的内容,其他部分等进入可视区域时再加载。二、为什么要懒加载?懒加载是一种网页性能优化的方式,它能极大的提升用户体验。比如一个页面中有很多图片,但是首屏只出现几张,这时如果一次性把图片全部加载出来会影响性能。这时可以使用懒加载,页面滚动到可视区再加载。优化首屏加载。总结出来就两个点:1.全部加载的话会影响用户体验2.浪费用户的流量,有些用户并不想全部看完,全部加载会耗费大量流量。懒加载优点:页面加载速度快原创 2019-02-13 22:33:38 · 6573 阅读 · 1 评论 -
Service Worker ——这应该是一个挺全面的整理
介绍作为一个比较新的技术,大家可以把 Service Worker 理解为一个介于客户端和服务器之间的一个代理服务器。在 Service Worker 中我们可以做很多事情,比如拦截客户端的请求、向客户端发送消息、向服务器发起请求等等,其中最重要的作用之一就是离线资源缓存。首先,作为一个新技术,我们需要关注的是它在不同浏览器的兼容性,下面是来自于 caniuse.com 的一张图:...转载 2019-04-24 17:46:32 · 23816 阅读 · 1 评论 -
Selection对象
被选择文本示例代码<p>发大幅<strong>大大泡泡糖</strong>度那附近那<strong>小头爸爸</strong>多好撒节点是的是</p>以下几个属性和方法兼容性良好,而且对文本和输入框都有效。var selObj = window.getSelection(); // 获取跟选择范围有关的信息...原创 2019-05-26 22:56:13 · 2206 阅读 · 0 评论 -
前端大文件上传
最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现。在某些业务中,大文件上传是一个比较重要的交互场景,如上传入库比较大的Excel表格数据、上传影音文件等。如果文件体积比较大,或者网络条件不好时,上传的时间会比较长(要传输更多的报文,丢包重传的概率也更大),用户不能刷新页面,只能耐心等待请求完成。下面从文件上传方式入手,整理...转载 2019-06-05 23:38:01 · 1850 阅读 · 0 评论 -
JS引擎是如何工作的?- 包含事件循环
JS 引擎是一个可以编译、解释我们的JS代码强大的组织。最受欢迎的JS 引擎是V8,由 Google Chrome 和 Node.j s使用,SpiderMonkey 用于Firefox,以及Safari/WebKit使用的 JavaScriptCore。虽然现在 JS 引擎不是帮我们处理全面的工作。但是每个引擎中都有一些较小的组织为我们做繁琐的的工作。其中一个组件是调用堆栈(Call S...原创 2019-07-27 15:30:04 · 420 阅读 · 0 评论