javascript
文章平均质量分 67
小螃蟹er
永远相信,美好的事情即将发生。
展开
-
JavaScript-数组和对象的去重
JS去重-对象和数组原创 2023-06-08 14:25:03 · 498 阅读 · 0 评论 -
echarts 社区 gallery
echarts 社区 gallery 地址:makeapie.cn。原创 2023-02-01 15:29:14 · 676 阅读 · 0 评论 -
一秒钟打开在线 VS Code 阅读 GitHub 代码 github1s.com
GitHub 上出现了这样一个项目,可以使用户直接在 VS Code 界面读取 GitHub 项目的代码,实现了 GitHub 项目与 VS Code 的无缝衔接。这个项目名为 github1s,只需要在浏览器地址栏 GitHub 网址链接中的「github 」后面添加 1s ,然后 Enter 键,即可在 VS Code 界面访问该项目的 Repo 代码。据项目主页显示,项目开发者来自百度。原创 2023-01-30 11:15:24 · 244 阅读 · 0 评论 -
js颜色阶梯过渡(均匀渐变)Gradient算法(转)
html中颜色可以使用rgb和hex方式来表示。在色彩中,色相、明度、纯度也都可以产生渐变效果,并会表现出具有丰富层次的美感。本文主要讲述两种颜色RGB数值的梯级渐变算法。其中如如16进制颜色如#336600分别表示rgb模式中r的值为16进制33(即),g的值为16进制的66,和b为16进制的00,转换后用rgb完整表述为:rgb(51,102,0)。其中使用16进制进行加减乘除不方便,尤其还使用了rgb的16进制颜色组合(#336600)。因此我们可以将16进制转换为rgb单个进行梯级运算在进行组原创 2021-05-21 17:47:29 · 2872 阅读 · 0 评论 -
WEB 视频开发-MSE
如果检查主流视频网站的视频,就会发现网站的 video 元素的 src 属性都是 blob开头的字符串。为什么视频链接前面会有 blob 前缀?这是因为视频网站使用了这篇文章要讲的 MSE 来播放视频。Media Source Extensions虽然 video 很强大,但是还有很多功能 video 并不支持,比如直播,即时切换视频清晰度,动态更新音频语言等功能。MSE(Media Source Extensions)就来解决这些问题,它是 W3C 的一种规范,如今大部分浏览器都支持。它使用原创 2021-02-26 11:36:56 · 921 阅读 · 1 评论 -
PC端网页检测识别自动跳转移动端JS代码
把下面的JS代码放到网页的前面<script type="text/javascript"> var bs = { versions: function() { var u = navigator.userAgent, app = navigator.appVersion; return {//移动终端浏览器版本信息 trident: u.indexOf('Trident') > -1原创 2020-12-17 15:24:43 · 717 阅读 · 0 评论 -
Heatmap.js 一个强大简易的web动态热图
Heatmap.js 一个强大简易的web动态热图最近在做热力图效果,背景图上绘制热力图,最开始使用的事Echarts,但是Echarts绘制是基于map,还其他一些第三方的库也很多基于map,还要进行坐标转化,麻烦的一批;最后还是研究一下heatmap.js这个库。by the way:需求迫于无奈使用了阿里的G2,交互效果勉强符合,但是看他们的API的时候,真的是麻烦的一批啊,API很多很乱,慎用。接下来看Heatmap.js:官网:http://www.patrick-wied.at/stat原创 2020-12-03 19:06:41 · 6168 阅读 · 0 评论 -
视频截图、截图下载、图片base64转blob、blob转file文件流
工作中做视频相关的内容,实时视频播放、历史视频播放,视频为推拉流方式,遇到的一些处理方式,记录了一下,或许不完善,不定期更新完善直接先上代码了,后期整理let screenMagnify = function () { // debugger let player = playerInstance let root = player.root let screenShotOpt原创 2020-09-25 14:39:28 · 610 阅读 · 0 评论 -
JavaScript原生的一些东西(不定期更新)
节点操作添加节点:appendChild insertBefore删除节点:removeChild获取节点:getElementById getElementsByTagName getElementsByClassName querySelector querySelectorAll克隆节点:cloneNode创建节点: innerHTML createElement document.write()原型,原型链原型对象:系统会给我们定义的每一个构造函数都会默认绑..原创 2020-08-28 11:34:19 · 120 阅读 · 0 评论 -
前端blob对象创建文件并下载
一、Blob对象Blob对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File接口基于Blob,继承了blob的功能并将其扩展使其支持用户系统上的文件。var aBlob = new Blob( array, options );array 是一个由ArrayBuffer(二进制数据缓冲区)、ArrayBufferView(二进制数据缓冲区的array-like视图)、Blob、DOMString等对象构成的Array,或者其他类似对象的混原创 2020-08-04 18:45:01 · 988 阅读 · 0 评论 -
call、apply 和 bind 能做什么?如何使用?之间的区别?模拟一个?
解析:这里我给大家画了一张思维导图:结合这张图来说明,会清楚得多:call、apply 和 bind,都是用来改变函数的 this 指向的。call、apply 和 bind 之间的区别比较大,前者在改变 this 指向的同时,也会把目标函数给执行掉;后者则只负责改造 this,不作任何执行操作。call 和 apply 之间的区别,则体现在对入参的要求上。前者只需要将目标函数的入参逐个传入即可,后者则希望入参以数组形式被传入。在实现 call 方法之前,我们先来看一个 call 的调用示范:结合 ca原创 2020-07-13 21:44:11 · 464 阅读 · 0 评论 -
Js实现阻止浏览器返回的功能
无论pc端还是移动端,浏览器都会带有后退按钮或后退键.主要方便我们能返回以前访问过的页面,但有时候我们不得不关闭这个功能.尤其是对于一些推广落地页,用户进入后不希望它返回。目前有很多推广的朋友也在问,如何实现:“怎样才能禁用浏览器的后退按钮?”,或者“怎样才能防止用户点击后退按钮返回以前浏览过的页面?在禁止后退的页面直接添加下面的js代码即可:(function(){ if(window.history && window.history.pushState) { window.原创 2020-06-16 18:46:23 · 13617 阅读 · 4 评论 -
Async/Await替代Promise的6个理由
译者按: Node.js 的异步编程方式有效提高了应用性能;然而回调地狱却让人望而生畏,Promise 让我们告别回调函数,写出更优雅的异步代码;在实践过程中,却发现 Promise 并不完美;技术进步是无止境的,这时,我们有了 Async/Await。原文: 6 Reasons Why JavaScript’s Async/Await Blows Promises Away译者: Fundebug为了保证可读性,本文采用意译而非直译。Node.js 7.6 已经支持 async/await 了,转载 2020-05-29 11:44:08 · 339 阅读 · 0 评论 -
对于原型链的简单理解
上一篇说到 构造函数、原型、实例 之间的关系,再贴一下1、每个构造函数都有一个原型属性prototype,它指向原型对象2、原型对象都包含一个指向构造函数的指针(constructor)3、而实例都包含一个指向原型对象的内置指针(__ proto__)接下来说一下 原型链 的理解:假如让构造函数A原型对象等于另一个构造函数B的实例,那么A的原型对象包含了一个指向B原型的指针,相应的,A原型中也包含了一个指向B构造函数的指针;假如B原型又是另一个构造函数C的实例,那么上面这个关系依然成立,这原创 2020-05-26 18:18:52 · 585 阅读 · 0 评论 -
构造函数,原型,实例之间的关系
关系:1、每个构造函数都有一个原型属性prototype,它指向原型对象2、原型对象都包含一个指向构造函数的指针(constructor)3、而实例都包含一个指向原型对象的内置指针(__ proto__)代码:function Person(){ } //构造函数Person.prototype.name = "bree"; //在构造函数的原型对象上添加属性Person.prototype.isName = function(){ alert(this.name)}v原创 2020-05-18 18:58:42 · 335 阅读 · 0 评论 -
关于Gzip压缩
一、Gzipgzip是GNUzip的缩写,最早用于UNIX系统的文件压缩。HTTP协议上的gzip编码是一种用来改进web应用程序性能的技术,web服务器和客户端(浏览器)必须共同支持gzip。目前主流的浏览器,Chrome,firefox,IE等都支持该协议。常见的服务器如Apache,Nginx,IIS同样支持gzip。gzip压缩比率在3到10倍左右,可以大大节省服务器的网络带宽。而在实...原创 2020-01-09 18:15:33 · 3452 阅读 · 0 评论 -
JS异常的处理
js中的异常处理语句有两个,一个是try……catch……,一个是throw。try……catch用于语法错误,错误有name和message两个属性。throw用于逻辑错误。对于逻辑错误,js是不会抛出异常的,也就是说,用try catch没有用。这种时候,需要自己创建error对象的实例,然后用throw抛出异常。1、try……catch……的普通使用 try{ ......原创 2019-12-17 12:06:54 · 5296 阅读 · 0 评论 -
this指向问题汇总
普通函数:1、this总是代表着他的直接调用者,例如obj.fun(),那么fun()中的this就是obj;2、调用的时候,没有任何前缀,则指向window,new的时候,指向new出来的对象;3、在默认情况下(非严格模式),没找到直接调动者,则this指向window;4、在严格模式下,没有直接调用者的函数中的this是undefined;5、使用call、apply、bind绑定的......原创 2019-12-13 18:43:18 · 3756 阅读 · 0 评论 -
JS一些有趣的面试题(即时更新)
1、对象的引用 var a = {n:1}; var b = a; a.x = a = {n:2}; console.log(a.x); //undefined console.log(b.x); // {n:2} //js中变量赋值从右向左执行,但是点的优先级最高,所以先是a.x = {n:2},改变了a的内存// 但是{n:2}又赋值给了a, a此时已经等于{n:2} ,b =...原创 2019-12-13 13:27:35 · 167 阅读 · 0 评论 -
自整理var、let、const详细区别
首先,一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系? ECMAScript是一个国际通过的标准化脚本语言。JavaScript由ECMAScript和DOM、BOM三者组成。可以简单理解为:ECMAScript是JavaScript的语言规范,JavaScript是ECMAScript的实现和扩展。这三个确实倒是有点可以说的东西,他们自身的一些特性,跟相...原创 2019-12-13 12:06:08 · 242 阅读 · 0 评论 -
ES6中的Proxy和Reflect实现简单的数据双向绑定
利用ES6中的Proxy (代理) 和 Reflect 实现一个简单的双向数据绑定demo。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>proxy</title></head><body>...原创 2019-12-10 17:09:19 · 251 阅读 · 0 评论 -
JS数组中的方法以及对应的Polyfill
/** * copyWithin(): 方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度。 * entries(): 方法返回一个新的Array Iterator对象,该对象包含数组中每个索引的键/值对。 * Array.prototype.fill() : 用一个固定值填充一个数组中从起始索引到终止索引内的全部元素,arr.fill(value[, start...原创 2019-11-27 16:48:54 · 897 阅读 · 2 评论 -
JS 运行机制-EventLoop(事件循环)
JS 运行机制-EventLoop(事件循环)javascript 是单线程的JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊。JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的......原创 2019-11-25 18:11:56 · 1511 阅读 · 0 评论 -
九种跨域方式实现原理(完整版)
九种跨域方式实现原理(完整版)前言前后端数据交互经常会碰到请求跨域,什么是跨域,以及有哪几种跨域方式,这是本文要探讨的内容。一、什么是跨域?1.什么是同源策略及其限制内容?同源策略是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSRF等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源。url的组......原创 2019-10-30 10:25:01 · 256 阅读 · 0 评论 -
vue-cli3.0结合lib-flexible、px2rem实现移动端适配,完美解决第三方ui库样式变小问题
(转自:https://www.cnblogs.com/skylineStar/p/10036525.html)公司最近做的一个移动端项目从搭框架到前端开发由我独立完成,以前做移动端适配用的媒体查询,这次想用点别的适配方案,然后就采用了vue-cli3.0结合lib-flexible、px2rem实现移动端适配的方案,开发过程中也遇到一些坑,自己选的方案自己填坑吧。以下记录我的项目框架搭建及填坑...转载 2019-07-08 13:41:24 · 4701 阅读 · 7 评论 -
call、apply和bind方法的用法以及区别
call、apply和bind方法的用法以及区别call、apply、bind的作用是改变函数运行时this的指向,所以先说清楚this。以下是函数的调用方法:方法调用模式:当一个函数被保存为对象的一个方法时,如果调用表达式包含一个提取属性的动作,那么它就是被当做一个方法来调用,此时的this被绑定到这个对象。 var a = 1 var obj1 = { a:...转载 2019-06-26 13:53:43 · 124 阅读 · 0 评论 -
你所不知道的console.log()(console.log详解)
console.log,作为一个前端开发者,想必每天都会用它来做分析调试,但这个简单函数背后你所不知道的一面,很多人未必使用过,有一些也是很方便使用的基础首先,简单科普这个函数的作用。前端开发者可以在js代码的任何部分调用console.log,然后你就可以在浏览器的开发者控制台里,看到这个函数调用的那一瞬间你指定的变量或表达式的值。console.log('123');// 123 ...原创 2018-11-07 17:54:44 · 37560 阅读 · 3 评论 -
JavaScript中数组Array.prototype的常用的方法汇总
Array构造函数的API,我们可以通过控制台打印Array.prototype可以知道有以下这些方法。这是Array的原型对象的所有方法,对数组而言是可以继承所有的这些方法的: 接下来,我们就以12个比较常见常用的API开始说起: 1. join() 将数组转化为字符串,并且以某个分隔符进行连接,默认是使用的逗号“ , ”var arr1=[1,2,3]; console.log...转载 2018-05-12 15:19:22 · 1301 阅读 · 0 评论 -
token使用
token的作用以及ajax中传递token的几种方法 目录1、ajax中传递token的作用2、ajax中传递token的几种方法内容1、ajax中传递token的作用作用一:防止表单重复提交 主要原理是:用户提交表单后,会携带token到服务器,服务器将session中的token和用户请求带过来的token进行比较,如果相同,会将session中的token进行更新。若用户重复提交,则用户转载 2017-12-25 15:04:45 · 25032 阅读 · 3 评论