- 博客(24)
- 收藏
- 关注
RSS订阅原创 Promise的运行原理以及重写Promise内置类
1.为什么用？假设我们需要发三次请求A,B,C,B请求需要用到A请求回来的数据，C需要用到B请求回来的数据，怎么发送？$.ajax({ url:'jsonA.json', success(data) { $.ajax({ url:'jsonB.json', success(data) { ...
2019-07-19 20:40:15
1052
2
原创 宏任务 && 微任务 && async && await（图解）
1.宏任务和微任务宏任务和微任务是等待任务队列中的异步任务的处理机制；(JS执行有同步任务队列和等待任务队列)浏览器的任务队列：主任务队列存储的都是同步任务；等待任务队列存储的都是异步任务；首先浏览器会把主任务队列中的同步任务挨个全部执行完，然后再去等待任务队列中看哪个任务可以执行了，然后把该执行的任务放到主任务队列中去执行，等这个任务执行完，再去等待任务中看谁可以执行了，再把...
2019-07-15 16:33:48
6182
5
转载 关于浏览器css选择器性能优化
关于浏览器css选择器性能优化 作为一个前端开发， 我觉得很有必要了解浏览器对css选择器的解析，因为这个关系到页面的渲染，高效的方式、避开开销大的方式这些无疑为网站加载缩短了时间。 最近在新的项目中陷入了一个误区，也是出于对jquery使用的了解，于是把jquery中选择器的优化放到了写css上面，但是发现其实这两者是不一样的，浏览器解析css是本身默认的规则，而jquery是模拟出来...
2019-07-13 20:13:32
284
原创 javascript中的数组方法(包含数组自带的8种遍历方法)
// push(参数列表)：向数组末尾追加新内容，返回增加后数组长度（原数组改变，返回数组长度）,参数之间使用逗号隔开，数组中的每一项可以说是任意数据类型，会改变原数组结构 let ary= [1,2,3]; ary.push(4); // => 返回长度4，原数组改变为[1,2,3,4] ary.push(5,6); // =>...
2019-07-08 21:03:01
529
转载 http请求的报文结构
HTTP请求报文格式:请求行，多个请求头，一个空行，实体内容。1.请求行：请求方法，请求资源部分名称、协议版本组成。请求方法包括GET、HEAD、PUT、POST、TRACE、OPTIONS、DELETE以及扩展方法。常用的有HTTP/1.0和HTTP/1.1。Post和get的区别：如果是get提交，请求参数就会附在请求的URL后面作为请求地址的一部分传到服务器，暴露数据，有安全隐患...
2019-07-08 18:58:37
337
原创 webStrom自带的代码上传服务器功能
我们的代码需要上传到服务器（有很多的FTP工具，如FileZilla、IDE也带、写脚本也可以上传）；今天来讲讲webstrom自带的上传
2019-07-08 14:01:13
216
原创 javascript中的字符串常用方法
// indexOf(str,index)-----查找一个指定字符串在字符串中的首次出现位置，没有返回-1，index为开始查找位置，0开始（原字符串不变） // lastindexOf（）----方法查找指定字符最后出现位置（原字符串不变） let str='asdfaf'; str.indexOf('a'); // => 0 0是a的首...
2019-07-08 13:51:52
211
原创 前端三种本地存储方式+indexedDB浏览器数据库存储
1.cookie存储：特征： 1.不同的浏览器存放的cookie位置不一样，也是不能通用的。 2.cookie的存储是以域名形式进行区分的，不同的域下存储的cookie是独立的。 3.我们可以设置cookie生效的域（当前设置cookie所在域的子域），也就是说，我们能够操作的cookie是当前域以及当前域下的所有子域 4.一个域名下存放的cookie的个数是...
2019-07-07 21:37:18
3366
原创 客户端浏览器一次http完整请求过程流程图(图文结合诠释请求过程)
先上一张图给大家看看http请求流程图相信看完这张图后大家对一次请求也有了大致的了解了，当前其中还有很多细节小编没有画出来，然后我们来看看部分过程的细节所以其流程大致如下：①：DNS解析域名得到IP地址②：客户端与服务器建立连接(TCP三次握手)③：客户端发起请求④：服务器接收到请求根据端口号.路径等找到对应资源文件，响应源代码给客户端⑤：客户端拿到请求到的数据(htm...
2019-07-06 17:23:59
19333
7
原创 zepto+less写QQ音乐播放界面，进度条同步，歌词同步高亮等等(带注释，可参考可直接使用)
不多说，直接上代码，注释都写在代码里清清楚楚less@sizeMan:100%;//关键帧动画函数.keyframes(@name:move,@content){// @name:动画名，@content：动画内容 @keyframes @name {@content();}}html{ font-size: 100px; height: @sizeMan;}...
2019-07-05 20:54:09
5352
6
原创 阿里巴巴矢量图全选加入购物车以及下载iconfont字体图标文件步骤
阿里巴巴矢量图网址：https://www.iconfont.cn/collections/index?spm=a313x.7781069.1998910419.3上图摘自于(https://blog.csdn.net/daxianghaoshuai/article/details/84991922)加入购物车后单击购物车添加至项目右边加号文件夹添加新项目，输入项目名然后确认然后下...
2019-07-03 20:25:20
2119
2
原创 call，apply，bind方法改变this指向的原理
Function.prototype.myCall=function myCall(obj,...ary){ // this指向调用myCall的函数 =》fn.myCall(obj,...ary) =》 myCall中的this指向fn函数 obj.fn=this; // 将this挂到obj的属性上,然后使用obj.fn(...ary)执行f...
2019-07-01 22:27:29
693
原创 图片懒加载/图片延时加载(封好的方法带注释可研究可直接使用)
这是是一个封装好的图片懒加载的方法，为图片加上了一个渐现的动画（一开始拿js写的渐现，后来发现效果太差改用css来写的动画，渐现效果确实不错，不得不说c3的动画确实比js的流畅太多了，直接将方法和动画复制过去就可以调用，lazyLoad传入图片元素集合或者单张就可以了）/*图片懒加载动画*/@keyframes c3 { 0%{opacity: 0.0} 50%{opacity...
2019-06-30 22:04:49
1704
1
原创 教你怎么玩indexedDB浏览器数据库，执行流程以及常见错误等等
（小编最近在研究indexedDB数据库，在网上看的文档都有些不好理解，像小编这个接触过mySql，Oracle，SQL Server的人看了都是云里雾里的，所以决定自己写一篇关于indexedDB是数据库的博文出来帮助小白更直白的了解,转载请注明出处，谢谢）那么先给大家上一张图让大家看看数据表的结构为什么要使用indexedDB浏览器数据库？随着浏览器的功能不断增强，越来越多的网站开始...
2019-06-30 20:25:38
4470
3
原创 三行原生js教你写出好看的手风琴特效选项卡！
html<ul> <li class="active"><p>1</p><img src="img/10.jpg"></li> <li><p>2</p><img src="img/4.jpg"></li> <li><p>...
2019-06-29 19:15:46
414
原创 页面镂空文字？使用c3的-webkit-background-clip属性进行文字透明显示后面内容！
今天小编在浏览网页时发现这样的一个效果，效果很炫酷，研究了下发现代码…真简单！原理就是两个重合的div，后面一个div上正在播放一段视频，前面的div上面写上我们想要镂空的文字，然后通过-webkit-background-clip: text;进行文字的裁切镂空，color为transparent透明就可以了<div class="main"> <div ...
2019-06-29 16:43:33
1987
原创 js拖拽以及H5的原生拖拽原理讲解
js拖拽css * { margin: 0; padding: 0; } .box { position: absolute; left: 100px; top: 100px; width: 200px; height: 200px; backgr...
2019-06-28 20:28:00
1374
原创 如何简单快速的获取到页面上的svg图标？
这里小编提供两个方法都可以获取到页面中的svg图标火狐浏览器快速获取小编拿花瓣网的这个svg图标来进行演示第一步，在火狐浏览器中鼠标右击 => 查看页面信息在媒体选项中找到我们要获取的svg图标项，注意的是svg很多都是白色的，所以我们单击发现下面的显示框什么都没有，其实是有的，只不过是白色的我们看不到而已然后右下角另存为即可会给我们生成一个.svg的文件然后直...
2019-06-28 12:51:10
13090
原创 原生Js放大镜实例(附图附讲解可直接复制研究使用，小白福利)
(个人理解的画图在最后，审美差了点请见谅，)css*{ margin: 0; padding: 0; } body>div{ width: 1200px; height: 600px; margin: 100px auto; position: relative; }...
2019-06-26 21:34:51
462
转载 CSS3 3D transform变换，不过如此
（这篇关于css 3d的文章算是开启了我的css3d概念了，确实写的很容易理解，小编苦苦寻找的经典好文）一、写在前面的秋裤早在去年的去年，我就大肆介绍了2D transform相关内容。看过海贼王的都知道，带D的家伙都不是好惹的，2D我辈尚可以应付，3D的话，呵呵，估计我等早就在千里之外被其霸气震晕了~~看看下图女帝的动作以及神情，就可以知道名字带D的家伙的厉害！最近折腾iPa...
2019-06-26 17:52:41
1029
原创 javascript中的正则
1.正则只能用来处理字符串,.处理一般包含两个方面 ①：验证当前字符串是否符合某个规则（正则匹配） ②：获取到一个字符串中符合某种规则的字符（正则捕获）2.创建正则的两种方式 let reg1=/^\d+$/g let reg2=new RegExp("^\\d+","g")3.正则组成常用的修饰符： i：忽略大小写 m：多行匹配 ...
2019-06-25 11:40:16
192
原创 浅谈javascript中的this指向问题
（前言：小编也是一个刚入行的小白，所以写不出来多么高深的东西，若有错误欢迎指证或者其他的什么相互验证，但是不接受大神的鄙视，谢谢，转载请注明出路）1.给元素绑定事件时，this就是当前操作元素 box.onclick=function () { console.log(this); // this => 单击的元素 }2.普通函数中，函数执行前面有点th...
2019-06-24 18:07:39
464
1
原创 纯原生JS写封装左右无缝链接轮播图插件(完整代码及注释，可参考可直接使用)
（前言：小编也是一个刚入行的小白，所以写不出来多么高深的东西，若有错误欢迎指证或者其他的什么相互验证，但是不接受大神的鄙视，谢谢，转载请注明出路）cssbody,div,ul,li,a,p{margin: 0;padding: 0;-webkit-user-select: none;}li{list-style: none;}.Banner1{margin: 20px a...
2019-06-24 17:06:28
1096
原创 为小白准备的javascript中的继承浅谈！
（前言：小编也是一个刚入行的小白，所以写不出来多么高深的东西，若有错误欢迎指证或者其他的什么相互验证，但是不接受大神的鄙视，谢谢，转载请注明出路）1：为什么需要继承？ function A() { // 通过 this.xxx = xxx; 方式添加的才是A类的实例私有的属性或者方法； this.text = 'A类的text'; } A...
2019-06-24 13:07:01
161
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人