2019 年 9月随笔档案 - 嗯嗯呢

cookie

摘要：什么是cookie？ cookie是一些数据，存储于你电脑胡文本文件中。当web服务器向浏览器发送web页面时，在连接关闭后，服务器不会记录用户的信息。 cookie的作用就是用于解决“如何记录客户端的用户信息”。当用户访问 web 页面时，他的名字可以记录在 cookie 中。在用户下一次访阅读全文

posted @ 2019-09-30 16:32 嗯嗯呢阅读(225) 评论(0) 推荐(0)

vue-router路由懒加载

摘要：懒加载：也叫延迟加载。即在需要的时候进行加载，随用随载。为什么需要懒加载？像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出啊先长时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面阅读全文

posted @ 2019-09-30 15:32 嗯嗯呢阅读(1030) 评论(0) 推荐(0)

setTimeout async promise执行顺序总结

摘要：Promise和setTimeout执行顺序面试题最需要解释的是：then和settimeout执行顺序，即setTimeout(fn, 0)在下一轮“事件循环”开始时执行，Promise.then()在本轮“事件循环”结束时执行。因此then 函数先输出，settimeout后输出。 set 阅读全文

posted @ 2019-09-29 17:18 嗯嗯呢阅读(471) 评论(0) 推荐(0)

forEach陷阱

摘要：前言：forEach没有返回值！！！设置了返回值也没有返回值。一、for循环的对比运行结果：输出了1，2。并且终止了循环。没有继续输出后面的4，5； ②、console.log(test()); 二、forEach循环的对比运行结果：输出了1，2，4，5。并没有终止循环，而是当item== 阅读全文

posted @ 2019-09-29 10:44 嗯嗯呢阅读(1660) 评论(0) 推荐(0)

函数节流与函数防抖之间的区别

摘要：函数节流和函数防抖，两者都是优化高频率执行js代码的一种手段。大家大概都知道旧款电视机的工作原理，就是一行行得扫描出色彩到屏幕上，然后组成一张张图片。由于肉眼只能分辨出一定频率的变化，当高频率的扫描，人类是感觉不出来的。反而形成一种视觉效果，就是一张图。就像高速旋转的风扇，你看不到扇叶，只看到了一阅读全文

posted @ 2019-09-28 16:24 嗯嗯呢阅读(1739) 评论(0) 推荐(0)

请实现一个节流函数

摘要：什么是节流函数？简单讲就是让一个函数无法在短时间内连续调用，只有当上一次函数执行后过了规定的时间间隔，才能进行下一次该函数的调用。或者说你在操作的时候不会马上执行该函数，而是等你不操作的时候才会执行。函数节流的原理：可通过使用定时器，在操作的时候让函数延时执行，如果在这个时间内还在操作，则清除阅读全文

posted @ 2019-09-28 10:45 嗯嗯呢阅读(1001) 评论(0) 推荐(0)

数组实例的find() 和 findIndex()方法

摘要：数组实例的find()方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。上面代码找出数组中第一个小于0的成员。上面代码中，find()方法的回调函阅读全文

posted @ 2019-09-28 09:43 嗯嗯呢阅读(1885) 评论(0) 推荐(0)

CSS隐藏元素的方法及区别

摘要：1.opacity opacity：0将元素本身及其子元素都置为不可见的，而元素本身依然占据它自己的位置并对网页的布局起作用，它会响应用户交互。 2.visibility visibility：hidden将元素本身及其子元素都置为不可见的，而元素本身依然占据它自己的位置并对网页的布局起作用，它不会阅读全文

posted @ 2019-09-27 22:08 嗯嗯呢阅读(824) 评论(0) 推荐(0)

BFC

摘要：什么是BFC 在一个web页面的CSS渲染中，块级格式化上下文 (Block Fromatting Context)是按照块级盒子布局的。W3C对BFC的定义如下：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks,table-cells,和table-captions 阅读全文

posted @ 2019-09-26 00:53 嗯嗯呢阅读(411) 评论(0) 推荐(0)

data-*属性

摘要：data-*属性用于存储页面或应用程序的私有自定义数据。 data-*属性赋予我们在所有HTML元素上嵌入自定义data属性的能力。存储的（自定义）数据能够被页面的javascript中利用，以创建更好的用户体验（不进行Ajax调用或服务器端数据库查询）。 data-*属性包括两部分：属性名不应阅读全文

posted @ 2019-09-24 17:21 嗯嗯呢阅读(900) 评论(0) 推荐(0)

