分类：JavaScript

2020
12-05

JavaScript实现浏览器网页自动滚动并点击的示例代码

1.打开浏览器控制台窗口JavaScript通常是作为开发Web页面的脚本语言，本文介绍的JavaScript代码均运行在指定网站的控制台窗口。一般浏览器的开发者窗口都可以通过在当前网页界面按F12快捷键调出，然后在上面的标签栏找到Console点击就是控制台窗口，在这里可以直接执行JavaScript代码，而chrome系浏览器的控制台界面可以使用快捷键Ctrl+Shift+J直接打开2.实时查看鼠标坐标首先为了获取当前的鼠标位置的x、y坐标，需要先重写一个o... 继续阅读 >
2020
12-03

在实例中重学JavaScript事件循环

单线程的JS众所周知js是一门单线程语言，即同一时间只能做一件事。为什么js是单线程的呢，主要与它的用途有关。作为浏览器脚本语言，js的主要用途是和用户互动&操作DOM，我们并不想并行的操作DOM。如果不是单线程的话，我们一个线程在给DOM节点上添加内容，另一个线程却删除了这个节点，到底该以哪个为准呢？所以为了避免复杂性，从一诞生，JavaScript就是单线程。事件循环（eventloop)JS是一门单线程语言，意味着代码要一行一行... 继续阅读 >
2020
12-03

Javascript节流函数throttle和防抖函数debounce

Javascript节流函数throttle和防抖函数debounce 问题的引出在一些场景往往由于事件频繁被触发，因而频繁地进行DOM操作、资源加载，导致UI停顿甚至浏览器崩溃。在这样的情况下，我们实际上的需求大多为停止改变大小n毫秒后执行后续处理；而其他事件大多的需求是以一定的频率执行后续处理。针对这两种需求就出现了debounce和throttle两种解决办法。1.resize事件2.mousemove事件3.touchmove事件4.scroll事件throttle与debounce在现在很多的javascript框架中都提供了这两个... 继续阅读 >
2020
12-02

JavaScript 如何在浏览器中使用摄像头

1.获得摄像头权限（本文使用chrome）首先确保你运行以下js所在的url是https协议的或者localhost的：constconstrains={video:true,audio:true}navigator.mediaDevices.getUserMedia(constrains).then(stream=>{console.log('得到stream的类型是MediaStream')})//在一些老的浏览器上的话：//navigator.webkitGetUserMedia//navigator.mozGetUserMedia之后你的浏览器会有弹出框，告诉你你的浏览器想... 继续阅读 >
2020
12-02

JavaScript async/await原理及实例解析

JavaScript async/await原理及实例解析 随着Node7的发布，越来越多的人开始研究据说是异步编程终级解决方案的async/await。异步编程的最高境界，就是根本不用关心它是不是异步。async函数就是隧道尽头的亮光，很多人认为它是异步操作的终极解决方案。async和await起了什么作用async起什么作用这个问题的关键在于，async函数是怎么处理它的返回值的！我们当然希望它能直接通过return语句返回我们想要的值，但是如果真是这样，似乎就没await什么事了。所以，写段... 继续阅读 >
2020
12-02

JavaScript函数柯里化实现原理及过程

简介当我们在读Vue源码到时候会发现，在它的_update实例中就用到了函数柯里化，（createPatchFunction方法）有兴趣的可以去看一下。柯里化（Currying）是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。在《Mostlyadequateguide》中，这样总结了Currying——只传递给函数一部分参数来调用它，让它返回一个函数去处理剩下的参数。Currying... 继续阅读 >
2020
11-29

JavaScript中的Proxy对象

Js中Proxy对象Proxy对象用于定义基本操作的自定义行为，例如属性查找、赋值、枚举、函数调用等。语法constproxy=newProxy(target,handler);target:要使用Proxy包装的目标对象，可以是任何类型的对象，包括原生数组，函数，甚至另一个代理。handler:一个通常以函数作为属性的对象，各属性中的函数分别定义了在执行各种操作时代理proxy的行为。描述Proxy用于修改某些操作的默认行为，也可以理解为在目标对象之前架设一... 继续阅读 >
2020
11-29

详解JavaScript中的链式调用

链模式链模式是一种链式调用的方式，准确来说不属于通常定义的设计模式范畴，但链式调用是一种非常有用的代码构建技巧。描述链式调用在JavaScript语言中很常见，如jQuery、Promise等，都是使用的链式调用，当我们在调用同一对象多次其属性或方法的时候，我们需要多次书写对象进行.或()操作，链式调用是一种简化此过程的一种编码方式，使代码简洁、易读。链式调用通常有以下几种实现方式，但是本质上相似，都是通过返回对象供之后进... 继续阅读 >
2020
11-25

