- 博客(69)
- 收藏
- 关注
RSS订阅原创 比较Vue与React：
相同点都有组件化开发(提高界面功能编码的复用，是一种编码方式)和Virtual DOM(提高程序的运行效率)都支持props(通过标签属性的方式)进行父子组件间数据通信都支持数据驱动视图, 不直接操作真实DOM, 更新状态数据界面就自动更新都支持服务器端渲染不同点数据绑定: vue实现了数据的双向绑定(界面和内存的数据可以相互交流),react数据流动是单向的(只支持内存数据到界...
2020-02-19 17:21:23
207
原创 cookie的介绍及使用：
cookie在浏览器端存储少量数据（key-value），解决http协议无状态的问题。在浏览器发送的请求是没有状态的，就不知道是谁发的请求。过程：首先客户端是没有cookie的，客户端向服务器发送登录请求，服务器一旦接受到你登录成功，就会返回一个的东西代表你登录成功，这个东西就会用cookie存着返回给客户端，客户端一旦接受到响应中有个cookie，客户端也会自动存起来，当下一次客户端再发请求的...
2019-11-07 23:37:29
401
原创 cors方案解决跨域：
浏览器的安全策略：同源策略。同源策略：协议名、域名、端口号三者必须完全一致，才符合同源策略。只要有一个不一样，就违背同源策略，产生跨域。（导致ajax请求失败）cors：官方的解决方案特点：可以发任意请求，兼容性稍差。前端发请求拿数据：<button id="btn">按钮</button><script src="https://cdn.bootcss.c...
2019-11-07 17:13:32
242
原创 jsonp方案解决跨域：
浏览器的安全策略：同源策略。同源策略：协议名、域名、端口号三者必须完全一致，才符合同源策略。只要有一个不一样，就违背同源策略，产生跨域。（导致ajax请求失败）跨域只会导致ajax请求失败，我们可以利用具有天然跨域特性的标签来帮助我们发送跨域的请求。link，img，script都具有跨域的特性，我们使用script来解决跨域，因为我们发请求的目的是获取数据，再进行dom操作展示在页面上，获取数...
2019-11-07 16:33:16
130
原创 ajax介绍及发送ajax请求的原生写法：
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。实现客户端向服务器发送ajax请求。客户端：发送ajax请求步骤：创建xhr实例对象：XMLHttpRequest 实例对象用于在后台与服务器交换数据。绑定事件监听：监听响应结果设置请求信息发送请求<button id="btn">按钮</button><script>...
2019-11-07 15:33:39
324
原创 异步代码执行顺序：
js引擎对异步代码优先级进行划分：宏任务、微任务。微任务：process.nextTick 只有nodejs有queueMicrotask将函数添加到微任务队列promise.then().catch().finally() 成功失败都会触发finally()中的回调，pending是不会触发的。微任务优先级：process.nextTick优先级最高 ，其他微任务按顺序执行。宏...
2019-10-31 21:51:56
576
原创 谈谈buffer：
Node的应用场景中存在大量的文件，数据库I/O和网络I/O操作，这使得Node不得不处理大量二进制数据。于是创建了一个容器叫Buffer，存储二进制数据。Buffer位于global上，是全局的一个函数。流自动隐式可以创建Buffer，手动也可以创建Buffer。流是数据的集合，但是流数据不能一次性获取到，数据也不会全部load到内存中，流的生产者与消费者之间的速度通常是不一致的，因此需要...
2019-10-31 21:25:21
214
原创 instanceof实现：
instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。A instanceof B检查A.__proto__是否在B.prototype function myInstanceof(A, B) { A = A.__proto__; B = B.prototype; while (A) { if (A ...
2019-10-31 10:33:00
131
原创 this指向：
this指向于谁? 看函数调用位置上的调用形式独立调用( fn() ) —> this指向window， 在严格模式下，指向undefined构造调用( new fn() ) —> this指向当前new调用创建的实例隐式调用( obj.fn() ) —> this指向调用者obj1.obj2.fn() this指向obj2显示调用( fn.call(obj)...
2019-10-30 00:38:52
95
原创 函数节流throttle和函数防抖debounce:
函数节流throttle和函数防抖debounce作用：减少单位时间内函数调用的次数，让性能更好应用：节流：滚轮、mousemove事件等防抖：输入框实现：利用时间戳来实现单位时间内只触发第一次函数调用节流：function throttle(fn, wait) {// 记录上一次调用函数的时间let lastTime = 0;return function throttled...
2019-10-30 00:29:56
128
原创 谈谈闭包：
闭包是什么？一个包含被引用局部变量的closure对象，存在于嵌套的内部函数中。当函数可以记住并访问到自己的作用域链时就会产生闭包。什么时候创建闭包在外层函数被执行时，执行上下文被创建时创建闭包。闭包被存放在了哪存放在了内层函数的作用域中。产生条件：函数嵌套内部函数引用外部函数的局部变量调用外部函数作用：延长外层函数变量的生命周期让函数外部操作函数内部的变量数据缺点：...
2019-10-29 09:57:28
134
原创 谈谈原型：
原型指得是两个原型属性：prototype 显示原型属性_ _ proto_ _: 隐式原型属性所有函数都有显示原型属性（箭头函数没有），显示原型属性的值叫原型对象。原型对象上有一个constructor，构造方法，指向构造函数本身原型对象上有__proto__，指向Object.prototype所有对象都有隐式原型属性，他的值指向对应构造函数显示原型属性的值（原型对象）普通对象...
2019-10-29 09:51:23
125
原创 数组常用API：
forEachforEach() 方法对数组的每个元素执行一次提供的函数。var arr =["a","b","c"];//高阶函数arr.forEach(function(item,index,arr){ console.log(item,index,arr,this);},{name:"xiaoHong"})参数1:callback为数组中每个元素执行的函数，该函数接收三个参...
2019-10-16 14:39:07
86
原创 移动端图片适配：
根据设备像素比加载 1x图 2x图 3x图 …①.使用背景图片实现先设置默认图片，再利用媒体查询去修改设备像素比大于2的，换张图片。②.使用img标签实现<img srcset><img srcset="images/music_small.png, images/music_small_2x.png 2x" src="images/...
2019-09-27 18:55:34
1248
原创 移动端1px物理像素边框的实现：
移动端1px物理像素边框适用于高清屏。设备像素比大于1的。用伪元素，定位实现1px物理像素边框的显示。再利用媒体查询去修改设备像素比等于2的，等于3的，进行scaleY缩放。设备像素比是2的，缩放.5倍，设备像素比是3的，缩放.33倍。-webkit-min-device-pixel-ratio: 2适用于webkit内核min-resolution: 2dppx适用于火狐具体实现代码...
2019-09-27 18:38:29
515
原创 移动端适配：
1.viewport适配不论设备宽度是多少，统一把布局视口设置成设计稿的宽度。假设设计稿宽度是375px。①.<meta name=“viewport” content=“width=375px”>不管屏幕多大，都看作375px。width只能改变布局视口，不能改变视觉视口。②.<meta name=“viewport” content=“width=device-wid...
2019-09-27 18:22:24
408
原创 移动端点击穿透问题详解：
1.点击穿透bug事件机制：动作，监听动作每时每刻都会发生，只要用户点击，就会发生在动作。监听了这个动作才能执行我们的代码，不监听就是白点。click就是动作模拟出来的，当用户进行触摸后，浏览器300ms后就会模拟click这个动作，就算不监听，触摸后也会模拟。总之，不管监听不监听，动作都会发生。鼠标事件在移动端是被模拟的，在发生触摸这个动作之后，等300ms后模拟的。超链接和button...
2019-09-22 23:38:59
1120
原创 移动端触屏事件和touchEvent：
1.触屏事件①．触屏(touch)事件touchstart 手指触摸屏幕时触发，即使已经有手指在屏幕上也会触发touchmove 手指在屏幕滑动时触发touchend 手指从屏幕时移开时触发touchcancel 当触控点被特定的实现方式打乱时触发（例如，弹框），一般不用②.事件绑定方式，DOM0和DOM2都可以，推荐使用DOM2方式box.addEventListener(‘tou...
2019-09-22 23:37:45
696
原创 移动端基础知识：
1.三种APP①.NativeApp 原生App原生APP就是利用Android、iOS平台官方的开发语言、开发类库、工具进行开发。比如安卓的java语言，iOS的object-c 语言。在操作系统上直接运行的App。前端技术也是可以开发原生App的，比如 ReactNative、Weex、WeX5、uni-app、Cardova、PhoneGap、Flutter等框架； 而且前端技术开发原...
2019-09-22 23:02:33
388
原创 5种让元素水平垂直居中的方式：
<div class=“box”></div>第一种：已知宽高。给元素设置绝对定位，left和top设为50%，margin-left设为负的自身宽度的一半，margin-top设为负的自身高度的一半。.box{ width: 200px;  ...
2019-09-18 10:04:58
172
原创 H5音视频标签，属性，DOM，事件解析：
1.音视频标签①.视频<video src=“video/test.mp4” controls></video>必须写上controls视频才能向用户显示控件，比如播放按钮。视频格式： mp4、avi、rmvb、3gp …H5支持的格式 mp4、webm、 ogg 推荐mp4②.音频<audio src=“audio/test.mp3” contro...
2019-09-16 23:45:34
436
原创 canvas的语法介绍及使用：
1.canvas基本使用①.<canvas></canvas>默认宽高300X150，通过css设置宽高只是改变它在浏览器上的显示，把它当作图片保存下来依然是300X150，所以不要在css中设置宽高。可以通过元素的属性改变它的宽高。<canvas id=“myCanvas” width=“200” height=“200”></canvas>...
2019-09-12 21:24:53
669
原创 H5新增标签:
1.语义化结构标签<header></header> 页面的页头或section的页头<nav></nav> 导航<aside></aside> 侧边栏<article></acticle> 文章<section></section> 页面中的一块或文章...
2019-09-09 21:30:11
119
原创 css预处理器：Less
1.实现webstrom自动编译less①.安装node(less依赖于node)，win+R进入cmd，输入node -v 出现版本号，表明安装成功。②.安装less编译器，在cmd中输入npm install less -g，其中cmd路径并没有指定。输入less -v出现版本号，表明安装成功。③.配置webstrom。File->settings->Tools->Fi...
2019-09-08 19:47:06
123
原创 响应式设计:
1.视口viewport<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>meta:vp+tab键生成，做响应式设计，设置视口宽度与设备宽度统一。2.媒体查询语法2.1媒体类型all 用于所有设备screen 用于电脑屏幕，平板电脑，智能手机等。print 用于打印机和打印预览s...
2019-09-08 19:10:27
168
原创 多列布局：
多列布局的相关CSS属性1.column-count 设置列数column-count: 2;默认值：auto根据 column-width 自定分配宽度column-width 设置每列的宽度（类似于最小宽度）默认值：auto根据 column-count自定分配宽度column-width: 200px;指定列宽，注意列之间有间距，分好之后每列的宽度不一定是写的列宽，浏览器只是根据...
2019-09-08 18:41:07
478
原创 Flex伸缩盒模型：
1.伸缩容器属性1.1设置伸缩容器设置元素为伸缩容器：display: flex;设置元素为内联级伸缩容器：display: inline-flex。下面的元素会上来。1.2主轴方向flex-direction属性决定主轴的方向（即项目的排列方向）。flex-direction: row;row（默认值）：主轴为水平方向，起点在左端。row-reverse：主轴为水平方向，起点在右...
2019-09-04 21:27:28
150
原创 css3变换过渡动画：
一.变换1.2D变换1.1位移translatetransform: translateX(20px);指定对象X轴（水平方向）的平移transform: translateY(50px);指定对象Y轴（垂直方向）的平移transform: translate(20px, 50px);第一个参数对应X轴，第二个参数对应Y轴。transform: translate(20%);还可以用百...
2019-09-04 00:01:38
489
原创 css3渐变：
1.线性渐变linear-gradient(渐变方向, 渐变颜色)①.把渐变当做背景图片background-image: linear-gradient(red, green);②.控制渐变的方向第一种：关键字background-image: linear-gradient(to top,red,green);从下到上，还可以设置to bottom(默认) &nb...
2019-09-01 16:14:54
108
原创 css3文本设置：
1.文本对齐①.text-align:center; 文本水平对齐方式。left： 内容左对齐。center： 内容居中对齐。right： 内容右对齐。justify： 内容两端对齐。start： 内容对齐开始边界。（CSS3） （CSS3中规定的默认值）end： 内容对齐结束边界。（CSS3）②.text-align-last:center; 文本最后一行的对齐方式（如果只有一行...
2019-09-01 16:03:07
133
原创 css3边框和背景：
1.边框图片(了解)border-image-source:url(1.png);指定边框图片地址，指定后，边框颜色就没了。border-image-slice: 27 10;图片切割方式（可写1~4个值，不带单位，分别代表左上右下）border-image-width:100px;边框图片宽度（可写1~4个值，分别代表左上右下）border-image-outset: 10px;边框图片...
2019-09-01 15:46:42
118
原创 css3盒子模型：
1.盒子尺寸①.box-sizing 定义盒子模型的尺寸解析方式。box-sizing: content-box; 默认值； width和height属性设置的大小是内容的大小。box-sizing: border-box; width和height属性设置的大小是盒子的大小(content+padding+border)②.resize是否允许用户缩放，调节元素尺寸大小。overflo...
2019-09-01 15:23:37
66
原创 CSS3选择器：
1.基本选择器通配选择器 * {}元素选择器 div {}ID选择器 #box {}class选择器 .item {}群组选择器 ul,ol,.item {}逻辑与选择器 li.open {} .item.active {} ul li.current {}2.层级选择器后代选择器 .news-list li {}子选择器 .news-list>li {}相邻兄...
2019-08-29 21:33:08
146
原创 JavaScript总结：
1.DOM 文档对象模型1.1 事件机制1.1.1 事件监听和解除事件监听DOM0的方式：.onclick()。把事件当做dom对象的方法，会发生发生覆盖。解除绑定：.onclick = null;DOM2的方式：.addEventListener() 解除绑定：.removeEventListener().attachEvent() 解除绑定：.detachEvent()1.1.2...
2019-08-29 21:12:25
75
原创 jQuery动画效果：
1.基本效果show( ) 显示隐藏的元素hide( ) 隐藏显示的元素toggle( ) 如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。参数：fast normal slow指定时间 (6000)时间后还可以指定回调函数 (1000,fn) 等动画结束，回调函数执行width\height\opacity都在变化jQuery有一个动画队列，对一个元素执...
2019-08-29 14:34:00
130
原创 jQuery事件机制：
1.事件绑定每个事件都是jQuery DOM的方法，事件对应的函数作为回调函数。①.click(fn).click(function(){ });② .on(‘click’,fn) jQuery推荐 第一个参数写事件名； 同addEventListener相似。.on(‘click’, function () { });③.解除事件绑定，不写参数会解除元素上所有的事件。.off(‘...
2019-08-29 14:11:12
60
原创 jQueryDOM操作解析：
1.内部插入append(content|fn) 向每个匹配的元素内部追加内容appendTo(content) 把所有匹配的元素追加到另一个指定的元素集合中prepend(content|fn) 向每个匹配的元素内部前置内容prependTo(content) 把所有匹配的元素前置到另一个指定的元素集合中父元素调用append( ...
2019-08-29 10:06:51
108
原创 jQuery筛选器方法：
1.过滤（破坏性操作）eq(index|-index) 获取当前链式操作中第N个jQuery对象，返回jQuery对象first() 获取第一个元素last() 获取最后一个元素filter(expr|obj|ele|fn) 筛选出与指定表达式匹配的元素集合。not(expr|ele|fn) 从匹配元素的集合中删除与指定表达式...
2019-08-29 09:31:09
183
原创 jQuery属性和样式操作解析：
1.元素属性操作1.1 属性attr(name [,value]) 设置或获取属性；直接对HTML元素操作属性；（实现原理：getAttribute(),setAttribute()）；一般用于操作自定义属性。removeAttr(name) 移除html元素上的属性。prop(name [,value]) 设置或获取属性；操作的DOM对象的属性（实现原理 dom.属性名） 一般用于...
2019-08-28 23:38:16
81
原创 jQuery选择器详解：
1.基本选择器#id 根据给定的ID匹配一个元素element 根据给定的元素标签名匹配所有元素.class 根据给定的css类名匹配元素。“* ” 匹配所有元素selector1,selector2,selectorN 将每一个选择器匹配到的元素合并后一起返回2.层次选择器$(’#firstList li’)在给定的祖...
2019-08-26 23:52:42
108
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人