- 博客(50)
- 收藏
- 关注
RSS订阅转载 setTimeout async promise执行顺序总结
Promise和setTimeout执行顺序 面试题<!DOCTYPE html><html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-wid...
2019-09-29 17:18:00
227
转载 forEach陷阱
前言：forEach没有返回值！！！设置了返回值也没有返回值。一、for循环的对比 var arr = [1,2,3,4,5]; function test(){ for(var i =0; i<arr.length; i++){ if(arr[i]== 3){ ...
2019-09-29 10:44:00
148
转载 函数节流与函数防抖之间的区别
函数节流和函数防抖，两者都是优化高频率执行js代码的一种手段。大家大概都知道旧款电视机的工作原理，就是一行行得扫描出色彩到屏幕上，然后组成一张张图片。由于肉眼只能分辨出一定频率的变化，当高频率的扫描，人类是感觉不出来的。反而形成一种视觉效果，就是一张图。就像高速旋转的风扇，你看不到扇叶，只看到了一个圆一样。 同理，可以类推到js代码。在一定时间内，代码执行的次数不一定要非常多。达到...
2019-09-28 16:24:00
224
转载 请实现一个节流函数
什么是节流函数？ 简单讲就是让一个函数无法在短时间内连续调用，只有当上一次函数执行后过了规定的时间间隔，才能进行下一次该函数的调用。或者说你在操作的时候不会马上执行该函数，而是等你不操作的时候才会执行。函数节流的原理： 可通过使用定时器，在操作的时候让函数延时执行，如果在这个时间内还在操作，则清除原来的定时器，再创建一个新的定时器执行。 函数...
2019-09-28 10:45:00
899
转载 数组实例的find() 和 findIndex()方法
数组实例的find()方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。 [1, 4, -5, 10].find((n) => n < 0) // -5上面代码找出数组中第一个小于0的成员。...
2019-09-28 09:43:00
258
转载 CSS隐藏元素的方法及区别
1.opacityopacity：0将元素本身及其子元素都置为不可见的，而元素本身依然占据它自己的位置并对网页的布局起作用，它会响应用户交互。2.visibility visibility：hidden将元素本身及其子元素都置为不可见的，而元素本身依然占据它自己的位置并对网页的布局起作用，它不会响应用户交互。如果想让子元素显示，则设置子元素的visibility：visibi...
2019-09-27 22:08:00
141
转载 BFC
什么是BFC 在一个web页面的CSS渲染中，块级格式化上下文(Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下： 浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks,table-cells,和table-captions），以及overflow值不为“visiable”的...
2019-09-26 00:53:00
111
转载 data-*属性
data-*属性用于存储页面或应用程序的私有自定义数据。data-*属性赋予我们在所有HTML元素上嵌入自定义data属性的能力。存储的（自定义）数据能够被页面的javascript中利用，以创建更好的用户体验（不进行Ajax调用或服务器端数据库查询）。data-*属性包括两部分：属性名不应该包含任何大写字母，并且在前缀“data-”之后必须有至少一个字符属性值可...
2019-09-24 17:21:00
463
转载 CSS之浮动布局
css之浮动布局(float,浮动原理,清除/闭合浮动方法)1.什么是浮动： 在我们布局的时候用到的一种技术，能够方便我们进行布局，通过让元素浮动，我们可以使元素在水平上左右移动，再通过margin属性调整位置。2.浮动的原理; 使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动的边缘3、浮动的生...
2019-09-23 16:42:00
233
转载 diasplay:inline-block的使用
1.inline(行内元素)： 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行不能更改元素的height，width的值，大小由内容撑开可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行2.block（块级元素）： 使元素变成块级元素，独占...
2019-09-23 15:52:00
273
转载 eval是做什么的？
eval（）的作用：把字符串参数解析成JS代码并运行，并返回执行的结果；例如：eval("2+3");//执行加运算，并返回运算值。eval("var age = 10");//声明一个age变量eval的作用域function a(){ eval("var x=1");//等效于 var x = 1； console.log(x);/...
2019-09-22 23:23:00
251
转载 JS中的垃圾回收机制
必要性：由于字符串、对象和数组没有固定大小，所有当他们的大小以知时，才能对他们进行动态的存储分配。JavaScript程度每次创建字符串、数组或对象时，解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存，最终都要释放这些内存以便他们能够被再用，否则，javascript的解释器将会消耗完系统中所有可用的内存，造成系统崩溃。这段话解释了为什么需要系统需要垃圾回收，JS不像C...
2019-09-22 22:03:00
120
转载 ajax中浏览器的缓存问题解决方法
ajax能提高页面载入的速度主要原因是通过ajax减少了重复数据的载入，也就是说在载入数据的同时将数据缓存到内存中，一旦数据被加载其中，只要我们没有刷新页面，这些数据就会一直被缓存在内存中，当我们提交的URL与历史的URL一致时，就不需要提交给服务器，也就是不需要从服务器上面获取数据，虽然这样降低了服务器的负载提高了用户的体验，但是我们不能获取最新的数据。为了保证我们读取的信息都是最新的...
2019-09-21 10:09:00
162
转载 Image和onload
一、JS的new image（）用法 创建一个Image对象：var a = new Image(); 定义Image对象的src：a.src="xxx.gif";这样就相当于给浏览器缓存一张照片了。<body> <img src="" alt="" id="pic"/> <script> var a...
2019-09-20 21:37:00
728
转载 异步加载JS脚本
参考：https://www.jianshu.com/p/bf8b5bf5fc90javaScript脚本对现代网站来说是必不可少的。当用户访问站点，需要下载各种资源，例如js脚本，CSS,图片，iframe等。浏览器下载除js外的资源时，会 并行下载，以提高性能。但下载js脚本时，会禁止并行下载（成为脚本阻塞）。浏览器遇到JS时，必须等JS下载，解析，执行完毕后，才能继续并行下...
2019-09-19 21:48:00
144
转载 js拖拽功能的实现
如果要设置物体拖拽，那么必须使用三个事件，并且这三个事件的使用顺序不能颠倒。1.onmousedown：鼠标按下事件2.onmousemove:鼠标移动事件3.onmouseup:鼠标抬起事件 拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化；元素的移动就是style.position的top和left的改变。当然，并不是任何时候移...
2019-09-19 11:05:00
611
转载 区分event对象中的[clientX,offsetX,screenX,pageX]
clientX clientYevent.clientXevent.clientYclient直译就是客户端，客户端的窗口就是指浏览器的显示页面内容的窗口大小（不包工具栏、导航栏等等）。event.clientX、event.clientY就是用来获取鼠标距游览器显示窗口的长度。offsetX offsetYevent.offsetXeve...
2019-09-19 10:26:00
150
转载 js的各种位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？...
1、clientHeight：表示的是可视区域的高度，不包含border和滚动条；2、offsetHeight：表示的是可视区域的高度，包含了border和滚动条3、scrollHeight：表示了所有区域的高度，包含了因为滚动被隐藏的部分；4、clientTop：表示边框border的厚度，在未指定的情况下一般为05、srcollTop：滚动后被隐藏的高度，获取对象相对...
2019-09-18 23:28:00
318
转载 bind、apply、call的区别
改变函数内部this指针的指向函数：通过apply和call改变函数的this指向，他们两个函数的第一个参数都是一样的表示要改变指向的那个对象，第二个参数，apply是数组，而call则是arg1，arg2...这种形式。通过bind改变this作用域会返回一个新的函数，这个函数不会马上执行。call()和appl（）的理解每个函数都包含两个非继承而来的方法：app...
2019-09-18 22:36:00
128
转载 js的new操作符做了哪些事情
new操作符新建了一个空对象，这个对象原型指向构造函数的prototype，执行构造函数后返回这个对象1、创建一个空的对象2、链接到原型3、绑定this指向，执行构造函数4、确保返回的是对象new过程一共有四个步骤：题目解析先看代码var Func=function(){};...
2019-09-18 21:23:00
171
转载 mouseover和mouseenter的区别
mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。对应的移除事件是mouseoutmouseenter:当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleavemouseover和mouseenter的异同体现在两个方面：1. 是否支持冒泡2.事件的触发时机先看一张图，对这两件事有一...
2019-09-18 16:30:00
332
转载 图片的懒加载和预加载
预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载 则会增加服务器前端压力。懒加载： img的data-src属性及懒加载：当访问一个页面的时候，先把im...
2019-09-18 15:56:00
165
转载 事件委托
事件委托事件委托指的是，不在事件的发生地（直接dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素DOM的类型，来做出不同响应。 举例：最经典的就是ul和li标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在li标签上直接添加，而是在ul父元素上添加。好处：比较合适动态元素的绑定，新添加的...
2019-09-18 10:52:00
104
转载 如何让事件先冒泡后捕获
在DOM标准事件模型中，是先捕获后冒泡。但是如果要实现先冒泡后捕获的效果，对于同一事件，监听捕获和冒泡，分别对应响应的处理函数，监听到捕获事件，先暂缓执行，直到冒泡事件被捕获后再执行捕获事件。转载于:https://www.cnblogs.com/psxiao/p/11540263.html...
2019-09-18 10:43:00
2290
转载 事件处理程序
事件处理程序就是响应某个事件的函数，简单地来说，就是函数。我们又把事件处理程序称为事件侦听器。事件处理程序是以“on“开头的，比如点击事件的处理程序是”onclick“，事件处理程序大概由以下5种。1 HTML事件处理程序2 DOM0级事件处理程序3 DOM2级事件处理程序4 IE事件处理程序5.跨浏览器的事件处理程序一、HTML事件处理程序...
2019-09-17 22:39:00
252
转载 Object.create(null)和{}创建对象的区别
原文：https://www.jianshu.com/p/43ce4d7d6151创建对象的方法： 创建一个空对象有以下三个方法：var obj1 = {};var obj2 = Object.create(null);var obj3 = new Object();创建空对象的区别： 要创建一个干净的空对象，应该使用Object.crea...
2019-09-13 16:00:00
208
转载 小程序事件应用详解
1.冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递//wxml<view class="container" bind:tap="containerTap"> <view bind:ta="onTap" class="pressBtn" id="view" data-name="容器"> <text id="...
2019-09-12 11:24:00
108
转载 js中DOM元素的attribute与property属性的区别
attribute是dom元素在文档中作为html标签拥有的属性property是dom元素在js中作为对象拥有的属性对于html的标准属性来说，attribute和property是同步的，是会自动更新的。但是对于自定义的属性来说，他们是不同步的。（自定义属性不会自动添加到property）property的值可以改变，attribute的值不能改变转载于:...
2019-09-11 22:19:00
160
转载 小程序wx:key中的关键字*this
"保留关键字*this代表在for循环中的item本身"，这种表示需要item本身是一个唯一的字符串或者数字，如果是对象则不可以data：{ array：[1,2,3,4,5], objs:[{id:1},{id:2},{id:3}，{id:4}]}<block wx:for="{{array}}" wx:key="*this"> <...
2019-09-11 22:05:00
177
转载 小程序中的block
1.<block/>并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。2.因为wx:if是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个<block/>标签将多个组件包装起来，并在上边使用wx:if控制属性。<block wx:if="{{true}}"> <...
2019-09-11 21:54:00
322
转载 模板字符串
模板字符串是增强版的字符串，用反引号（`）标识，它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变`In JavaScript '\n' is a line-feed.`// 普通字符串`In JavaScript '\n' is a line-feed.`// 多行字符串`In JavaScript this isnot lega...
2019-09-10 15:16:00
80
转载 对象的新增方法
1.Object.is() 用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致Object.is('foo', 'foo')// trueObject.is({}, {})// false不同之处只有两个：一是+0不等于-0，二是NaN等于自身。+0 === -0 //trueNaN === NaN // false...
2019-09-09 17:30:00
106
转载 对象的扩展
1.对象的简写：const foo = 'bar';const baz = {foo};baz // {foo: "bar"}// 等同于const baz = {foo: foo};2.简写法：打印对象let user = { name: 'test'};let foo = { bar: 'baz'};co...
2019-09-08 23:08:00
88
转载 vertical-align和text-align的理解
一、vertical-align vertical-align是用来指定行内元素或者表格单元格元素的垂直对齐方式 vertical-align属性可被用于两种环境： 使行内元素盒模型与其行内元素容器垂直对齐。用于垂直对齐一行文本的内的图片<img> 垂直对齐表格单元内容：注意：vertical-align只对行内元素...
2019-09-07 11:37:00
240
转载 深入理解css优先级
<style type="text/css">body h1 { color: green;}html h1 { color: purple;}</style><body> <h1>Here is a title!</h1></body>css中优先级无视D...
2019-09-06 16:06:00
296
转载 transform,transition,animation的区别
transform描述了元素静态样式。transition和animation都可以实现动画效果两者的区别是：1.触发条件不同。transition通常和hover等事件配合使用，由事件触发。animiation则和gif动态图差不多立即播放。2.循环。animation可以设定循环次数。3.精确性。animation可以设定每一帧的样式和时间。tranistion只...
2019-09-05 21:43:00
255
转载 promise的用法
首先理解一下异步和同步：异步：js是单线程的，只有一个主要的任务流程处理我们的js程序把一些耗时的事情通过新开线程的方式来实现，就是采用异步方法。异步任务有：setTimeout、setInterval、ajax，像ajax的事情还没有处理完成，也不会影响当前页面的其他行为。同步：当前线程直接处理异步任务一般采用回调的方式，常常遇到问题：callback he...
2019-09-05 21:17:00
136
转载 手写bind源码
改变函数this指向的三个方法：call bind apply 三个方法的相同点： 目标函数被调用时，改变this的指向的值 三个方法都是函数的方法，挂在在Function.prototype上...
2019-09-05 20:16:00
97
转载 数组的转化
1.字符串转换为数组 扩展运算符可以将字符串转为真正的数组：[...'hello']// [ "h", "e", "l", "l", "o" ]2.具有Iterator接口的对象可以转换为数组 任何定义了遍历器（Iterator）接口的对象（参阅 Iterator 一章），都可以用扩展运算符转为真正 的数组。let nodeList ...
2019-09-03 21:31:00
1028
转载 json的新方法
eval：可以解析任何字符串变成jsparse：只能解析JSON形式的字符串变成JS （安全性要高一些） parse():把字符串转成json ---字符串中的属性要严格的加上引号stringify（）：把json转化成字符串 ----会自动把双引号加上还可以进行对象引用：var a = ...
2019-08-29 10:45:00
103
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人