CSS之浮动布局

摘要：css之浮动布局(float,浮动原理,清除/闭合浮动方法) 1.什么是浮动：在我们布局的时候用到的一种技术，能够方便我们进行布局，通过让元素浮动，我们可以使元素在水平上左右移动，再通过margin属性调整位置。 2.浮动的原理; 使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直阅读全文

posted @ 2019-09-23 16:42 嗯嗯呢阅读(6183) 评论(0) 推荐(1)

diasplay:inline-block的使用

摘要：1.inline(行内元素)：使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行不能更改元素的height，width的值，大小由内容撑开可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行 2. 阅读全文

posted @ 2019-09-23 15:52 嗯嗯呢阅读(575) 评论(1) 推荐(0)

eval是做什么的？

摘要：eval（）的作用：把字符串参数解析成JS代码并运行，并返回执行的结果；例如： eval的作用域说明作用域在它所有的范围内容有效示例2：这段代码悲剧了？在IE8及IE8一下的版本就不支持了。解决方法：注意事项应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行阅读全文

posted @ 2019-09-22 23:23 嗯嗯呢阅读(1302) 评论(0) 推荐(0)

JS中的垃圾回收机制

摘要：必要性：由于字符串、对象和数组没有固定大小，所有当他们的大小以知时，才能对他们进行动态的存储分配。JavaScript程度每次创建字符串、数组或对象时，解释器都必须分配内存来存储那个实体。只要像这样动态地分配了内存，最终都要释放这些内存以便他们能够被再用，否则，javascript的解释器将会消耗完阅读全文

posted @ 2019-09-22 22:03 嗯嗯呢阅读(3036) 评论(0) 推荐(0)

ajax中浏览器的缓存问题解决方法

摘要：ajax能提高页面载入的速度主要原因是通过ajax减少了重复数据的载入，也就是说在载入数据的同时将数据缓存到内存中，一旦数据被加载其中，只要我们没有刷新页面，这些数据就会一直被缓存在内存中，当我们提交的URL与历史的URL一致时，就不需要提交给服务器，也就是不需要从服务器上面获取数据，虽然这样降低了阅读全文

posted @ 2019-09-21 10:09 嗯嗯呢阅读(455) 评论(0) 推荐(0)

Image和onload

摘要：一、JS的new image（）用法创建一个Image对象：var a = new Image(); 定义Image对象的src：a.src="xxx.gif";这样就相当于给浏览器缓存一张照片了。<body> Image也经常用于预加载。 Image对象代表嵌入的图像。 <img>标签每出现一次阅读全文

posted @ 2019-09-20 21:37 嗯嗯呢阅读(2067) 评论(0) 推荐(0)

异步加载JS脚本

摘要：参考：https://www.jianshu.com/p/bf8b5bf5fc90 javaScript脚本对现代网站来说是必不可少的。当用户访问站点，需要下载各种资源，例如js脚本，CSS,图片，iframe等。浏览器下载除js外的资源时，会并行下载，以提高性能。但下载js脚本时，会禁止并行下阅读全文

posted @ 2019-09-19 21:48 嗯嗯呢阅读(1279) 评论(0) 推荐(0)

js拖拽功能的实现

摘要：如果要设置物体拖拽，那么必须使用三个事件，并且这三个事件的使用顺序不能颠倒。 1.onmousedown：鼠标按下事件 2.onmousemove:鼠标移动事件 3.onmouseup:鼠标抬起事件拖拽的基本原理就是根据鼠标的移动来移动被拖拽的元素。鼠标的移动也就是x、y坐标的变化；元素的移动就是阅读全文

posted @ 2019-09-19 11:05 嗯嗯呢阅读(12172) 评论(0) 推荐(0)

区分event对象中的[clientX,offsetX,screenX,pageX]

摘要：clientX clientY event.clientX event.clientY client直译就是客户端，客户端的窗口就是指浏览器的显示页面内容的窗口大小（不包工具栏、导航栏等等）。 event.clientX、event.clientY就是用来获取鼠标距游览器显示窗口的长度。 offse 阅读全文

posted @ 2019-09-19 10:26 嗯嗯呢阅读(355) 评论(0) 推荐(0)

js的各种位置，比如clientHeight,scrollHeight,offsetHeight ,以及scrollTop, offsetTop,clientTop的区别？

摘要：1、clientHeight：表示的是可视区域的高度，不包含border和滚动条； 2、offsetHeight：表示的是可视区域的高度，包含了border和滚动条 3、scrollHeight：表示了所有区域的高度，包含了因为滚动被隐藏的部分； 4、clientTop：表示边框border的厚度，阅读全文

