![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
js
做梦翻了个身
始终保持热情的去干一件事是困难的,但是当你真正做到的时候,你就是强者!
展开
-
vue实现双开门动画
需求:前一个页面离开时有双开门动画,后一个页面有缩放动画的效果。不太理解双开门动画的小伙伴,可以参考ppt的门动画版本迭代第一次迭代设计第一想法就是通过创建一个父元素,并为其添加两个子元素,分别给这两个子元素设置vue动画来实现。实现//双开门动画组件 parent.vue<template> <transition name="door"> <div class="door"> <div class="door-left"原创 2020-07-13 18:55:40 · 1115 阅读 · 0 评论 -
解决getBoundingClientRect的兼容
function getBoundingClientRect(ele) { // 该方法是计算当前元素距离当前视口的距离,所以需要得到页面的滚动距离 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var sc...原创 2018-09-07 16:59:30 · 5865 阅读 · 1 评论 -
js封装一个bind函数
实现之前应该明确下面几点: - 接收的参数:第一个参数为this的指向,后面的参数就是函数接收的参数了。this是必需提供的参数,其他的参数都是非必需的; - 返回值:返回值应该是一个函数; 实现代码:function bind(fnc, context){ var outerArgs = Array.prototype.slice.call(arguments,2); ...原创 2018-09-10 08:59:18 · 2053 阅读 · 0 评论 -
js如何实现深复制
前面的文章中已经介绍过了深复制的概念,本篇文章将简单介绍用js代码实现深复制。 首先要明白的就是,要想实现对复杂对象的复制,用到的就是递归的思想。下面就是通过代码一步步来实现并讲解。function deepClone(data1,data2){ var data2 = data2 || {}; //局部变量data2赋初值为接收的参数或者为一个空对象。 ...原创 2018-02-25 14:57:43 · 198 阅读 · 0 评论 -
了解并实现Promise.all方法
Promise.all()接收一个数组为参数,当数组的所有Promise都为resolve的状态时,Promise.all()才会成功;若有一个失败,都会被认为是失败的。举个小例子: var p1 = Promise.resolve('a'); var p2 = Promise.resolve('b'); var p3 = Promise.resolve('c');Promise.all...原创 2018-09-04 11:20:06 · 15790 阅读 · 0 评论 -
前端面经
在实习简历被两次回绝没有给我任何机会的情况下,阿里飞猪终于把我的简历捞起来啦。真的是既开心又难过。下面分享一下阿里一面的前端问题。面了整整71分钟,我感觉我脑壳疼~~~ 1 自我介绍 2 公司项目 3 promise 4 异步编程 5 fetch 6 js的继承方法 7 原型链 8 this 9 js单线程,js怎样处理异步 10 事件轮询机制 11 前端性能优化(一直问,问...原创 2018-08-06 11:57:46 · 826 阅读 · 1 评论 -
几个有趣的js问题
今天就是想分享几个有趣的js给大家~~原创 2018-07-13 16:23:57 · 433 阅读 · 0 评论 -
快速排序
基本思想:找一个元素为比较的“基准元素”。将比该基准元素大的放在右边,比该基准元素小的放在左边。递归完成所有的排序。 下面来看一下代码实现:fucntion qucickSort(arr,left,right){ if(left &lt; right){ var k = partition(arr,left,right); quickSort(arr,...原创 2018-06-23 17:15:13 · 131 阅读 · 0 评论 -
函数节流
基本思想:某些代码不能在没有时间间隔的情况下连续触发。第一次调用函数,会创建一个定时器,在指定的时间间隔之后执行。当第二次调用代码时,会先清除第一次的计时器并设置另一个。如果前一个定时器已经执行过了,这个操作就没有任何意义。下面通过代码来看一下这种形式:var processor = { timer = null; processing: function(){ ...原创 2018-06-13 18:31:12 · 192 阅读 · 0 评论 -
DOM遍历
“DOM2级遍历和范围”模块定义了两个用于辅助完成顺序遍历DOM结构的类型:NodeIterator和TreeWalker。这两个类型能够基于给定的起点对DOM结构执行深度优先遍历。 DOM遍历是深度优先的DOM结构遍历,也就是说,移动的方向至少有两个。遍历以给定的节点为根,不可能向上超出DOM树的根节点。下面我们通过一个例子来了解一下: 任何节点都可以作为遍历的根节点。假设我们现在要以b...原创 2018-06-06 17:34:58 · 616 阅读 · 0 评论 -
冒泡排序
冒泡排序的基本思想: 每次排序都将剩余数中的最大(小)的数放在合适的位置。 经过第一趟排序将最大(小)的数放在最后,第二趟排序将次大的(小)放在导数的位置,以此类推,直至将整个数组都排完。 冒泡排序是一个比较简单的排序,下面直接来看代码:function BubbleSort(arr){ var len = arr.length; for(var i=0;i&lt;l...原创 2018-06-20 23:24:23 · 131 阅读 · 0 评论 -
XmlHttpRequest 2级
FormData现代Web应用中频繁使用的一项功能就是表单数据的序列化,XmlHttpRequest 2级为此定义了FormData类型。FormData为序列化表单以及创建与表单格式相同的数据提供了便利。下面我们先来创建一个FormData对象。var data = new FormData();data.append('name','zhangmengying');append方...原创 2018-06-11 16:45:42 · 224 阅读 · 0 评论 -
Ajax
一:工作原理 相当于在用户和服务器之间加了一个中间层,使用户操作与服务器响应异步化。通过XmlHttpRequtst对象来向服务器发送异步请求,从服务器获得数据,然后用Javascript来操作DOM从而更新页面。二:ajax请求的基本步骤 (1):创建一个ajax对象,即XmlHttpRequtst对象。 (2):通过open()方法创建HTTP请求,连接服务器。 (3):s原创 2017-12-16 19:53:34 · 247 阅读 · 0 评论