2021年06月_张哈哈zhh_CSDN博客

张哈哈zhh

码龄6年

IP 属地：北京市

查看详细资料

个人成就

获得11次点赞
内容获得0次评论
获得23次收藏

兴趣领域设置

创作活动更多

2024 博客之星年度评选报名已开启

博主的专属年度盛宴，一年仅有一次！MAC mini、大疆无人机、华为手表等精美奖品等你来拿！

搜TA的内容

JS总结之BOM

DOM的顶级对象是document，BOM的顶级对象是window，BOM包含DOM。1.window对象的常见事件：onload事件DOMContentLoaded事件onload是等所有资源加载完毕触发，而DOMContentLoaded仅当DOM加载完成触发，不包括样式表、图片、flash等等，所以当两个事件同时出现时，DOMContentLoaded更快执行。（DOMContentLoaded有兼容性，IE9以上支持）onresize事件调整窗口大小加载事件。只要窗口大小发生变化

发布博客 2021.05.30 ·

js手写promise的all方法和race方法

Promise.all()传入参数是一个promise数组，当数组中的所有promise都成功时，all方法返回一个成功的promise，且保存的结果为所有成功promise的结果，否则返回失败的promise。Promise.all = function(promises) { return new Promise((resolve, reject) => { let len = promises.length; // 记录成功的promise个数 let count = 0;

发布博客 2021.05.29 ·

promise关键问题

如何修改promise的状态？promise原状态是pending（未决定的），在执行器中调用resolve()，状态会变为成功，调用reject()，会变为失败。除此之外，我们还可以通过throw语句，将状态改为失败。let p1=new Promise((resolve,reject)=>{ throw '出错啦' })promise能否执行多个回调？也就是，then方法如果指定多个回调，这些回调是不是都会执行？答案是肯定的。let pp=new Promise((re

发布博客 2021.05.28 ·

promise基础

promise是ES6引进的异步编程解决方案，语法上是一个构造函数，可以实例化对象，封装异步操作，获取成功或失败的结果，优点是可以解决回调地狱的问题。promise初体验：<body> <button type="button" id="btn">抽奖</button> <script type="text/javascript"> const btn=document.getElementById("btn"); btn.onclick

发布博客 2021.05.28 ·

前端--详解浏览器工作原理之多标签页之间的通讯

实现多页通讯主要有利用浏览器数据存储方式和服务器方式。浏览器数据存储方式主要用本地存储方式解决，也即调用localStorage、cookie等本地存储方式。服务器方式主要使用websocket（全双工通讯）技术使多页标签都监听服务器推送事件来获得其他标签页发送的数据。浏览器存储（1）调用localStorage建立两个html文件，页面1： <body> <input type="" name="" id="name" value="" /> <inpu

发布博客 2021.05.27 ·

前端--详解浏览器工作原理之HTTP请求

一次完整的http服务过程当我们在浏览器中输入www.baidu.com后，具体发生了什么？对www.baidu.com这个网址进行DNS域名解析，得到对应的IP地址根据IP地址，找到对应的服务器，发起TCP三次握手建立TCP连接后发起HTTP请求服务器响应HTTP请求，浏览器得到html代码浏览器解析html代码，并请求html代码中的资源（js、css、img等）浏览器对页面进行渲染服务器关闭TCP连接（1）DNS解析域名的过程？采用递归查询的方式，先找本地DNS缓存，找不到就找

发布博客 2021.05.27 ·

Vue底层原理之虚拟DOM（3）详解diff算法--子节点更新策略

diff算法子节点更新策略diff算法提出了四种命中查找：新前与旧前新后与旧后新后与旧前新前与旧后命中一种该节点就不再进行判断，都没命中用循环来查找。在四种命中查找中，前指针只会后移，后指针只会前移。四种命中查找循环的条件是：新前<=新后&&旧前<=旧后新增：上图中，右边是我们的新节点，它要替代左边的旧节点，li标签是节点的子节点。图里这种情况是新增了两个节点。首先，新前与旧前，A与A相同，两个指针都下移，B与B，C与C都相同，“新前”移动到了D，“旧前”移动

发布博客 2021.05.30 ·

vue-router全局导航守卫

为什么要使用导航守卫？假设我们有一个需求是，在跳转到每个页面的时候，页面的title随页面的改变而改变。我们能想到的一个方法是在每个Vue组件的mounted生命周期函数中定义它的title属性，但是这样做不容易维护，多个页面比较复杂。导航守卫能监听跳转的每个页面，使用导航守卫，就只需要在一处代码修改title属性即可。router.beforeEach((to,from,next)=>{ // console.log(to) document.title=to.matched

发布博客 2021.05.24 ·

vue-router中$router和$route的区别

$router相当于我们创建出来的router对象const router=createRouter();$route相当于我们配置的路由const routes=[ { path:'', redirect:'/home' }]为什么我们可以直接用this.$route或者$router？router-view和router-link是vue注册的全局组件。所有的组件都继承自Vue类的原型。Vue源码中用Object.defnePropert

发布博客 2021.05.24 ·

CSS经典布局方案--三栏布局

圣杯布局与双飞翼布局这两种布局非常相似，都是左右固定，中间自适应圣杯布局： <style type="text/css"> body{ width: 100%; height: 100%; overflow: hidden; } .container{ height: 100%; /* 左右两边容器宽度都是100px，所以容器左右设置100的内边距 */ padding: 0 100px; } .cente

发布博客 2021.05.24 ·

Vue底层原理之虚拟DOM（2）节点更新流程

更新节点的流程：先完成不是同一个节点的情况：patch.js:import vnode from './vnode'import createElement from './createElement'export default function(oldVnode,newVnode){ // 判断传入的第一个参数是DOM节点还是虚拟节点 if(oldVnode.sel==''||oldVnode.sel==undefined){//没有sel属性就是DOM节点 o

发布博客 2021.05.25 ·

海康威视前端实习电话面

Vue的生命周期beforeCreatcreatedbeforeCountcountedbeforeUpdateupdatedbeforeDestroydestroyedCSS水平垂直居中的方法（行内元素？）参考了CSS水平居中+垂直居中+水平/垂直居中的方法总结，这篇文章总结的很清楚。首先，块级元素：1.水平居中（1）margin：0 auto;，这个方法的前提是必须给元素添加宽度。（2）子元素设置成行内块，父元素文本居中text-align: center;（3）定位：

发布博客 2021.05.22 ·

VUE响应式原理（1）

Object.defineProperty()该方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回该对象。方法的第一个参数是对象，第二个是对象的属性，第三个参数也是一个对象，用来操作属性。该参数有如下几个常用属性及方法：value：属性值writable：是否可写enumerable：是否可以枚举configurable：是否可以被配置，默认falseset（）：改变属性值时触发，需要参数get（）：访问属性时触发，不能与value或writable同时出现，需要返回

发布博客 2021.05.21 ·

Vue底层原理之虚拟DOM（1）理解h函数&精细化比较

Vue的生命周期vue共有八个生命周期函数beforeCreatcreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyedbeforeCreat：vue对象实例化完成，此时实例只有一些生命周期函数以及一些默认事件，data和methods未被初始化。created：初始化了data和methods，最早可以在这个阶段获取到数据。beforeMount：模板在内存中编辑完成，但是没有渲染到页面上，也就是说，如

发布博客 2021.05.23 ·

js单例模式的理解

什么是单例模式？1.只有一个实例2.可以全局访问它解决了什么问题？一个全局使用的类被频繁的创建和销毁。什么时候使用单例模式？需要控制实例的数目，节省系统化资源的时候。如何实现单例模式？判断系统中是否已经有这个单例，有则返回，无则创建。单例模式的优点：内存中只有一个实例，减少了内存的开销，尤其是频繁的创建和销毁实例（比如首页页面的缓存）使用场景：1.全局的缓存2.弹窗es5实现单例模式比如做一个登录弹窗，一般思路是这样的：先将登录框写好，加入到body中，并把它隐藏，当点击登录按

发布博客 2021.05.30 ·

js事件循环机制event-loop理解

事件循环机制event-loop由三部分组成：调用栈、微任务队列、消息队列。event-loop开始的时候，会从全局一行一行执行，遇到函数调用，先压入调用栈中，被压入的函数称之为帧，当函数返回后会从调用栈中弹出。当js中存在异步操作，比如fetch、setTimeOut、setInterval，押入到调用栈中的时候，里面的消息会进入到消息队列中去，等到调用栈清空之后再执行。promise、async、await的异步操作会加入到微任务中，在调用栈清空的时候立即执行。调用栈中加入的微任务会立即执行。微任

发布博客 2021.05.15 ·

vue基础知识--图书管理2

之前的一篇文章实现了一个图书管理小案例，也总结了vue常用的几个特性，这篇文章主要是将几个特性应用到图书管理中。编号的输入框自动获取焦点：<label for="id"> 编号：</label><input type="text" id="id" v-model='id' :disabled='flag' v-focus> Vue.directive('focus',{ inserted:function(el){

发布博客 2021.05.15 ·

vue基础知识--图书管理案例

vue基础知识实现图书管理的增删改查：```javascript <style> .grid{ width: 550px; } .book{ background-color: orange; padding: 2px; border-top: 1px solid rgb(105, 90, 62); border-le

发布博客 2021.05.15 ·

Vue六大常用特性详解

Vue的常用特性：表单操作自定义指令计算属性过滤器侦听器生命周期1. 表单操作 <body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <div id="app"> <form action=""> <div> <span>

发布博客 2021.05.15 ·

Vue中的v-model、v-bind、v-on区别与联系

v-onv-on是用来绑定事件的，比如给按钮添加点击事件，我们可以写成v-on:click='handle'，也可以简写为@click='handle'。v-bindv-bind用来绑定文本或属性，绑定文本跟v-text差不多，能够绑定的属性有html中的属性、css的样式、对象、数组、number 类型、bool类型。v-bind是单向绑定，它在绑定文本时，当data中的数据发生变化时，页面中的数据也相应改变，但页面中的数据改变不会影响到data。v-model实现了数据的双向绑定，页面中的数

发布博客 2021.05.15 ·