posted @ 2019-09-18 23:28 嗯嗯呢阅读(1608) 评论(0) 推荐(0)

bind、apply、call的区别

摘要：改变函数内部this指针的指向函数：通过apply和call改变函数的this指向，他们两个函数的第一个参数都是一样的表示要改变指向的那个对象，第二个参数，apply是数组，而call则是arg1，arg2...这种形式。通过bind改变this作用域会返回一个新的函数，这个函数不会马上执行。 c 阅读全文

posted @ 2019-09-18 22:36 嗯嗯呢阅读(767) 评论(0) 推荐(0)

js的new操作符做了哪些事情

摘要：new操作符新建了一个空对象，这个对象原型指向构造函数的prototype，执行构造函数后返回这个对象 1、创建一个空的对象 2、链接到原型 3、绑定this指向，执行构造函数 4、确保返回的是对象 new过程一共有四个步骤：题目解析先看代码 var Func=function(){ }; va 阅读全文

posted @ 2019-09-18 21:23 嗯嗯呢阅读(14446) 评论(0) 推荐(1)

mouseover和mouseenter的区别

摘要：mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。对应的移除事件是mouseout mouseenter:当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave mouseover和mouseenter的异同体现阅读全文

posted @ 2019-09-18 16:30 嗯嗯呢阅读(26055) 评论(0) 推荐(4)

图片的懒加载和预加载

摘要：预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。懒加载： i 阅读全文

posted @ 2019-09-18 15:56 嗯嗯呢阅读(2804) 评论(0) 推荐(2)

事件委托

摘要：事件委托事件委托指的是，不在事件的发生地（直接dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素DOM的类型，来做出不同响应。举例：最经典的就是ul和li标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在li 阅读全文

posted @ 2019-09-18 10:52 嗯嗯呢阅读(267) 评论(0) 推荐(0)

如何让事件先冒泡后捕获

摘要：在DOM标准事件模型中，是先捕获后冒泡。但是如果要实现先冒泡后捕获的效果，对于同一事件，监听捕获和冒泡，分别对应响应的处理函数，监听到捕获事件，先暂缓执行，直到冒泡事件被捕获后再执行捕获事件。阅读全文

posted @ 2019-09-18 10:43 嗯嗯呢阅读(2190) 评论(0) 推荐(1)

事件处理程序

摘要：事件处理程序就是响应某个事件的函数，简单地来说，就是函数。我们又把事件处理程序称为事件侦听器。事件处理程序是以“on“开头的，比如点击事件的处理程序是”onclick“，事件处理程序大概由以下5种。 1 HTML事件处理程序 2 DOM0级事件处理程序 3 DOM2级事件处理程序 4 IE事件处理程阅读全文

posted @ 2019-09-17 22:39 嗯嗯呢阅读(1231) 评论(0) 推荐(0)

Object.create(null)和{}创建对象的区别

摘要：原文：https://www.jianshu.com/p/43ce4d7d6151 创建对象的方法：创建一个空对象有以下三个方法：创建空对象的区别：要创建一个干净的空对象，应该使用Object.create(null)而不是剩下两种。通过做Object.create(null),我们可以显式阅读全文

posted @ 2019-09-13 16:00 嗯嗯呢阅读(1585) 评论(0) 推荐(0)

小程序事件应用详解

摘要：1.冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递 <view class="container" bind:tap="containerTap"> <view bind:ta="onTap" class="pressBtn" id="view" data-name="容器"> <tex 阅读全文

posted @ 2019-09-12 11:24 嗯嗯呢阅读(288) 评论(1) 推荐(0)

js中DOM元素的attribute与property属性的区别

摘要：attribute是dom元素在文档中作为html标签拥有的属性 property是dom元素在js中作为对象拥有的属性对于html的标准属性来说，attribute和property是同步的，是会自动更新的。但是对于自定义的属性来说，他们是不同步的。（自定义属性不会自动添加到property）阅读全文

posted @ 2019-09-11 22:19 嗯嗯呢阅读(367) 评论(0) 推荐(0)

小程序wx:key中的关键字*this

摘要："保留关键字*this代表在for循环中的item本身"，这种表示需要item本身是一个唯一的字符串或者数字，如果是对象则不可以 data：{ array：[1,2,3,4,5], objs:[{id:1},{id:2},{id:3}，{id:4}] } wx:key的值以两种形式提供： 1.字符串阅读全文