前端 javascript 实现文件下载的示例

在html5中，a标签新增了download属性，包含该属性的链接被点击时，浏览器会以下载文件方式下载href属性上的链接。示例：<ahref="https://www.baidu.com"rel="externalnofollow"download="baidu.html">下载</a>1.前端js下载实现与示例通过javascript动态创建一个包含download属性的a元素，再触发点击事件，即可实现前端下载。代码示例：functiondownload(href,title){    consta=doc... 继续阅读 >
2020
11-25

如何使用 JavaScript 操作浏览器历史记录 API

History是window对象中的一个JavaScript对象，它包含了关于浏览器会话历史的详细信息。你所访问过的URL列表将被像堆栈一样存储起来。浏览器上的返回和前进按钮使用的就是history的信息。History对象包含长度属性，它包含了会话历史记录栈中的URL数量。例如，如果用户在浏览器中打开一个标签页，历史记录的长度将是1（新的标签页也是一个网页）。然后用户输入一个网址foo.com并点击回车，现在历史记录对象的长度将是... 继续阅读 >
2020
11-25

一篇文章让你搞懂JavaScript 原型和原型链

本文由葡萄城技术团队原创并首发转载请注明出处：葡萄城官网与多数面向对象的开发语言有所不同，虽然JavaScript没有引入类似类的概念（ES6已经引入了class语法糖），但它仍然能够大量的使用对象，那么如何将所有对象联系起来就成了问题。于是就有了本文中我们要讲到的原型和原型链的概念。原型和原型链作为深入学习JavaScript最重要的概念之一，如果掌握它了后，弄清楚例如：JavaScript的继承，new关键字的原来、封装及优化等概念... 继续阅读 >
2020
11-22

JavaScript 防抖和节流遇见的奇怪问题及解决

场景网络上已经存在了大量的有关防抖和节流的文章，为何吾辈还要再写一篇呢？事实上，防抖和节流，吾辈在使用中发现了一些奇怪的问题，并经过了数次的修改，这里主要分享一下吾辈遇到的问题以及是如何解决的。为什么要用防抖和节流？因为某些函数触发/调用的频率过快，吾辈需要手动去限制其执行的频率。例如常见的监听滚动条的事件，如果没有防抖处理的话，并且，每次函数执行花费的时间超过了触发的间隔时间的话?页面就会卡... 继续阅读 >
2020
11-22

JavaScript 异步时序问题

场景死后我们必升天堂，因为活时我们已在地狱。不知你是否遇到过，向后台发送了多次异步请求，结果最后显示的数据却并不正确?是旧的数据。具体情况:用户触发事件，发送了第1次请求用户触发事件，发送了第2次请求第2次请求成功，更新页面上的数据第1次请求成功，更新页面上的数据嗯？是不是感觉到异常了？这便是多次异步请求时会遇到的异步回调顺序与调用顺序不同的问题。思考为什么会出现这种问题？出现这种... 继续阅读 >
2020
11-19

JavaScript构造函数原理及实现流程解析

在学习构造函数之前我们需要知道我们学习构造函数需要学习什么：1.什么是构造函数2.构造函数用来做什么3.构造函数的执行过程4.构造函数的返回值1.所以首先我们需要知道什么是构造函数：在我看来，构造函数具有两个特点可以判断是否为构造函数：1.当函数名为首字母大写时，这个是一个可以大概判断构造函数与普通函数的一个特点，但是不是绝对正确，因为普通函数也可以是大写字母开头2.当我们需要调用构造函数时我们需要new<构造函... 继续阅读 >
2020
11-19

javascript this指向相关问题及改变方法

在学习javascript中我们往往会被this的指向问题弄的头昏转向，今天我们就来学习一下this的指向问题，和改变this指向的方法。一.this的指向问题在学习this的指向问题之前我们需要明白两点：1：this永远指向一个对象；2：this的指向完全取决于函数调用的位置；针对上面第一点我们能很好理解，因为在javascript中一切都是对象。第二点其实也是好理解，当函数调用的位置不同是，this的指向的对象就不同，所以可以说this的指向可以动态... 继续阅读 >
2020
11-19

JavaScript 如何禁止用户保存图片

场景在业务需求中不希望用户保存图片，因为是一些供内部使用的图片。思路添加事件禁止选择、拖拽、右键（简单的禁止用户保存图片，但无法阻止用户打开控制台查看，或是直接抓包）将之转换为canvas（让浏览器认为不是图片以此禁止用户对之进行图片的操作，但无法阻止抓包）禁止用户使用控制台查看源码（阻止浏览器打开控制台，但无法阻止抓包）传输图片使用自定义格式（可以阻止抓包，但需要后台配合）注：以下内容使用re... 继续阅读 >