写在前面 我花了将近一个多月的时间断断续续写下这篇博文,并精心写下完整demo,写博客的辛苦大家懂的,所以转载务必保留出处.本文所有涉及到的大部分代码均在这个demo里面:https://github.com/sxei/chrome-plugin-demo ,大家可以直接下载下来运行. 另外,本文图片较多,且图片服务器带宽有限,右下角的目录滚动监听必须等到图片全部加载完毕之后才会触发,所以请耐心等待加载完毕. 本文目录: demo部分截图: 前言 什么是Chrome插件 严格来讲,我们正在说的东
javascript技巧
Chrome插件(扩展)开发全攻略(完整demo)
JavaScript实现可拖拽的进度条
本文实例为大家分享了JavaScript实现可拖拽的进度条的具体代码,供大家参考,具体内容如下 一.进度条实现 <html> <head> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">
如何在uniapp项目中使用mqtt
由于要取一些实时数据并在手机app上展示,就想到用mqtt进行即时通讯. 下面附上uniapp中引入mqtt的全过程: 一.uniapp插件市场的参考插件 https://ext.dcloud.net.cn/plugin?id=854 二.具体引入过程 1.安装mqtt和uuid 在uniapp项目根目录下分别运行安装mqtt和uuid的命令行,因为后面会用uuid生成mqtt的clientId,所以这边就一起安装了. npm install mqtt@3.0.0 npm install uui
JavaScript 检测文件的类型的方法
我们会想到通过 input 元素的 accept 属性来限制上传的文件类型: <input type="file" id="inputFile" accept="image/png" /> 这种方案虽然可以满足大多数场景,但如果用户把 JPEG 格式的图片后缀名更改为 .png 的话,就可以成功突破这个限制.那么应该如何解决这个问题呢?其实我们可以通过读取文件的二进制数据来识别正确的文件类型.在介绍具体的实现方案前,阿宝哥先以图片类型
JS如何使用剪贴板操作Clipboard API
一.Document.execCommand() 方法 Document.execCommand()是操作剪贴板的传统方法,各种浏览器都支持. 它支持复制.剪切和粘贴这三个操作. document.execCommand('copy')(复制) document.execCommand('cut')(剪切) document.execCommand('paste')(粘贴) (1)复制操作 复制时,先选中文本,然后调用document.execCommand('copy'),选中的文本就会进入剪
JavaScript JSON.stringify()的使用总结
一.使用方法 1.基本用法 JSON.stringify()可以把一个JavaScript对象序列化为一个JSON字符串. let json1 = { title: "Json.stringify", author: [ "浪里行舟" ], year: 2021 }; let jsonText = JSON.stringify(json1); 默认情况下,JSON.stringify()会输出不包含空格或缩进的JSON字符串,因此jsonText的值是这样的: &q
Javascript中函数分类&this指向的实例详解
JS中定义函数的三种方式 通过实例来说明吧 <script> //method1 function fn() { console.log('fn created '); } //method2 var fn2 = function () { console.log('fn2 created'); } //method3 var fn3 = new Function('test', 'console.log(test);'); fn3('fn3 test'); console.dir(fn3);
如何用JS追踪用户
一.同步 AJAX 数据发回服务器的常见做法是,将收集好的用户数据,放在unload事件里面,用 AJAX 请求发回服务器. 但是,异步 AJAX 在unload事件里面不一定能成功,因为网页已经处于卸载中,浏览器可能发送,也可能不发送.所以,要改成同步 AJAX 请求. window.addEventListener('unload', function (event) { let xhr = new XMLHttpRequest(); xhr.open('post', '/log', fal
JavaScript如何利用Promise控制并发请求个数
一.场景 假设现在有这么一种场景:现有 30 个异步请求需要发送,但由于某些原因,我们必须将同一时刻并发请求数量控制在 5 个以内,同时还要尽可能快速的拿到响应结果. 如图所示: 上图这样的排队和并发请求的场景基本类似,窗口只有三个,人超过三个之后,后面的人只能排队了. 二.串行和并行 串行:一个异步请求完了之后在进行下一个请求 并行:多个异步请求同时进行 串行举例: var p = function () { return new Promise(function (resolve, reje
Jupyter Notebook运行JavaScript的方法
后面也加了怎么在 VSC 中使用 Jupyter Notebook-- 安装 Anaconda 安装部分我是直接使用 Anaconda 安装的,这个下载 msi 就可以了,没有什么难的. 遇到报错,以及配置 Anaconda 报错信息如下: D:\>jupyter notebook Traceback (most recent call last): File "C:\ProgramData\Anaconda3\Scripts\jupyter-notebook-script.py"
详解JS中你不知道的各种循环测速
前言 在测试循环速度之前,我们先来创建一个有 100 万数据的数组: const len = 100 * 10000; const arr = []; for (let i = 0; i < len; i++) { arr.push(Math.floor(Math.random() * len)); } 测试环境为: 1.电脑:iMac(10.13.6): 2.处理器:4.2 GHz Intel Core i7: 3.浏览器:Chrome(89.0.4389.82) 1. for 循环 for
JavaScript数据类型转换详解（推荐）
JS数据类型 在 JavaScript 语言中数据类型分为2大类:基本数据类型和复杂数据类型 基本数据类型有: number string boolean null undefined symbol bigint 复杂数据类型有: 标准普通对象:object 标准特殊对象:Array.RegExp.Date.Math.Error-- 非标准特殊对象:Number.String.Boolean-- 可调用/执行对象「函数」:function 类型之间的转换 类型转换可以分为两种:隐式类型转换 和
如何实现axios的自定义适配器adapter
1. 适配器要实现的功能 我们在基于 axios 实现额外的数据模块时,应当与 axios 的模式进行对齐.因此在返回的数据格式上,实现的功能上尽量保持一致. 1.1 promise 和工具 所有的适配均应当实现为 Promise 方式. 而且,有些功能的实现,axios 将其下放到了适配器中自己进行实现,例如 url 的拼接:即 baseURL 和 url 的拼接,若存在 baseURL 且 url 为相对路径,则进行拼接,否则直接使用 url: 参数的拼接:若是 get 请求,需要自行将 o
JavaScript中实现new的两种方式引发的探究
前言 当你 new 一个构造函数时发生了什么? "众所周知"的三步: 创建一个空对象,将它的引用赋给 this,继承函数的原型:通过 this 将属性和方法添加至这个对象:最后返回 this 指向的新对象,也就是实例. 一般来说在js中大概是这样的: function Mynew(parent,...rest){ let obj={}; obj.__proto__=parent.prototype; let res=parent.apply(obj,rest); return type
JS如何让你的移动端交互体验更加优秀
1. 即时反馈 我们在玩游戏的过程中,通常都会遇到一个词:"打击感",通俗的理解就是我们做出的每一个操作,都有很强烈的反馈,比如视觉上的动画变化,听觉上产生的声音,或者移动设备的震动感等. 1.1 按钮的即时反馈 在前端页面中,也应当像游戏中的打击感一样,用户任何的操作都应当予以即时的反馈,告诉用户他的操作是有效的,系统已收到他的操作,内部正在处理中. 例如用户在点击页面中的按钮时,按钮最好有一种被按下的效果: button:active { transform: translateY
JavaScript 如何在线解压 ZIP 文件
一.ZIP 格式简介 ZIP 文件格式是一种数据压缩和文档储存的文件格式,原名 Deflate,发明者为菲尔·卡茨(Phil Katz),他于 1989 年 1 月公布了该格式的资料.ZIP 通常使用后缀名 ".zip",它的 MIME 格式为 "application/zip".目前,ZIP 格式属于几种主流的压缩格式之一,其竞争者包括RAR 格式以及开放源码的 7z 格式. ZIP 是一种相当简单的分别压缩每个文件的存档格式,分别压缩文件允许不必读取另外的数据而
js如何构造elementUI树状菜单的数据结构详解
背景说明 elementUI中自带树状菜单,就是数据结构有点复杂,偏向json风格. 数据库中菜单数据是二维表格,通过parentPk定义上下级,是list型. 需要把list转换成tree的结构. elementUI树状菜单的数据结构 每个节点有4个属性,id.label.newVal.children数组: 通过children数组包含关系标示上下级. var treeData={ id: 1, label: '一级 1', newVal: "", children: [{ id:
详解操作cookie的原生方法cookieStore
1. 平时如何操作 cookie document.cookie 能获取到当前域所有的 cookie 字符串.每个 cookie 用分号进行隔开: document.cookie; // "a=1; b=2; c=wenzi" 操作 cookie,均是在操作 document.cookie.如下面就是我常用的一段代码: /** * 写cookies * @param {string} name 写cookie的key * @param {string|number} value 写co
JS带你深入领略Proxy的世界
1. Proxy 的基本结构 Proxy 的基本使用方式: /** * target: 表示要代理的目标,可以是object, array, function类型 * handler: 是一个对象,可以编写各种代理的方法 */ const proxy = new Proxy(target, handler); 例如我们想要代理一个对象,可以通过设置 get 和 set 方法来代理获取和设置数据的操作: const person = { name: 'wenzi', age: 20, }; con
如何理解JS函数防抖和函数节流
概述 函数防抖和函数节流都是定义一个函数,该函数接收一个函数作为参数,并返回一个添加了防抖或节流功能后的函数. 因此可以将函数防抖和函数节流看作是一个函数工厂,负责对传进来的函数进行相应的加工改造,然后产出一个新的带有某种功能的函数. 函数防抖是某一时间内只执行一次,而函数节流是间隔时间执行 假如有这样一个场景:在某一页面,有一个按钮是 "加载更多",这个按钮的作用就是使用 ajax 从后端服务器请求更多的数据展示在页面,我们都知道,ajax 请求的响应是一个异步的,会存在一定的响应时