javascript
文章平均质量分 63
shadow_zed
有人问,你为什么这么努力?-----
因为我喜欢的东西很贵,我喜欢的人很优秀
展开
-
实现Web端即时通讯的四种方式
四种Web即时通信技术转载 2022-03-30 22:50:44 · 4016 阅读 · 0 评论 -
JS常用的循环遍历你会几种
前言数组和对象作为一个最基础数据结构,在各种编程语言中都充当着至关重要的角色,你很难想象没有数组和对象的编程语言会是什么模样,特别是 JS ,弱类型语言,非常灵活。本文带你了解常用数组遍历、对象遍历的使用对比以及注意事项。数组遍历随着 JS 的不断发展,截至 ES7 规范已经有十多种遍历方法。下面按照功能类似的方法为一组,来介绍数组的常用遍历方法。for、forEach、for ...ofconst list = [1, 2, 3, 4, 5, 6, 7, 8,, 10, 11];转载 2021-05-26 17:06:15 · 208 阅读 · 0 评论 -
script标签的type为text/template模板的使用
在js里面,经常需要使用js往页面中插入html内容。比如这样: var number = 123; $('#d').append('<div class="t">'+number+'</div>');12如果html很短还好说,但是遇到描述里面的这么大段,直接用字符串存储会很困难,因为不光要处理单引号,还需要很多「+」号把字符串一个个连接起来,十分的不方便。给<script>设置type="text/template",标签里面的内容不会被执...转载 2021-05-13 16:53:06 · 1809 阅读 · 1 评论 -
mathjs - 解决小数点计算准确问题
<script src="https://cdn.bootcdn.net/ajax/libs/mathjs/7.2.0/math.min.js"></script><script> console.log(1.3+1.1); // 2.4000000000000004 console.log(1.3-1.1); // 0.19999999999999996 console.log(1.3*1.1); // 1.4300000000000002 conso.转载 2021-03-11 16:30:03 · 938 阅读 · 0 评论 -
如何下载视频网站中video标签中的视频资源以blob:http开头的地址的资源
一、问题场景想下载知乎视频资源,却发现视频链接是这个样子的blob:https://v.vzuu.com/b6146956-6e52-406d-8909-f3f1b81ae461当时一脸懵比啊~难道blob:https是什么牛逼的新协议?于是进行了一番探索二、探寻结论结论就是blob:https并不是一种协议,而是html5中blob对象在赋给video标签后生成的一串标记,blob对象对象包含的数据,浏览器内部会解析;在web容器中的页面代码浏览器访问...转载 2021-03-04 23:55:31 · 10693 阅读 · 3 评论 -
使用js修改url地址参数并修改url地址
注: 微信小程序和公众号内屏蔽了 eval() 函数,需要用其他方法解决修改浏览器地址参数:function changeURLArg(url,arg,arg_val){ var pattern=arg+'=([^&]*)'; var replaceText=arg+'='+arg_val; if(url.match(pattern)){ var tmp='/('+ arg+'=)([^&]*)/gi'; tmp=url..转载 2021-01-19 11:12:07 · 6111 阅读 · 1 评论 -
前端路由模式详解
一、路由模式解析 要讲vue-router的路由模式,首先要了解的一点就是路由是由多个URL组成的,使用不同的URL可以相应的导航到不同的位置。 如果有进行过服务器开发或者对http协议有所了解就会知道,浏览器中对页面的访问是无状态的,所以我们在切换不同的页面时都会重新进行请求。而实际使用vue和vue-router开发就会明白,在切换页面时是没有重新进行请求的,使用起来就好像页面是有状态的,这是什么原因呢。 这其实是借助了浏览器的History API来实现的,这样可以使得页面跳转而不刷转载 2020-12-09 15:45:21 · 1905 阅读 · 0 评论 -
如何在git URL中转义`@`密码等-附http的url特殊字符转义表
Excuses:I see this:Escape @ character in git proxy passwordBut It's about http.proxy param, and p%4055 does not work for me about url param.My question:I use git version 1.7.1My password repository is: p@55And I use gitlab server, and centos for cl..转载 2020-12-07 15:44:28 · 10566 阅读 · 1 评论 -
理解WebSocket心跳及重连机制
在使用websocket的过程中,有时候会遇到网络断开的情况,但是在网络断开的时候服务器端并没有触发onclose的事件。这样会有:服务器会继续向客户端发送多余的链接,并且这些数据还会丢失。所以就需要一种机制来检测客户端和服务端是否处于正常的链接状态。因此就有了websocket的心跳了。还有心跳,说明还活着,没有心跳说明已经挂掉了。1. 为什么叫心跳包呢?它就像心跳一样每隔固定的时间发一次,来告诉服务器,我还活着。2. 心跳机制是?心跳机制是每隔一段时间会向服务器发送一个数据包,告诉服务器自己转载 2020-11-18 18:47:34 · 4777 阅读 · 8 评论 -
Javascript实现商品秒杀倒计时(时间与服务器时间同步)
在一些购物商城经常看到有很多商品做秒杀活动,也就是倒计时,本篇文章给大家介绍Javascript实现商品秒杀倒计时(时间与服务器时间同步),需要的朋友可以了解下现在有很多网站都在做秒杀商品,而这其中有一个很重要的环节就是倒计时。关于倒计时,有下面几点需要注意:1.应该使用服务器时间而不是本地时间(本地时间存在时区不同、用户自行设置等问题)。2.要考虑网络传输的耗时。3.获取时间时可直接从AJAX的响应头中读取(通过getResponseHeader('Date')来获得),服务器端不需要转载 2020-07-03 15:06:23 · 3565 阅读 · 1 评论 -
H5直播之MSE(Media Source Extensions)
参考w3c media-sourceMedia Source 系列 - 使用 Media Source Extensions 播放视频全面进阶 H5 直播无 Flash 时代,让直播拥抱 H5(MSE篇)使用 MediaSource 搭建流式播放器一、MSE 意义1.粗识 HTML5 video 标签和MSE媒体源扩展当前网页上能够搜到的HTML5和MSE相关的内容一抓一大把,本文的目的是尽量用较短的篇幅,简述浏览器为何要使用HTML5的MSE扩展。这也是在我最开始接触有关内容时的最大的疑惑。转载 2020-06-19 09:48:21 · 5276 阅读 · 0 评论 -
Data URL简介及Data URL的利弊
Data URL给了我们一种很巧妙的将图片“嵌入”到HTML中的方法。跟传统的用img标记将服务器上的图片引用到页面中的方式不一样,在Data URL协议中,图片被转换成base64编码的字符串形式,并存储在URL中,冠以mime-type。本文中,我将介绍如何巧妙的使用Data URL优化网站加载速度和执行效率。1. Data URL基本原理图片在网页中的使用方法通常是下面这种利用img标记的形式: <imgsrc="images/myimg.gif"> 这种方式...转载 2020-06-10 09:53:02 · 484 阅读 · 0 评论 -
$.extend()使用详解
1. jquery.extend(), 为jQuery类添加类方法例子1image.png例子2image.png调用直接用$.类名image.png2. jquery.extend(), 将两个或更多对象的内容合并到第一个对象。image.png当我们提供两个或多个对象给$.extend(),对象的所有属性都添加到目标对象(target参数)。如果只有一个参数提供给$.extend(),这意味着目标参数被省略。在这种情况下,jQuery对象本身.转载 2020-05-29 10:12:49 · 10982 阅读 · 0 评论 -
用户认证:基于jwt和session的区别和优缺点
背景知识:Authentication和Authorization的区别:Authentication:用户认证,指的是验证用户的身份,例如你希望以小A的身份登录,那么应用程序需要通过用户名和密码确认你真的是小A。Authorization:授权,指的是确认你的身份之后提供给你权限,例如用户小A可以修改数据,而用户小B只能阅读数据。由于http协议是无状态的,每一次请求都无状态。当...转载 2020-04-22 10:50:59 · 408 阅读 · 0 评论 -
浏览器cookie、sessionStorage和localStorage的区别
一、 概念的理解webstorage本地存储1)webstorage是本地存储,存储在客户端,包括localStorage和sessionStorage2)localStorage生命周期是永久,这意味着除非用户显示在浏览器提供的UI上清除localStorage信息,否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端(即浏览器)中保存,不参与和服务器的通信3)sess...转载 2020-04-14 17:57:15 · 340 阅读 · 0 评论 -
URL 参数编解码详解
下表中列出了一些URL特殊符号及编码+ URL 中+号表示空格 %2B 空格 URL中的空格可以用+号或者编码 %20 / 分隔目录和子目录 %2F ? 分隔实际的URL和参数 %3F % 指定特殊字符 %25 # 表示书签 %23 & URL 中指定的参数间的分隔符 %26...原创 2020-04-02 18:12:25 · 582 阅读 · 0 评论 -
GitHub OAuth 第三方登录示例教程
这组 OAuth 系列教程,第一篇介绍了基本概念,第二篇介绍了获取令牌的四种方式,今天演示一个实例,如何通过 OAuth 获取 API 数据。很多网站登录时,允许使用第三方网站的身份,这称为"第三方登录"。下面就以 GitHub 为例,写一个最简单的应用,演示第三方登录。一、第三方登录的原理所谓第三方登录,实质就是 OAuth 授权。用户想要登录 A 网站,A 网站让用户提供第...转载 2020-04-01 09:55:51 · 253 阅读 · 0 评论 -
JS for-in 和 for-of 遍历的区别
1. for-in循环for-in循环主要用于遍历对象,for()中的格式:for(keys in zhangsan){}keys表示obj对象的每一个键值对的键!!所有循环中,需要使用obj[keys]来取到每一个值!!!for-in 循环,遍历时不仅能读取对象自身上面的成员属性,也能延续原型链遍历出对象的原型属性所以,可以使用hasOwnProperty判断一个属性是不是对象自身上的属性...转载 2020-02-25 17:45:22 · 469 阅读 · 0 评论 -
event.target 和 event.currentTarget 的区别
event.targetThis property of event objects is the object the event was dispatched on. It is different than event.currentTarget when the event handler is called in bubbling or capturing phase of the...转载 2019-12-24 16:21:49 · 139 阅读 · 0 评论 -
前端文件下载方式方法总结
目录1、利用form.submit直接向后端提交,后端返回文件流 2、利于iframe直接向后端提交,后端返回文件流 3、使用windows.open下载文件 4、解决“无法根据回调函数做交互”的问题:ajax提交,后端返回在线文件地址 5、解决“无法根据回调函数做交互”的问题:jquery-download 插件 1、利用Html5的download属性进行下载 2、利用Html...转载 2019-11-21 21:35:58 · 1498 阅读 · 0 评论 -
axios 使用文档
##AxiosAxios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中。Features从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF浏览器支转载 2017-08-29 17:15:04 · 551 阅读 · 0 评论 -
前端面试中经常问到的问题:如何提高网站性能 总结
前端面试中经常问到的问题:如何提高网站性能 总结1. 使用dns预解析DNS 请求需要的带宽非常小,但是延迟却有点高,这点在手机网络上特别明显。预读取 DNS 能让延迟明显减少一些,例如用户点击链接时。在某些情况下,延迟能减少一秒钟。在某些浏览器中这个预读取的行为将会与页面实际内容并行发生(而不是串行)。正因如此,某些高延迟的域名的解析过程才不会卡住资源的加载。这样可以极大的加...转载 2019-03-03 22:51:16 · 411 阅读 · 0 评论 -
函数去抖(debounce)和函数节流(throttle)
目的以下场景往往由于事件频繁被触发,因而频繁执行DOM操作、资源加载等重行为,导致UI停顿甚至浏览器崩溃。window对象的resize、scroll事件拖拽时的mousemove事件射击游戏中的mousedown、keydown事件文字输入、自动完成的keyup事件实际上对于window的resize事件,实际需求大多为停止改变大小n毫秒后执行后续处理;而其他事件大多的需求是以一定...转载 2019-03-03 22:32:34 · 1473 阅读 · 1 评论 -
Javascript 面试中经常被问到的三个问题!
本文不是讨论最新的 JavaScript 库、常见的开发实践或任何新的 ES6 函数。相反,在讨论 JavaScript 时,面试中通常会提到三件事。我自己也被问到这些问题,我的朋友们告诉我他们也被问到这些问题。然,这些并不是你在面试之前应该学习的唯一三件事 - 你可以通过多种方式更好地为即将到来的面试做准备 - 但面试官可能会问到下面是三个问题,来判断你对JavaScript语言的理解和...转载 2019-03-03 22:04:38 · 761 阅读 · 0 评论 -
JS 获取前一个月的日期
/*总结:获取前一个月的日期之所以不简单,就是因为每个月天数不固定造成的, * 而这个方法把12个月的天数都列在一个数组里面,使之变的具体而不再抽象, * 用到某个月天数时候,只需要和数组对应位置的元素值比较即可 * */第一种:传入日期// 获取上一个月时间,返回yyyy-MM-dd字符串function ge...转载 2019-02-13 09:32:42 · 15127 阅读 · 1 评论 -
JS动态引入js、CSS动态创建script/link/style标签
一.动态创建link方式我们可以使用link的方式.如下代码所示.function addCssByLink(url){ var doc=document; var link=doc.createElement("link"); link.setAttribute("rel", "stylesheet"); link.setAttribut...转载 2019-01-31 10:23:10 · 2351 阅读 · 0 评论 -
window.open()和window.showModalDialog 的使用及传值操作
本人在使用时主要实现如下个功能, 以对话框形式弹出画面,且要求对话框置顶,不可操作其他画面,并且关闭画面时刷新父页面。window.open 可实现以对话框形式弹出画面,并且关闭画面时刷新父页面。但“对话框置顶,不可操作其他画面”本人并未找到方法。//刷新父页面Response.Write("<script>window.opener.location.href=win...转载 2019-01-30 16:50:27 · 4915 阅读 · 0 评论 -
js 创建空对象的3种方法-object.create(null) 和 {}创建对象的区别
创建对象的方法 如果要创建一个空的对象,可以使用如下的三种方法 1 2 3 var obj1 = {}; var obj2 = Object.create(null); var obj3 = new Object(); 创建空对象的区别 要创建一个干净的空对象,应该使用Object.create(null)而不...转载 2019-01-29 00:22:04 · 11066 阅读 · 0 评论 -
如何使用Chrome DevTools调试JavaScript
不要再使用 console.log! 学会在 Chrome Developer Tools 中使用断点来调试代码。作为一名新的开发人员,发现和修复 bug 挺难的。 您可能会试图随意使用 console.log() 来调试代码使代码正常工作。 不要再这样了。这篇文章将讲述正确调试的方法! 您将了解如何使用 Chrome 开发人员工具来设置断点并逐步完成代码。这是更有效的在代码中查找和修复 ...转载 2019-01-28 21:16:36 · 649 阅读 · 0 评论 -
iframe异步加载技术及性能
我们会经常使用iframes来加载第三方的内容、广告或者插件。使用iframe是因为他可以和主页面并行加载,不会阻塞主页面。当然使用iframe也是有利有弊的:Steve Souders在他的blog里面有阐述:Using Iframes Sparingly:iframe会阻塞主页面的onload事件 主页面和iframe共享同一个连接池阻塞主页面的onload是这两个问题中最影响性能的方...转载 2019-01-28 20:26:34 · 5908 阅读 · 1 评论 -
前端优化-Javascript篇之异步加载脚本
非阻塞加载脚本1.defer(关于defer的一篇好文) 目前所有浏览器都支持defer属性,但是Chrome和Firefox中只有在加载外部脚本时defer才会生效,行内脚本使用defer是没有作用的。而IE中不论什么情况,defer都有效。 defer的作用就是阻止脚本在下载完成后立刻执行,它会让脚本延迟到所有脚本加载执行完成后,在DOMContentLoaded之前执行,通俗的说...转载 2019-03-03 23:10:33 · 674 阅读 · 0 评论 -
JavaScript中的对象与JSON的区别与联系
简介JSON即JavaScript Object Natation,它是一种轻量级的数据交换格式,非常适合于服务器与 JavaScript 的交互。JSON是一种数据交换格式,像XML和YAML一样是一种在各种不同语言间传递结构化信息的方式。从另一方面来说,javascript对象是javascript语言中的一种数据类型,就像PHP中的数组、C++中类和结构体。定义JSON与javas...转载 2019-07-30 01:11:36 · 422 阅读 · 0 评论 -
解决 canvas 将图片转为base64报错: Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement'
原文链接:https://www.jianshu.com/p/6fe06667b7481:背景最近在做一个图片内容识别的项目,采用的是阿里巴巴的付费接口。大致流程为:1:用户上传图片2:将图片转为base64的格式发送给阿里的接口3:阿里接口返回图片的内容信息2:遇到的问题这里边第二步转base64 ,我采用html5的canvas,将图片绘制到画布上,然后用canva...转载 2019-05-19 23:21:06 · 3054 阅读 · 1 评论 -
js splice 方法实现数组的删除,插入,替换
一、splice 删除写法array.splice(index,n);参数含义index:数组中需要删除数据的起始位置;n:需要删除的元素,数据的个数;二、splice 插入写法array.splice(index,0,data1,data2,....);参数index:数组中需要插入数据的起始位置;0:删除的个数为0;data1,data2:...转载 2019-04-21 16:52:57 · 13819 阅读 · 0 评论 -
JavaScript数组与对象比较的正确姿势
原文:https://www.cnblogs.com/-867259206/p/6795354.htmlhttps://www.cnblogs.com/cuew1987/p/4057726.htmlJS数组比较:今天意外地发现JavaScript是不能用==或===操作符直接比较两个数组是否相等的。alert([]==[]); // falsealert([]===[...转载 2019-03-26 10:40:26 · 1797 阅读 · 0 评论 -
Javascript 严格模式详解
原文:http://www.ruanyifeng.com/blog/2013/01/javascript_strict_mode.html一、概述除了正常运行模式,ECMAscript 5添加了第二种运行模式:"严格模式"(strict mode)。顾名思义,这种模式使得Javascript在更严格的条件下运行。设立"严格模式"的目的,主要有以下几个: - 消除Javasc...转载 2019-03-26 09:02:22 · 103 阅读 · 0 评论 -
总结js常用的dom操作API
总结js常用的dom操作前言很多同学用惯了jquery操作dom,让他们用js操作的时候,常常力不从心,本文总结了常用的js的dom操作方法,供大家翻阅!其实说起js操作dom,我很久很久之前有篇文章,jquery属性的相关js实现方法,里面囊括了很大一部分js操作dom的常用方法,但是不是很系统。不能说是API,今天来系统总结一下!节点查找APIdocument.getElem...转载 2019-03-04 12:19:59 · 471 阅读 · 0 评论 -
JS实现button点击之后60秒后才可以再次点击-适用获取验证码发送短信等
<!DOCTYPE HTML><html><head> <title>JS实现button点击之后60秒后才可以再次点击</title> <meta charset="utf-8"> <meta name="viewport" content="wid原创 2019-03-04 11:07:28 · 5007 阅读 · 2 评论 -
javascript浏览器参数的操作,js获取浏览器参数
引子作为前端,不可避免的经常对浏览器地址进行操作,要获取浏览器的参数,很简单,方法也很多,我之前经常自己用js的indexof +substr来获取,这样获取相对费事一点,不是很好。今天在这里总结一下浏览器参数获取及参数的操作。js获取浏览器参数单纯的用js获取浏览器参数比较简单,我今天介绍一个用正则来写的获取参数的方法,相对比较好一些。function getQueryStri...转载 2019-01-15 20:13:57 · 1768 阅读 · 0 评论 -
url的三个js编码函数escape(),encodeURI(),encodeURIComponent()简介
引子浏览器URl地址,上网一定会用到,但是浏览器地址有中文或者浏览器url参数操作的时候,经常会用到encodeURIComponent()和decodeURIComponent()以及encodeURI()等等。关于浏览器参数操作,请看文章http://www.haorooms.com/post/js_url_canshu ,今天主要讲讲escape(),encodeURI(),encode...转载 2019-01-15 20:10:08 · 401 阅读 · 0 评论