posted @ 2019-09-11 22:05 嗯嗯呢阅读(420) 评论(0) 推荐(0)

小程序中的block

摘要：1.<block/>并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。 2.因为wx:if是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个<block/>标签将多个组件包装起来，并在上边使用wx:if控制属性。 3.类似block wx 阅读全文

posted @ 2019-09-11 21:54 嗯嗯呢阅读(1476) 评论(0) 推荐(0)

模板字符串

摘要：模板字符串是增强版的字符串，用反引号（`）标识，它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变`In JavaScript '\n' is a line-feed.` 上面代码中，模板字符串都是用反引号表示，如果在模板字符串中需要使用反引号，则前面需要用反斜杠转义。如果阅读全文

posted @ 2019-09-10 15:16 嗯嗯呢阅读(1345) 评论(0) 推荐(0)

对象的新增方法

摘要：1.Object.is() 用来比较两个值是否严格相等，与严格比较运算符（）的行为基本一致不同之处只有两个：一是+0不等于-0，二是NaN等于自身。 2.Object.assign() 用于对象的合并，将源对象的所有可枚举属性，复制到目标对象（target）。 Object.assign方法的第阅读全文

posted @ 2019-09-09 17:30 嗯嗯呢阅读(660) 评论(0) 推荐(0)

对象的扩展

摘要：1.对象的简写： 2.简写法：打印对象 console.log直接输出user和foo两个对象时，就是两组键值对，可能会混淆。把它们放在大括号里面输出，就变成了对象的简洁表示法，每组键值对前面会打印对象名，这样就比较清晰了。 3.属性名的表达式：表达式作为属性名，表达式需要放在方括号内。若属性名阅读全文

posted @ 2019-09-08 23:08 嗯嗯呢阅读(422) 评论(0) 推荐(0)

vertical-align和text-align的理解

摘要：一、vertical-align vertical-align是用来指定行内元素或者表格单元格元素的垂直对齐方式 vertical-align属性可被用于两种环境：使行内元素盒模型与其行内元素容器垂直对齐。用于垂直对齐一行文本的内的图片<img> 垂直对齐表格单元内容：注意：vertical-a 阅读全文

posted @ 2019-09-07 11:37 嗯嗯呢阅读(1374) 评论(0) 推荐(0)

深入理解css优先级

摘要：<style type="text/css"> body h1 { color: green; } html h1 { color: purple; } </style> <body> <h1>Here is a title!</h1> </body> css中优先级无视DOM树中节点的距离远近，就阅读全文

posted @ 2019-09-06 16:06 嗯嗯呢阅读(3086) 评论(0) 推荐(0)

transform,transition,animation的区别

摘要：transform描述了元素静态样式。 transition和animation都可以实现动画效果两者的区别是： 1.触发条件不同。transition通常和hover等事件配合使用，由事件触发。animiation则和gif动态图差不多立即播放。 2.循环。animation可以设定循环次数。阅读全文

posted @ 2019-09-05 21:43 嗯嗯呢阅读(505) 评论(0) 推荐(0)

promise的用法

摘要：首先理解一下异步和同步：异步： js是单线程的，只有一个主要的任务流程处理我们的js程序把一些耗时的事情通过新开线程的方式来实现，就是采用异步方法。异步任务有：setTimeout、setInterval、ajax，像ajax的事情还没有处理完成，也不会影响当前页面的其他行为。同步：当前线程阅读全文

posted @ 2019-09-05 21:17 嗯嗯呢阅读(528) 评论(0) 推荐(0)

手写bind源码

摘要：改变函数this指向的三个方法：call bind apply 三个方法的相同点：目标函数被调用时，改变this的指向的值三个方法都是函数的方法，挂在在Function.prototype上不同点：目标函数调用call和apply后，会直接被执行目标函数调用bind后，不会立即执行，而是返阅读全文

posted @ 2019-09-05 20:16 嗯嗯呢阅读(1064) 评论(0) 推荐(0)

数组的转化

摘要：1.字符串转换为数组扩展运算符可以将字符串转为真正的数组： 2.具有Iterator接口的对象可以转换为数组任何定义了遍历器（Iterator）接口的对象（参阅 Iterator 一章），都可以用扩展运算符转为真正的数组。上面代码中，querySelectorAll方法返回的是一个NodeL 阅读全文

posted @ 2019-09-03 21:31 嗯嗯呢阅读(445) 评论(0) 推荐(0)