javascript
关注
分享
扫一扫
文章平均质量分 64
世态炎凉！！
谢谢你的关注！
展开
-
node如何检测摄像头是否在线
node如何检测摄像头是否在线原创 2022-11-24 18:09:06 · 1020 阅读 · 0 评论 -
前端展示ftp文件目录
前端展示文件目录结构原创 2022-08-23 17:03:46 · 2506 阅读 · 1 评论 -
vue如何做到只刷新当前组件不刷新整个页面
只刷新当前组件不刷新整个页面原创 2022-06-13 17:01:26 · 4294 阅读 · 1 评论 -
利用MediaRecorder录制视频切片上传到ftp服务器
文章目录1.前言1.前言原创 2022-04-19 16:50:40 · 2343 阅读 · 4 评论 -
前端利用Canvas+Video合并流实现截屏和录屏功能
前端利用Canvas+Video合并流实现截屏和录屏功能原创 2022-04-10 22:12:56 · 2984 阅读 · 2 评论 -
一篇文章带你玩转前端所有模块化
文章目录1.前言2.nomorl加载1.前言我们都知道加载html文档顺序是从上到下的，当碰到js脚本的话，会严重阻塞Dom元素的解析，所以一般我们都要js脚本放到尾部，这样做的目的是让Dom元素更早的解析，为用户的更好体验，而在解析完一部分的同时也会显示一部分内容在页面上！那么我们常用的有哪些加载脚本的方式？下面我们一个一个来讨论下！2.nomorl加载正常情况下，js脚本是同步下载的！<script type="text/javascript" src="./test1.js" >原创 2021-06-15 10:36:23 · 6559 阅读 · 120 评论 -
前端js 下载zip文件并解压
昨天做项目有个需求，后端返回的数据有个字段是url,前端要通过这个url下载一个3D模型文件，这个模型文件是zip文件（里面有个json文件），拿到这个zip文件还需要解压那到json文件！看下面怎么实现的！一. 后端返回文件流，前端必须进行转换下载，请求的方式很多，我下面随便写几种！1.原生js的function getBlob() { let file_url = "http://192.168.26.70/file/file/static/threeDModel/vacuumFla原创 2021-03-18 18:28:00 · 9363 阅读 · 6 评论 -
一篇文章让你彻底搞懂this
文章目录1.默认绑定1.1 非严格模式1.2 严格模式2.隐式绑定2.1 隐私丢失3. 显示绑定3.1 call,apply3.2 bind（硬绑定）4. new 绑定5. 箭头函数绑定1.默认绑定不带任何修饰的函数引用进行调用，使用默认绑定,直白的说独立函数调用使用默认绑定1.1 非严格模式var name = "张三";function test() { console.log(this.name);//this指向window 张三};test();1.2 严格模式原创 2021-03-03 17:24:00 · 3784 阅读 · 0 评论 -
彻底明白前端常用的几种跨域方式
说到跨域，首先要理解什么是跨域，浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。一.跨域基础知识http://www.a.com:8080/a.htmlhttp://为协议，www为子域名，a.com为主域名，8080为端口，a.html为资源地址，当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了,浏览器认为这不安全原创 2021-01-15 10:16:47 · 2833 阅读 · 2 评论 -
content-type几种常见类型区别
Content-Type叫做MIME（mediaType）类型,使用Content-Type来表示请求和响应中的媒体类型信息。如果是请求头，它用来告诉服务端如何处理请求的数据，如果是响应头，它用来告诉客户端（一般是浏览器）如何解析响应的数据。下面我们来介绍下常用的几种类型！1.application/x-www-form-urlencoded请求参数格式key1=val1&key2=val2的方式进行拼接，并放到请求实体里面，如果是中文或特殊字符等会自动进行URL转码。一般用于表单提交<原创 2021-01-07 18:11:10 · 11728 阅读 · 6 评论 -
HTML5表单验证
HTML5为所有表单元素添加了一个JS属性：input.validity(有效性),我估计很多人都不知道这个属性！下面我们先来看一段简单的代码：<body ng-Controller="myController"> <form action=""> <input type="text" id='test' ng-model='context'> <input type="submit" value="提交" />原创 2020-09-30 15:57:01 · 1629 阅读 · 0 评论 -
彻底明白http强缓存和协议缓存
我们整天和浏览器和打交道，应该都听过强缓存和协议缓存，强缓存和协商缓存（也有叫对比缓存）都是浏览器的缓存策略，需要先明确一点，既然是浏览器的缓存，缓存的数据都是存放于客户端的机子上的，只是根据优先级不同，存储位置不同，还可以进行细分而已，比如 Service Worker（代理缓存），Memory Cache（内存缓存），Disk Cache（磁盘缓存）！1.浏览器如何缓存介绍当我们打开一个页面时候，请求回来了html、css、js、图片等文件，会把这些文件储存在本地缓存中，当我们下次打开这个页面的时候原创 2020-08-01 18:15:09 · 2329 阅读 · 2 评论 -
js的事件委托（事件代理）
1.什么是事件委托（事件代理）？事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件!例如：（你和你的同事）在网上买了东西，（你和你的同事）和公司前台的小姐姐说，如果有我们的快递你先帮我们收着，当快递员把快递送到公司，公司前台的小姐姐就会帮（你和你的同事）先签收着！你和你的同事不是委托这个小姐姐帮你们收快递？那么这个事件就叫事件委托（事件代理）！2.事件委托的原理?（不懂事件冒泡可以点击彻底理解js的事件流）事件委托是利用事件的冒泡原理和event.target(事原创 2020-07-18 17:20:34 · 282 阅读 · 0 评论 -
彻底理解js的事件流
我们都知道js和html之间进行交互都是通过事件来执行的，那么就有必须知道事件的执行顺序了！1.事件流概念描述的是从页面中接收事件的顺序，可以理解为当事件发生时，执行事件的顺序。这个顺序就像按照一个流执行的。这个流是怎么流的呢？不同的事件模型事件流（不懂的可以点击这里js中事件绑定）也不一样！下面我简单的说下区别！！1.事件模型(事件绑定方式)(https://blog.youkuaiyun.com/ws9029/article/details/107402484)Dom 0级模型IE模型Dom 2级模型原创 2020-07-17 18:05:16 · 480 阅读 · 0 评论 -
js中事件绑定
在JS事件中是js中很重要的一块内容，有时候面试的时候常常会问到，我们写程序几乎天天和事件打交道，貌似很简单的问题，你真的理解了吗？什么是事件的三要素，事件的模型有几种？事件是怎么传播的？对于事件流你怎么理解？什么是捕获（冒泡）阶段，执行顺序是什么？什么是事件代理？等！如果你都了解了，那么你不要浪费时间了，请关闭网页！下面我会对这些内容分几遍文章，从浅入深的来一一分析！ 下面我来说下事件的三要素和js中的几种事件模型！1.事件三要素首先我们必须理解事件是什么？我们生活中很多事件，比如关灯啊，跑步啊，摸鱼原创 2020-07-17 14:44:11 · 374 阅读 · 0 评论 -
彻底理解Javascript执行上下文
1 .脚本执行js引擎都做了什么呢？你是否知道？1.语法分析2.预编译3.解析执行语法分析就是检查你的语法有没有错误，然后预编译简单理解就是在内存中开辟一些空间，存放一些变量与函数，我的理解这个过程中其实包括上下文的创建（当然你可以把全局script代码看成一个自调函数），后面会详细解释清楚，解析执行的意思就是执行代码了！2.什么是执行栈？执行栈，也叫调用栈，它是用来储存函数的执行上上文的，首先执行js代码时，之前我说过你可以把全局script代码看成一个自调函数，此时会创建一个全局执行上下文，原创 2020-07-10 14:43:03 · 330 阅读 · 1 评论 -
彻底了解toString和valueOf区别
toSring和valueof 两者都是对象的方法！前者返回对象的字符串，后者返回对象的原始值，如果没有原始值则返回对象本身！1.toSring()直接看代码console.log((1).toString());//1console.log((10).toString(2))//1010console.log(("1").toString());//1console.log((false).toString());//falseconsole.log(({p:1}).toString());原创 2020-07-03 17:34:03 · 7540 阅读 · 2 评论 -
js undefined和null区别
js中 underfined和null我们平时开发中都很常见，但是它们什么区别？下面我们详细讲解下他们！1.undefined1.undefined是个基本类型，顾名思义，未定义，没有定义这个值，所以给个undefined！var a ;console.log(a);//undefined2.即便没声明变量，也可以用typeof来判断，其他地方用到这个未声明的变量会报错！console.log(typeof b);//undefinedconsole.log(b)//Uncaught Ref原创 2020-07-03 15:02:57 · 797 阅读 · 0 评论 -
JS中数据类型的判断（ typeof，instanceof，constructor，Object.prototype.toString.call()区别)
js判断数据类型很有多种方法，下面主要说下 typeof，instanceof，constructor，Object.prototype.toString.call()区别!1.typeof这个最熟悉不过了，判断数据类型很常用的方法！但是它都能判断什么数据类型呢？console.log(typeof 2);//numberconsole.log(typeof "2");//stringconsole.log(typeof true);//booleanconsole.log(typeof und原创 2020-07-02 17:53:20 · 785 阅读 · 0 评论 -
js中数据类型的转换
在js中数据类型转换只有3种，转换的话分强制转换和自动转换，下面我来分别介绍下1.转换为String类型一.强制转换1.Number类型和Boolean转string类型（调用toString()方法）var a = 10, b = true; a.toString();//'10' b.toString();//'false' a.toString('2');//'1010' a.toString('8');//'12' a.toString('16原创 2020-07-02 12:00:58 · 960 阅读 · 0 评论 -
&& 、 ||和!! 运算符分别能做什么？
很明显这几个都是逻辑运算符！基本用法我就不说了，自己去看文档,先看几个简单的例子吧!var a = null, b = 10;if (b >= 10) { a = 1;} else if (b >= 20) { a = 2;} else if (b >= 30) { a = 3;} else if (b >= 40) { a = 4;};这样写是不是很难看，有些人还会用 switch，可能看上去会舒服点！那下面我们用&原创 2020-07-01 19:19:53 · 10926 阅读 · 0 评论 -
js的数据类型有哪些,值是如何存储的？
js的数据类型有基本类型和引用类型1.基本数据类型（BS3N）1.Boolean(B)2.String(S)3.underfined(N)4.Null(N)5.Number(N)6.symbol(ES6的)基本数据类型都储存在栈中（stack），栈是有结构的，每个区块都是按照后进先出的方式次序存放，基本类型的数据相对是比较稳定的，占的内存也比较小，所有寻找速度比较快，如果基本类型复制的话，栈中重新开辟个新的内存空间来储存新复制的新值，所以两者是独立的，没有任何关联！2.引用数据类型（复杂类原创 2020-07-01 11:19:52 · 1377 阅读 · 0 评论 -
DOM事件绑定的this问题
先上几道面试题（我们公司面试前端的）1.<input id="name" type="text" value="name" onclick="alert(this.value);" /><input id="name" type="text" value="name" value="Laruence" />function showValue() { alert(this);};document.getElementById('name').onclick原创 2020-06-15 16:29:49 · 1231 阅读 · 0 评论 -
js 之sort排序原理详解
看到sort大家应该很熟悉不过了，还是简单说下它的用法，然后再来一步步来模拟下实现它的原理吧！1.sort用法首先sort是数组的一个方法，sort() 方法用于对数组的元素进行排序！然后返回排序后的数组。默认排序顺序是升序，建立在将元素转换为字符串，然后比较其UTF-16代码单元值的序列的基础上，请注意，该数组按位置排序，并且不进行任何复制！一.默认无参数情况var arr=[0,11,1,22,3,44,5]console.log(arr.sort())//[0, 1, 11, 22, 3,原创 2020-06-13 18:36:55 · 14607 阅读 · 2 评论 -
js 对惰性函数的理解
平时我们写代码的时候，有时间会经常写写if…else判断语句，比如一些浏览器的兼容问题,每次都要判断到底是哪个浏览器，然后再决定用哪个方法，每次执行的时候都需要先判断，有些情况这个判断条件很耗性能且又频繁执行，那么问题就来了！是不是会很卡？，我们先来看个例子！function isChrome() { return /chrome/i.test(navigator.userAgent);};function isFirefox() { return /Firefox/i.test(navigat原创 2020-05-30 18:35:23 · 2845 阅读 · 0 评论 -
赋值，浅拷贝，深拷贝的区别
一、赋值（Copy）赋值是将某一数值或对象赋给某个变量的过程，分为下面 2 部分：基本数据类型：赋值，赋值之后两个变量互不影响引用数据类型：赋址，两个变量具有相同的引用，指向同一个对象，相互之间有影响let a = 10;let b = a;console.log(a);//10console.log(b);//100a = 100;console.log(a);//100console.log(b);//10对基本类型进行赋值操作，两个变量互不影响。let a = { age:原创 2020-05-30 16:51:28 · 1621 阅读 · 2 评论 -
js for in 和for区别详解
在JavaScript中，对象的属性分为可枚举和不可枚举之分，它们是由属性的enumerable值决定的，我们应该清楚什么是枚举属性，什么是不可枚举属性？1.怎么判断属性是否可枚举一.propertyIsEnumerable方法每个对象都有一个 propertyIsEnumerable 方法。此方法可以确定对象中指定的属性是否可以被枚举，但是通过原型链继承的属性除外。如果对象没有指定的属性，则此方法返回 false,propertyIsEnumerable() 方法返回一个布尔值，表示指定的属性是否可原创 2020-05-16 18:28:17 · 1073 阅读 · 0 评论 -
前端关于retry组件的方法和实现
前端接口请求数据是再熟悉不过了，但是有些时候网络问题，或者其他问题导致的失败请求还是很常见的！有些是真的失败需要retry,有些是成功，成功之后再告诉你需要retry, 接下来我来分享下我做项目里面自己手写了一个 retry组件,基本能满足我项目的需求（如果有不正之处，请指正！谢谢！）1思路首先需要哪些参数呢？不能一直retry吧，如果要是失败了，几秒钟可以发送几百个请求，服务器都被你搞爆了！...原创 2019-11-11 18:50:00 · 819 阅读 · 0 评论 -
前端关于pdf文件流下载分析和总结
前几天做builder项目有个pdf下载需求，然后把在做这个的问题和方法记录下来（仅供参考）。1.概念有些同学很有可能会疑问，pdf下载和预览功能，什么时候是下载？什么时候是预览？其实这个和几方面的因素有关系，假如一个a标签，herf指向个路径 ，如下图：那么默认情况打开是预览的（如果浏览器有插件是直接预览的）：那么如果服务器做了对文件配置过滤（我到网站随便copy的一段）：那么...原创 2019-11-11 16:56:49 · 2824 阅读 · 0 评论 -
js 编码解码 encodeURI，encodeURIComponent，decodeURI，decodeURIComponent，escape，unescape区别
1.概念理解1.encodeURI，encodeURIComponent是对字符进行编码（它们是一对）。2.decodeURI，decodeURIComponent是对编码过的字符进行解码（它们是一对）。3.encodeURI，encodeURIComponent不会对 ASCII 字母和数字进行编码和解码，也不会对这些 ASCII 标点符号进行编码和解码，比如（!，"，#，$，%，&...原创 2019-10-26 17:39:46 · 1655 阅读 · 0 评论 -
javascript执行机制
对于javascript执行机制，大家应该并不陌生，很多面试题都会出现，比如： setTimeout(function () { console.log('定时器') }); new Promise(function (resolve) { console.log('Promise'); resolve(); }).the...原创 2019-09-07 18:43:38 · 1359 阅读 · 0 评论 -
javascript中bind多次绑定和apply,call,bind同时使用的深入理解
之前在看angualr的源码，看到一个很奇怪的写法，当时只是大概弄意思，也没深入研究，最近有时间深入研究了下，然后把自己的分析和理解记录下来。1.当bind,call或者apply同时使用先看一段angualr的源码： function instantiate(Type, locals, serviceName) { // Check if Type is annotated...原创 2019-07-25 18:15:59 · 1692 阅读 · 0 评论 -
深入理解apply,call,bind及源码实现
对于前面2个 apply，call大家应该非常熟悉了，都可以改变this指向，都可以穿参数，但是bind的话很多人可能觉得和它们没有什么区别，估计用bind也用的少，下面我来一一分析下各自的实现原理：1.call方法1.第一个参数都是要this指向的对象。2.使用的单个参数进行传递。3.用于确定了函数的形参有多少个的时候用。举个例子： var name = '李四' ...原创 2019-07-24 17:10:06 · 1095 阅读 · 2 评论 -
浅谈javascript设计模式之工厂模式
什么是工厂模式？我个人理解工厂模式是用来创建对象的一种最常用的设计模式，当我们创建对象时候，不暴露对象的具体逻辑，而是把它封装在一个函数里面，那我们就可以把这个函数视为工厂。工厂模式又可以根据抽象程度划分为：简单工厂，工厂方法，抽象工厂。下面我一一介绍一下这几种模式：1.简单工厂我个人理解简单工厂就是一个要什么我就生产什么的工厂，用代码来解释的话就好比足球类，篮球类，都放在一个函数里面，当我...原创 2019-02-12 09:03:03 · 1779 阅读 · 0 评论 -
setInterval 和setTimeout 清空定时器，返回值,赋值为null的区别
说到定时器，很多人都不陌生，觉得这个有什么说的，很简单的了，其实你真正的理解了它了吗？ 定时器的返回值是什么？clearInterval和 null有什么区别，可能有些干了几年的都不知道，下面我以setInterval为例来依次说下：1.定时器的返回值定时器是有返回值得，返回值代表着是第几个定时器，类型是number类型，也可以用来取消定时器，它是定时器的唯一标识符。 var num = 1...原创 2019-03-29 11:18:33 · 5974 阅读 · 6 评论 -
详谈js函数中的防抖和节流
其实很多同学对这两个的定义模糊不清，包括我之前学的时也感觉没什么区别！，当你深入研究下，其实两者的区别很大的。1.节流节流顾名思义就是节约流水（流量），流水于是我联想到水龙头，当你拧开水龙头（力度很大），水会很猛的往下喷出来，其实我们并不需要那么大的水流，我们可以把水龙头关小，让它一滴滴的往下流（当然没人会这么用，除非开关关不拢），这样就节约了流水，所谓节流也是一样的道理，当一个函数再不断的执...原创 2019-03-28 19:48:02 · 1744 阅读 · 0 评论 -
浅谈js的常用继承封装和多态
好久没有写博客了，以前对js的继承都很模糊，最近重新整理了些资料重新温习了一下！首先什么是构造函数？什么是原型？什么是实例化对像？，继承和实例化对象有什么区别？继承方式有哪些？各自有什么区别和优缺点？各自原理是什么？等等，下面我来从浅入深的来一 一介绍下，下面是我的个人见解，如有不对之处，请指正，谢谢！javaSctript是门弱语言，没有类的概念，但是我们可以像其他语言一样可以模拟类的概念...原创 2019-01-19 19:52:59 · 2245 阅读 · 45 评论 -
DOMContentLoaded和onload事件区别和兼容
DOMContentLoaded事件和onload事件区别和兼容原创 2017-07-04 17:35:53 · 4083 阅读 · 1 评论 -
JS中为false的几种情况和typeof的返回值
在javascript中有哪几种情况为false:原创 2017-07-02 16:23:24 · 1807 阅读 · 0 评论