dema

dema 查看完整档案

杭州编辑  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑
_ | |__ _ _ __ _ | '_ \| | | |/ _` | | |_) | |_| | (_| | |_.__/ \__,_|\__, | |___/ 个人简介什么都没有

个人动态

dema 提出了问题 · 2020-03-27

解决js函数执行次数问题

菜鸡前来向各位大佬请教下问题,如下函数。
当我采用方式1调用时,debounce函数感觉只会执行一次,因为console.log只打印了一次。
采用方式2时,每点一次都会执行,这是为什么?


function debounce() {
    console.log(this);
    return function () {
         
    }
}
//方式1:`addEventListener('click',debounce())`
//方式2:`addEventListener('click',debounce)`

个人初步猜测是不是因为这样:
debounce():相当于先执行了一次,然后实际上debounce()已经是返回的闭包。而debounce则没有预执行,相当于每次点击都是在初始化....

关注 3 回答 2

dema 提出了问题 · 2019-12-19

react里动态添加class后css没加载?

例如:

//index.js

setClassFunc=()=>{

if(true){
      //处理了一系列条件
     return 'class1 class2';
}else{
     //处理一些逻辑
     return 'class3 class4'
}     

}

//render

<div className={this.setClassFunc()}></div>

问题

页面渲染后,class正确的进来了,但是class对应的css没有,
请问如何解决?谢谢

关注 2 回答 2

dema 赞了文章 · 2019-10-17

可能是全网最全的http面试答案

HTTP有哪些方法?

  • HTTP1.0定义了三种请求方法: GET, POST 和 HEAD方法
  • HTTP1.1新增了五种请求方法:OPTIONS, PUT, DELETE, TRACE 和 CONNECT

这些方法的具体作用是什么?

  • GET: 通常用于请求服务器发送某些资源
  • HEAD: 请求资源的头部信息, 并且这些头部与 HTTP GET 方法请求时返回的一致. 该请求方法的一个使用场景是在下载一个大文件前先获取其大小再决定是否要下载, 以此可以节约带宽资源
  • OPTIONS: 用于获取目的资源所支持的通信选项
  • POST: 发送数据给服务器
  • PUT: 用于新增资源或者使用请求中的有效负载替换目标资源的表现形式
  • DELETE: 用于删除指定的资源
  • PATCH: 用于对资源进行部分修改
  • CONNECT: HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器
  • TRACE: 回显服务器收到的请求,主要用于测试或诊断

GET和POST有什么区别?

  • 数据传输方式不同:GET请求通过URL传输数据,而POST的数据通过请求体传输。
  • 安全性不同:POST的数据因为在请求主体内,所以有一定的安全性保证,而GET的数据在URL中,通过历史记录,缓存很容易查到数据信息。
  • 数据类型不同:GET只允许 ASCII 字符,而POST无限制
  • GET无害: 刷新、后退等浏览器操作GET请求是无害的,POST可能重复提交表单
  • 特性不同:GET是安全(这里的安全是指只读特性,就是使用这个方法不会引起服务器状态变化)且幂等(幂等的概念是指同一个请求方法执行多次和仅执行一次的效果完全相同),而POST是非安全非幂等

PUT和POST都是给服务器发送新增资源,有什么区别?

PUT 和POST方法的区别是,PUT方法是幂等的:连续调用一次或者多次的效果相同(无副作用),而POST方法是非幂等的。

除此之外还有一个区别,通常情况下,PUT的URI指向是具体单一资源,而POST可以指向资源集合。

举个例子,我们在开发一个博客系统,当我们要创建一篇文章的时候往往用POST https://www.jianshu.com/articles,这个请求的语义是,在articles的资源集合下创建一篇新的文章,如果我们多次提交这个请求会创建多个文章,这是非幂等的。

PUT https://www.jianshu.com/articles/820357430的语义是更新对应文章下的资源(比如修改作者名称等),这个URI指向的就是单一资源,而且是幂等的,比如你把『刘德华』修改成『蔡徐坤』,提交多少次都是修改成『蔡徐坤』

ps: 『POST表示创建资源,PUT表示更新资源』这种说法是错误的,两个都能创建资源,根本区别就在于幂等性

PUT和PATCH都是给服务器发送修改资源,有什么区别?

PUT和PATCH都是更新资源,而PATCH用来对已知资源进行局部更新。

比如我们有一篇文章的地址https://www.jianshu.com/articles/820357430,这篇文章的可以表示为:

article = {
    author: 'dxy',
    creationDate: '2019-6-12',
    content: '我写文章像蔡徐坤',
    id: 820357430
}

当我们要修改文章的作者时,我们可以直接发送PUT https://www.jianshu.com/articles/820357430,这个时候的数据应该是:

{
    author:'蔡徐坤',
    creationDate: '2019-6-12',
    content: '我写文章像蔡徐坤',
    id: 820357430
}

这种直接覆盖资源的修改方式应该用put,但是你觉得每次都带有这么多无用的信息,那么可以发送PATCH https://www.jianshu.com/articles/820357430,这个时候只需要:

{
    author:'蔡徐坤',
}

http的请求报文是什么样的?

请求报文有4部分组成:

  • 请求行
  • 请求头部
  • 空行
  • 请求体

2019-06-14-11-24-10

  • 请求行包括:请求方法字段、URL字段、HTTP协议版本字段。它们用空格分隔。例如,GET /index.html HTTP/1.1。
  • 请求头部:请求头部由关键字/值对组成,每行一对,关键字和值用英文冒号“:”分隔
  1. User-Agent:产生请求的浏览器类型。
  2. Accept:客户端可识别的内容类型列表。
  3. Host:请求的主机名,允许多个域名同处一个IP地址,即虚拟主机。
  • 请求体: post put等请求携带的数据

2019-06-14-11-33-37

http的响应报文是什么样的?

请求报文有4部分组成:

  • 响应行
  • 响应头
  • 空行
  • 响应体

2019-06-14-11-37-02

  • 响应行: 由协议版本,状态码和状态码的原因短语组成,例如HTTP/1.1 200 OK
  • 响应头:响应部首组成
  • 响应体:服务器响应的数据

聊一聊HTTP的部首有哪些?

内容很多,重点看标『✨』内容

通用首部字段(General Header Fields):请求报文和响应报文两方都会使用的首部

  • Cache-Control  控制缓存 ✨
  • Connection 连接管理、逐条首部 ✨
  • Upgrade  升级为其他协议
  • via 代理服务器的相关信息
  • Wraning 错误和警告通知
  • Transfor-Encoding 报文主体的传输编码格式 ✨
  • Trailer 报文末端的首部一览
  • Pragma 报文指令
  • Date 创建报文的日期

请求首部字段(Reauest Header Fields):客户端向服务器发送请求的报文时使用的首部

  • Accept 客户端或者代理能够处理的媒体类型 ✨
  • Accept-Encoding 优先可处理的编码格式
  • Accept-Language 优先可处理的自然语言
  • Accept-Charset 优先可以处理的字符集
  • If-Match 比较实体标记(ETage) ✨
  • If-None-Match 比较实体标记(ETage)与 If-Match相反 ✨
  • If-Modified-Since 比较资源更新时间(Last-Modified)✨
  • If-Unmodified-Since比较资源更新时间(Last-Modified),与 If-Modified-Since相反 ✨
  • If-Rnages 资源未更新时发送实体byte的范围请求
  • Range 实体的字节范围请求 ✨
  • Authorization web的认证信息 ✨
  • Proxy-Authorization 代理服务器要求web认证信息
  • Host 请求资源所在服务器 ✨
  • From 用户的邮箱地址
  • User-Agent 客户端程序信息 ✨
  • Max-Forwrads 最大的逐跳次数
  • TE 传输编码的优先级
  • Referer 请求原始放的url
  • Expect 期待服务器的特定行为

响应首部字段(Response Header Fields):从服务器向客户端响应时使用的字段

  • Accept-Ranges 能接受的字节范围
  • Age 推算资源创建经过时间
  • Location 令客户端重定向的URI ✨
  • vary  代理服务器的缓存信息
  • ETag 能够表示资源唯一资源的字符串 ✨
  • WWW-Authenticate 服务器要求客户端的验证信息
  • Proxy-Authenticate 代理服务器要求客户端的验证信息
  • Server 服务器的信息 ✨
  • Retry-After 和状态码503 一起使用的首部字段,表示下次请求服务器的时间

实体首部字段(Entiy Header Fields):针对请求报文和响应报文的实体部分使用首部

  • Allow 资源可支持http请求的方法 ✨
  • Content-Language 实体的资源语言
  • Content-Encoding 实体的编码格式
  • Content-Length 实体的大小(字节)
  • Content-Type 实体媒体类型
  • Content-MD5 实体报文的摘要
  • Content-Location 代替资源的yri
  • Content-Rnages 实体主体的位置返回
  • Last-Modified 资源最后的修改资源 ✨
  • Expires 实体主体的过期资源 ✨

聊一聊HTTP的状态码有哪些?

2XX 成功

  • 200 OK,表示从客户端发来的请求在服务器端被正确处理 ✨
  • 201 Created 请求已经被实现,而且有一个新的资源已经依据请求的需要而建立
  • 202 Accepted 请求已接受,但是还没执行,不保证完成请求
  • 204 No content,表示请求成功,但响应报文不含实体的主体部分
  • 206 Partial Content,进行范围请求 ✨

3XX 重定向

  • 301 moved permanently,永久性重定向,表示资源已被分配了新的 URL
  • 302 found,临时性重定向,表示资源临时被分配了新的 URL ✨
  • 303 see other,表示资源存在着另一个 URL,应使用 GET 方法丁香获取资源
  • 304 not modified,表示服务器允许访问资源,但因发生请求未满足条件的情况
  • 307 temporary redirect,临时重定向,和302含义相同

4XX 客户端错误

  • 400 bad request,请求报文存在语法错误 ✨
  • 401 unauthorized,表示发送的请求需要有通过 HTTP 认证的认证信息 ✨
  • 403 forbidden,表示对请求资源的访问被服务器拒绝 ✨
  • 404 not found,表示在服务器上没有找到请求的资源 ✨
  • 408 Request timeout, 客户端请求超时
  • 409 Confict, 请求的资源可能引起冲突

5XX 服务器错误

  • 500 internal sever error,表示服务器端在执行请求时发生了错误 ✨
  • 501 Not Implemented 请求超出服务器能力范围,例如服务器不支持当前请求所需要的某个功能,或者请求是服务器不支持的某个方法
  • 503 service unavailable,表明服务器暂时处于超负载或正在停机维护,无法处理请求
  • 505 http version not supported 服务器不支持,或者拒绝支持在请求中使用的 HTTP 版本

同样是重定向307,303,302的区别?

302是http1.0的协议状态码,在http1.1版本的时候为了细化302状态码又出来了两个303和307。

303明确表示客户端应当采用get方法获取资源,他会把POST请求变为GET请求进行重定向。
307会遵照浏览器标准,不会从post变为get。

HTTP的keep-alive是干什么的?

在早期的HTTP/1.0中,每次http请求都要创建一个连接,而创建连接的过程需要消耗资源和时间,为了减少资源消耗,缩短响应时间,就需要重用连接。在后来的HTTP/1.0中以及HTTP/1.1中,引入了重用连接的机制,就是在http请求头中加入Connection: keep-alive来告诉对方这个请求响应完成后不要关闭,下一次咱们还用这个请求继续交流。协议规定HTTP/1.0如果想要保持长连接,需要在请求头中加上Connection: keep-alive。

keep-alive的优点:

  • 较少的CPU和内存的使用(由于同时打开的连接的减少了)
  • 允许请求和应答的HTTP管线化
  • 降低拥塞控制 (TCP连接减少了)
  • 减少了后续请求的延迟(无需再进行握手)
  • 报告错误无需关闭TCP连

为什么有了HTTP为什么还要HTTPS?

https是安全版的http,因为http协议的数据都是明文进行传输的,所以对于一些敏感信息的传输就很不安全,HTTPS就是为了解决HTTP的不安全而生的。

HTTPS是如何保证安全的?

过程比较复杂,我们得先理解两个概念

对称加密:即通信的双方都使用同一个秘钥进行加解密,比如特务接头的暗号,就属于对称加密

对称加密虽然很简单性能也好,但是无法解决首次把秘钥发给对方的问题,很容易被hacker拦截秘钥。

非对称加密:

  1. 私钥 + 公钥= 密钥对
  2. 即用私钥加密的数据,只有对应的公钥才能解密,用公钥加密的数据,只有对应的私钥才能解密
  3. 因为通信双方的手里都有一套自己的密钥对,通信之前双方会先把自己的公钥都先发给对方
  4. 然后对方再拿着这个公钥来加密数据响应给对方,等到到了对方那里,对方再用自己的私钥进行解密

非对称加密虽然安全性更高,但是带来的问题就是速度很慢,影响性能。

解决方案:

那么结合两种加密方式,将对称加密的密钥使用非对称加密的公钥进行加密,然后发送出去,接收方使用私钥进行解密得到对称加密的密钥,然后双方可以使用对称加密来进行沟通。

此时又带来一个问题,中间人问题:

如果此时在客户端和服务器之间存在一个中间人,这个中间人只需要把原本双方通信互发的公钥,换成自己的公钥,这样中间人就可以轻松解密通信双方所发送的所有数据。

所以这个时候需要一个安全的第三方颁发证书(CA),证明身份的身份,防止被中间人攻击。

证书中包括:签发者、证书用途、使用者公钥、使用者私钥、使用者的HASH算法、证书到期时间等

2019-06-14-12-30-18

但是问题来了,如果中间人篡改了证书,那么身份证明是不是就无效了?这个证明就白买了,这个时候需要一个新的技术,数字签名。

数字签名就是用CA自带的HASH算法对证书的内容进行HASH得到一个摘要,再用CA的私钥加密,最终组成数字签名。

当别人把他的证书发过来的时候,我再用同样的Hash算法,再次生成消息摘要,然后用CA的公钥对数字签名解密,得到CA创建的消息摘要,两者一比,就知道中间有没有被人篡改了。

这个时候就能最大程度保证通信的安全了。

HTTP2相对于HTTP1.x有什么优势和特点?

二进制分帧

帧:HTTP/2 数据通信的最小单位消息:指 HTTP/2 中逻辑上的 HTTP 消息。例如请求和响应等,消息由一个或多个帧组成。

流:存在于连接中的一个虚拟通道。流可以承载双向消息,每个流都有一个唯一的整数ID

HTTP/2 采用二进制格式传输数据,而非 HTTP 1.x 的文本格式,二进制协议解析起来更高效。

服务器推送

服务端可以在发送页面HTML时主动推送其它资源,而不用等到浏览器解析到相应位置,发起请求再响应。例如服务端可以主动把JS和CSS文件推送给客户端,而不需要客户端解析HTML时再发送这些请求。

服务端可以主动推送,客户端也有权利选择是否接收。如果服务端推送的资源已经被浏览器缓存过,浏览器可以通过发送RST_STREAM帧来拒收。主动推送也遵守同源策略,服务器不会随便推送第三方资源给客户端。

头部压缩

HTTP/1.x会在请求和响应中中重复地携带不常改变的、冗长的头部数据,给网络带来额外的负担。

  • HTTP/2在客户端和服务器端使用“首部表”来跟踪和存储之前发送的键-值对,对于相同的数据,不再通过每次请求和响应发送
  • 首部表在HTTP/2的连接存续期内始终存在,由客户端和服务器共同渐进地更新;
  • 每个新的首部键-值对要么被追加到当前表的末尾,要么替换表中之前的值。
你可以理解为只发送差异数据,而不是全部发送,从而减少头部的信息量

2019-06-14-12-52-59

多路复用

HTTP 1.x 中,如果想并发多个请求,必须使用多个 TCP 链接,且浏览器为了控制资源,还会对单个域名有 6-8个的TCP链接请求限制。

HTTP2中:

  • 同域名下所有通信都在单个连接上完成。
  • 单个连接可以承载任意数量的双向数据流。
  • 数据流以消息的形式发送,而消息又由一个或多个帧组成,多个帧之间可以乱序发送,因为根据帧首部的流标识可以重新组装

2019-06-14-12-58-50

拓展阅读:HTTP/2特性及其在实际应用中的表现

公众号

想要实时关注笔者最新的文章和最新的文档更新请关注公众号程序员面试官,后续的文章会优先在公众号更新.

简历模板: 关注公众号回复「模板」获取

《前端面试手册》: 配套于本指南的突击手册,关注公众号回复「fed」获取

2019-08-12-03-18-41

本文由博客一文多发平台 OpenWrite 发布!
查看原文

赞 62 收藏 50 评论 0

dema 赞了文章 · 2019-09-19

面试官问:能否模拟实现JS的call和apply方法

前言

这是面试官问系列的第三篇,旨在帮助读者提升JS基础知识,包含new、call、apply、this、继承相关知识。
面试官问系列文章如下:感兴趣的读者可以点击阅读。
1.面试官问:能否模拟实现JS的new操作符
2.面试官问:能否模拟实现JS的bind方法
3.面试官问:能否模拟实现JS的call和apply方法
4.面试官问:JS的this指向
5.面试官问:JS的继承

这个系列中第二篇模拟bind方法时是使用的callapply修改this指向。但面试官可能问:能否不用callapply来实现呢。意思也就是需要模拟实现callapply的了。

附上之前写文章写过的一段话:已经有很多模拟实现callapply的文章,为什么自己还要写一遍呢。学习就好比是座大山,人们沿着不同的路登山,分享着自己看到的风景。你不一定能看到别人看到的风景,体会到别人的心情。只有自己去登山,才能看到不一样的风景,体会才更加深刻。

先通过MDN认识下callapply

MDN 文档:Function.prototype.call()

语法

fun.call(thisArg, arg1, arg2, ...)

thisArg

fun函数运行时指定的this值。需要注意的是,指定的this值并不一定是该函数执行时真正的this值,如果这个函数处于非严格模式下,则指定为nullundefinedthis值会自动指向全局对象(浏览器中就是window对象),同时值为原始值(数字,字符串,布尔值)的this会指向该原始值的自动包装对象。

arg1, arg2, ...

指定的参数列表

返回值

返回值是你调用的方法的返回值,若该方法没有返回值,则返回undefined

MDN 文档:Function.prototype.apply()

func.apply(thisArg, [argsArray])

thisArg

可选的。在 func 函数运行时使用的 this 值。请注意,this可能不是该方法看到的实际值:如果这个函数处于非严格模式下,则指定为 nullundefined 时会自动替换为指向全局对象,原始值会被包装。

argsArray

可选的。一个数组或者类数组对象,其中的数组元素将作为单独的参数传给 func 函数。如果该参数的值为 nullundefined,则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。

返回值

调用有指定this值和参数的函数的结果。
直接先看例子1

callapply 的异同

相同点:

1、callapply的第一个参数thisArg,都是func运行时指定的this。而且,this可能不是该方法看到的实际值:如果这个函数处于非严格模式下,则指定为 nullundefined 时会自动替换为指向全局对象,原始值会被包装。

2、都可以只传递一个参数。

不同点:apply只接收两个参数,第二个参数可以是数组也可以是类数组,其实也可以是对象,后续的参数忽略不计。call接收第二个及以后一系列的参数。

看两个简单例子1和2**:

// 例子1:浏览器环境 非严格模式下
var doSth = function(a, b){
    console.log(this);
    console.log([a, b]);
}
doSth.apply(null, [1, 2]); // this是window  // [1, 2]
doSth.apply(0, [1, 2]); // this 是 Number(0) // [1, 2]
doSth.apply(true); // this 是 Boolean(true) // [undefined, undefined]
doSth.call(undefined, 1, 2); // this 是 window // [1, 2]
doSth.call('0', 1, {a: 1}); // this 是 String('0') // [1, {a: 1}]
// 例子2:浏览器环境 严格模式下
'use strict';
var doSth2 = function(a, b){
    console.log(this);
    console.log([a, b]);
}
doSth2.call(0, 1, 2); // this 是 0 // [1, 2]
doSth2.apply('1'); // this 是 '1' // [undefined, undefined]
doSth2.apply(null, [1, 2]); // this 是 null // [1, 2]

typeof7种类型(undefined number string boolean symbol object function),笔者都验证了一遍:更加验证了相同点第一点,严格模式下,函数的this值就是callapply的第一个参数thisArg,非严格模式下,thisArg值被指定为 nullundefinedthis值会自动替换为指向全局对象,原始值则会被自动包装,也就是new Object()

重新认识了callapply会发现:它们作用都是一样的,改变函数里的this指向为第一个参数thisArg,如果明确有多少参数,那可以用call,不明确则可以使用apply。也就是说完全可以不使用call,而使用apply代替。

也就是说,我们只需要模拟实现applycall可以根据参数个数都放在一个数组中,给到apply即可。

模拟实现 apply

既然准备模拟实现apply,那先得看看ES5规范。ES5规范 英文版ES5规范 中文版apply的规范下一个就是call的规范,可以点击打开新标签页去查看,这里摘抄一部分。

Function.prototype.apply (thisArg, argArray)

当以 thisArgargArray 为参数在一个 func 对象上调用 apply 方法,采用如下步骤:

1.如果 IsCallable(func)false, 则抛出一个 TypeError 异常。

2.如果 argArraynullundefined, 则返回提供 thisArg 作为 this 值并以空参数列表调用 func[[Call]] 内部方法的结果。

3.返回提供 thisArg 作为 this 值并以空参数列表调用 func[[Call]] 内部方法的结果。

4.如果 Type(argArray) 不是 Object, 则抛出一个 TypeError 异常。

5~8 略

9.提供 thisArg 作为 this 值并以 argList 作为参数列表,调用 func[[Call]] 内部方法,返回结果。

apply 方法的 length 属性是 2

在外面传入的 thisArg 值会修改并成为 this 值。thisArgundefinednull 时它会被替换成全局对象,所有其他值会被应用 ToObject 并将结果作为 this 值,这是第三版引入的更改。

结合上文和规范,如何将函数里的this指向第一个参数thisArg呢,这是一个问题。
这时候请出例子3

// 浏览器环境 非严格模式下
var doSth = function(a, b){
    console.log(this);
    console.log(this.name);
    console.log([a, b]);
}
var student = {
    name: '轩辕Rowboat',
    doSth: doSth,
};
student.doSth(1, 2); // this === student // true // '轩辕Rowboat' // [1, 2]
doSth.apply(student, [1, 2]); // this === student // true // '轩辕Rowboat' // [1, 2]

可以得出结论1:在对象student上加一个函数doSth,再执行这个函数,这个函数里的this就指向了这个对象。那也就是可以在thisArg上新增调用函数,执行后删除这个函数即可。
知道这些后,我们试着容易实现第一版本:

// 浏览器环境 非严格模式
function getGlobalObject(){
    return this;
}
Function.prototype.applyFn = function apply(thisArg, argsArray){ // `apply` 方法的 `length` 属性是 `2`。
    // 1.如果 `IsCallable(func)` 是 `false`, 则抛出一个 `TypeError` 异常。
    if(typeof this !== 'function'){
        throw new TypeError(this + ' is not a function');
    }

    // 2.如果 argArray 是 null 或 undefined, 则
    // 返回提供 thisArg 作为 this 值并以空参数列表调用 func 的 [[Call]] 内部方法的结果。
    if(typeof argsArray === 'undefined' || argsArray === null){
        argsArray = [];
    }
    
    // 3.如果 Type(argArray) 不是 Object, 则抛出一个 TypeError 异常 .
    if(argsArray !== new Object(argsArray)){
        throw new TypeError('CreateListFromArrayLike called on non-object');
    }

    if(typeof thisArg === 'undefined' || thisArg === null){
        // 在外面传入的 thisArg 值会修改并成为 this 值。
        // ES3: thisArg 是 undefined 或 null 时它会被替换成全局对象 浏览器里是window
        thisArg = getGlobalObject();
    }

    // ES3: 所有其他值会被应用 ToObject 并将结果作为 this 值,这是第三版引入的更改。
    thisArg = new Object(thisArg);
    var __fn = '__fn';
    thisArg[__fn] = this;
    // 9.提供 thisArg 作为 this 值并以 argList 作为参数列表,调用 func 的 [[Call]] 内部方法,返回结果
    var result = thisArg[__fn](...argsArray);
    delete thisArg[__fn];
    return result;
};

实现第一版后,很容易找出两个问题:

  • [ ] 1.__fn 同名覆盖问题,thisArg对象上有__fn,那就被覆盖了然后被删除了。

针对问题1
解决方案一:采用ES6Sybmol() 独一无二的。可以本来就是模拟ES3的方法。如果面试官不允许用呢。
解决方案二:自己用Math.random()模拟实现独一无二的key。面试时可以直接用生成时间戳即可。

// 生成UUID 通用唯一识别码
// 大概生成 这样一串 '18efca2d-6e25-42bf-a636-30b8f9f2de09'
function generateUUID(){
    var i, random;
    var uuid = '';
    for (i = 0; i < 32; i++) {
        random = Math.random() * 16 | 0;
        if (i === 8 || i === 12 || i === 16 || i === 20) {
            uuid += '-';
        }
        uuid += (i === 12 ? 4 : (i === 16 ? (random & 3 | 8) : random))
            .toString(16);
    }
    return uuid;
}
// 简单实现
// '__' + new Date().getTime();

如果这个key万一这对象中还是有,为了保险起见,可以做一次缓存操作。比如如下代码:

var student = {
    name: '轩辕Rowboat',
    doSth: 'doSth',
};
var originalVal = student.doSth;
var hasOriginalVal = student.hasOwnProperty('doSth');
student.doSth = function(){};
delete student.doSth;
// 如果没有,`originalVal`则为undefined,直接赋值新增了一个undefined,这是不对的,所以需判断一下。
if(hasOriginalVal){
    student.doSth = originalVal;
}
console.log('student:', student); // { name: '轩辕Rowboat', doSth: 'doSth' }
  • [ ] 2.使用了ES6扩展符...

解决方案一:采用eval来执行函数。

eval把字符串解析成代码执行。

MDN 文档:eval

语法
eval(string)

参数

string

表示JavaScript表达式,语句或一系列语句的字符串。表达式可以包含变量以及已存在对象的属性。

返回值

执行指定代码之后的返回值。如果返回值为空,返回undefined

解决方案二:但万一面试官不允许用eval呢,毕竟eval是魔鬼。可以采用new Function()来生成执行函数。
MDN 文档:Function

语法

new Function ([arg1[, arg2[, ...argN]],] functionBody)

参数

arg1, arg2, ... argN

被函数使用的参数的名称必须是合法命名的。参数名称是一个有效的JavaScript标识符的字符串,或者一个用逗号分隔的有效字符串的列表;例如“×”“theValue”,或“A,B”

functionBody

一个含有包括函数定义的JavaScript语句的字符串。

接下来看两个例子:

简单例子:
var sum = new Function('a', 'b', 'return a + b');
console.log(sum(2, 6));
// 稍微复杂点的例子:
var student = {
    name: '轩辕Rowboat',
    doSth: function(argsArray){
        console.log(argsArray);
        console.log(this.name);
    }
};
// var result = student.doSth(['Rowboat', 18]);
// 用new Function()生成函数并执行返回结果
var result = new Function('return arguments[0][arguments[1]](arguments[2][0], arguments[2][1])')(student, 'doSth', ['Rowboat', 18]);
// 个数不定
// 所以可以写一个函数生成函数代码:
function generateFunctionCode(argsArrayLength){
    var code = 'return arguments[0][arguments[1]](';
    for(var i = 0; i < argsArrayLength; i++){
        if(i > 0){
            code += ',';
        }
        code += 'arguments[2][' + i + ']';
    }
    code += ')';
    // return arguments[0][arguments[1]](arg1, arg2, arg3...)
    return code;
}

你可能不知道在ES3、ES5undefined 是能修改的

可能大部分人不知道。ES5中虽然在全局作用域下不能修改,但在局部作用域中也是能修改的,不信可以复制以下测试代码在控制台执行下。虽然一般情况下是不会的去修改它。

function test(){
    var undefined = 3;
    console.log(undefined); // chrome下也是 3
}
test();

所以判断一个变量a是不是undefined,更严谨的方案是typeof a === 'undefined'或者a === void 0;
这里面用的是voidvoid的作用是计算表达式,始终返回undefined,也可以这样写void(0)
更多可以查看韩子迟的这篇文章:为什么用「void 0」代替「undefined」
解决了这几个问题,比较容易实现如下代码。

使用 new Function() 模拟实现的apply

// 浏览器环境 非严格模式
function getGlobalObject(){
    return this;
}
function generateFunctionCode(argsArrayLength){
    var code = 'return arguments[0][arguments[1]](';
    for(var i = 0; i < argsArrayLength; i++){
        if(i > 0){
            code += ',';
        }
        code += 'arguments[2][' + i + ']';
    }
    code += ')';
    // return arguments[0][arguments[1]](arg1, arg2, arg3...)
    return code;
}
Function.prototype.applyFn = function apply(thisArg, argsArray){ // `apply` 方法的 `length` 属性是 `2`。
    // 1.如果 `IsCallable(func)` 是 `false`, 则抛出一个 `TypeError` 异常。
    if(typeof this !== 'function'){
        throw new TypeError(this + ' is not a function');
    }
    // 2.如果 argArray 是 null 或 undefined, 则
    // 返回提供 thisArg 作为 this 值并以空参数列表调用 func 的 [[Call]] 内部方法的结果。
    if(typeof argsArray === 'undefined' || argsArray === null){
        argsArray = [];
    }
    // 3.如果 Type(argArray) 不是 Object, 则抛出一个 TypeError 异常 .
    if(argsArray !== new Object(argsArray)){
        throw new TypeError('CreateListFromArrayLike called on non-object');
    }
    if(typeof thisArg === 'undefined' || thisArg === null){
        // 在外面传入的 thisArg 值会修改并成为 this 值。
        // ES3: thisArg 是 undefined 或 null 时它会被替换成全局对象 浏览器里是window
        thisArg = getGlobalObject();
    }
    // ES3: 所有其他值会被应用 ToObject 并将结果作为 this 值,这是第三版引入的更改。
    thisArg = new Object(thisArg);
    var __fn = '__' + new Date().getTime();
    // 万一还是有 先存储一份,删除后,再恢复该值
    var originalVal = thisArg[__fn];
    // 是否有原始值
    var hasOriginalVal = thisArg.hasOwnProperty(__fn);
    thisArg[__fn] = this;
    // 9.提供 `thisArg` 作为 `this` 值并以 `argList` 作为参数列表,调用 `func` 的 `[[Call]]` 内部方法,返回结果。
    // ES6版
    // var result = thisArg[__fn](...args);
    var code = generateFunctionCode(argsArray.length);
    var result = (new Function(code))(thisArg, __fn, argsArray);
    delete thisArg[__fn];
    if(hasOriginalVal){
        thisArg[__fn] = originalVal;
    }
    return result;
};

利用模拟实现的apply模拟实现call

Function.prototype.callFn = function call(thisArg){
    var argsArray = [];
    var argumentsLength = arguments.length;
    for(var i = 0; i < argumentsLength - 1; i++){
        // argsArray.push(arguments[i + 1]);
        argsArray[i] = arguments[i + 1];
    }
    console.log('argsArray:', argsArray);
    return this.applyFn(thisArg, argsArray);
}
// 测试例子
var doSth = function (name, age){
    var type = Object.prototype.toString.call(this);
    console.log(typeof doSth);
    console.log(this === firstArg);
    console.log('type:', type);
    console.log('this:', this);
    console.log('args:', [name, age], arguments);
    return 'this--';
};

var name = 'window';

var student = {
    name: '轩辕Rowboat',
    age: 18,
    doSth: 'doSth',
    __fn: 'doSth',
};
var firstArg = student;
var result = doSth.applyFn(firstArg, [1, {name: 'Rowboat'}]);
var result2 = doSth.callFn(firstArg, 1, {name: 'Rowboat'});
console.log('result:', result);
console.log('result2:', result2);

细心的你会发现注释了这一句argsArray.push(arguments[i + 1]);,事实上push方法,内部也有一层循环。所以理论上不使用push性能会更好些。面试官也可能根据这点来问时间复杂度和空间复杂度的问题。

// 看看V8引擎中的具体实现:
function ArrayPush() {
    var n = TO_UINT32( this.length );    // 被push的对象的length
    var m = %_ArgumentsLength();     // push的参数个数
    for (var i = 0; i < m; i++) {
        this[ i + n ] = %_Arguments( i );   // 复制元素     (1)
    }
    this.length = n + m;      // 修正length属性的值    (2)
    return this.length;
};

行文至此,就基本结束了,你可能还发现就是写的非严格模式下,thisArg原始值会包装成对象,添加函数并执行,再删除。而严格模式下还是原始值这个没有实现,而且万一这个对象是冻结对象呢,Object.freeze({}),是无法在这个对象上添加属性的。所以这个方法只能算是非严格模式下的简版实现。最后来总结一下。

总结

通过MDN认识callapply,阅读ES5规范,到模拟实现apply,再实现call
就是使用在对象上添加调用apply的函数执行,这时的调用函数的this就指向了这个thisArg,再返回结果。引出了ES6 SymbolES6的扩展符...evalnew Function(),严格模式等。

事实上,现实业务场景不需要去模拟实现callapply,毕竟是ES3就提供的方法。但面试官可以通过这个面试题考察候选人很多基础知识。如:callapply的使用。ES6 SymbolES6的扩展符...evalnew Function(),严格模式,甚至时间复杂度和空间复杂度等。

读者发现有不妥或可改善之处,欢迎指出。另外觉得写得不错,可以点个赞,也是对笔者的一种支持。

// 最终版版 删除注释版,详细注释看文章
// 浏览器环境 非严格模式
function getGlobalObject(){
    return this;
}
function generateFunctionCode(argsArrayLength){
    var code = 'return arguments[0][arguments[1]](';
    for(var i = 0; i < argsArrayLength; i++){
        if(i > 0){
            code += ',';
        }
        code += 'arguments[2][' + i + ']';
    }
    code += ')';
    return code;
}
Function.prototype.applyFn = function apply(thisArg, argsArray){
    if(typeof this !== 'function'){
        throw new TypeError(this + ' is not a function');
    }
    if(typeof argsArray === 'undefined' || argsArray === null){
        argsArray = [];
    }
    if(argsArray !== new Object(argsArray)){
        throw new TypeError('CreateListFromArrayLike called on non-object');
    }
    if(typeof thisArg === 'undefined' || thisArg === null){
        thisArg = getGlobalObject();
    }
    thisArg = new Object(thisArg);
    var __fn = '__' + new Date().getTime();
    var originalVal = thisArg[__fn];
    var hasOriginalVal = thisArg.hasOwnProperty(__fn);
    thisArg[__fn] = this;
    var code = generateFunctionCode(argsArray.length);
    var result = (new Function(code))(thisArg, __fn, argsArray);
    delete thisArg[__fn];
    if(hasOriginalVal){
        thisArg[__fn] = originalVal;
    }
    return result;
};
Function.prototype.callFn = function call(thisArg){
    var argsArray = [];
    var argumentsLength = arguments.length;
    for(var i = 0; i < argumentsLength - 1; i++){
        argsArray[i] = arguments[i + 1];
    }
    return this.applyFn(thisArg, argsArray);
}

扩展阅读

《JavaScript设计模式与开发实践》- 第二章 第 2 章 this、call和apply
JS魔法堂:再次认识Function.prototype.call
不用call和apply方法模拟实现ES5的bind方法
JavaScript深入之call和apply的模拟实现

笔者学习源码整体架构系列

1.学习 jQuery 源码整体架构,打造属于自己的 js 类库
2.学习 underscore 源码整体架构,打造属于自己的函数式编程类库
3.学习 lodash 源码整体架构,打造属于自己的函数式编程类库
4.学习 sentry 源码整体架构,打造属于自己的前端异常监控SDK
5.学习 vuex 源码整体架构,打造属于自己的状态管理库
6.学习 axios 源码整体架构,打造属于自己的请求库
7.学习 koa 源码的整体架构,浅析koa洋葱模型原理和co原理

关于

作者:常以轩辕Rowboat若川为名混迹于江湖。前端路上 | PPT爱好者 | 所知甚少,唯善学。
若川的博客,使用vuepress重构了,阅读体验可能更好些
掘金专栏,欢迎关注~
segmentfault前端视野专栏,欢迎关注~
知乎前端视野专栏,欢迎关注~
github blog,相关源码和资源都放在这里,求个star^_^~

欢迎加微信交流和关注公众号

可能比较有趣的微信公众号,长按扫码关注。也可以加微信 ruochuan12,注明来源,拉您进【前端视野交流群】。

若川视野

查看原文

赞 67 收藏 57 评论 4

dema 提出了问题 · 2019-06-24

记忆化斐波那契函数(Memoization)

一道面试题
如下:
斐波那契数列指的是类似于以下的数列:

1, 1, 2, 3, 5, 8, 13, ....

也就是,第 n 个数由数列的前两个相加而来:f(n) = f(n - 1) + f(n -2)

请你完成 fibonacci 函数,接受 n 作为参数,可以获取数列中第 n 个数,例如:

fibonacci(1) // => 1
fibonacci(2) // => 1
fibonacci(3) // => 2
...

测试程序会从按顺序依次获取斐波那契数列中的数,请注意程序不要超时,也不要添加额外的全局变量。

本题来源:《JavaScript 语言精髓》

答案之一:

const fibonacci = ((memo = [0, 1]) => {
  const fib = (n) => {
    let result = memo[n]
    if (typeof result !== "number") {
      result = fib(n - 1) + fib(n - 2)
      memo[n] = result
    }
    return result
  }
  return fib
})()

问题:
1,这里的程序超时,指的是什么?
2,有没有大佬详细解说下这个答案?

关注 1 回答 0

dema 赞了文章 · 2019-06-06

【JS基础】类型转换知多少

开胃菜

先说一个题外话,我在工作中遇到一个问题,需要比较 "08:00""09:00" 的大小,最后我找到三种方法:

  • 在两个字符串前后各拼接相同的年月日和秒,拼成完整的时间格式进行比较:
var head = "2016-01-01 "
var foot = ":00"

var time1 = head + "08:00" + foot //"2016-01-01 08:00:00"
var time2 = head + "09:00" + foot //"2016-01-01 09:00:00"

剩下的就不说了,比较两个完整的日期还是很容易的。

  • 把两个字符串中的冒号去掉,转换成数字进行比较:
function timeToNumber(time) {
    let [head,foot] = time.split(":")
    return Number(head+foot)
}

var time1 = timeToNumber("08:00") //800
var time2 = timeToNumber("09:00") //900
  • 直接比较

对,你没有看错,直接比较两个字符串:

"08:00" > "09:00" //false

看到这里估计有人就纳闷了,很明显第三种方法是更简洁的,但是字符串比较,好像很少见,它比较的依据是什么呢?

其实,字符串比较大小,会从左到右依次取两个字符串中的字符,两两比较他们charCodeAt()的结果,直到比较出大小就停止。比如:

var str1 = "a11"
var str2 = "a2"
// str1 和 str2 比较的时候,会先比较 str1[0] 和 str2[0],两个都是 "a",比较下一个
// str1[1] 是"1",charCodeAt()是49,str2[1] 是"2",结果是50,所以 str1[1] < str2[1],对比结束
// 最终结果 str1 < str2 

同理,在比较"08:00""09:00"的时候,先比较两个"0",发现一致之后比较"8""9",所以"08:00" < "09:00"

这里有一个问题就是,时间格式必须保持一致,位数不够的记得补"0",拿"8:00""10:00"比较会发现结果有问题,必须拿"08:00""10:00"比较才可以。

这个问题就说到这里,大家有其他的方法可以留言补充,给大家提供不同的思路。开胃菜结束,进入正题。

正题

作为一个爱(记)学(不)习(清)的好(笨)孩子,通过字符串比较这件事,我意识到还有更多的非相同类型的比较,比如字符串和数字的比较,布尔和数组的比较(我疯了么我这么用),另外还有加减乘除等其他操作符。

我觉得有必要整理一下了。

我第一反应是这张图:

真是迷人的笑容呢 :)

在比较之前,我们需要先了解下各种数据类型转化的结果有哪些。

转数字

  • 字符串:

    • 空字符串是0
    • 字符串头尾有空格会忽略
    • 空格在中间,或者字符串中含有非数字类型字符,转换结果就是NaN
  • 布尔:true -> 1, false -> 0
  • undefined字: NaN
  • null: 0
  • 数组:

    • 空数组是0
    • 如果数组中有且只有一项是数字元素,转换为数字
    • 其他情况NaN
  • 对象:

    • 如果对象有valueOf()方法,就调用该方法。如果返回基本类型值,就将这个值转化为数字
    • 如果对象没有valueOf()方法或者该方法返回的不是基本类型值,就会调用该对象的toString()方法。如果存在且返回值是基本类型值,就转化为数字
    • 否则就报错
  • 函数:NaN

转字符串

  • undefined -> "undefined"
  • null ->"null"
  • true -> "true" / false ->"false"
  • 数字:极小和极大的数字使用指数形式,一般的情况你懂得
  • 对象:

    • 如果对象有toString()方法,就调用toString()方法。如果该方法返回基本类型值,就将这个值转化为字符串
    • 如果对象没有toString()方法或者该方法返回的不是基本类型值,就会调用该对象的valueOf()方法。如果存在且返回值是基本类型值,就转化为字符串
    • 否则就报错
    • 除非自行定义,否则toString()返回内部属性[[Class]]的值,如"[object Object]"

转布尔

  • 所有的假值(undefinednull+0-0NaN"")会被转化为 false,其他都会被转为true
  • 所以,空对象、空数组都是true

转对象

  • nullundefined转对象直接抛异常
  • 基本类型通过调用String()Number()Boolean()构造函数,转换为他们各自的包装对象

使用场景

知道了各种数据类型转化的规则,那么在不同的场景中,究竟是怎么使用的呢?

== 运算符

常见的误区是:==检查值是否相等,===检查值和类型是否相等。

正确的解释是:==允许在相等比较中进行强制类型转换,而===不允许。

事实上,=====都会检查操作数的类型,区别在于类型不同时它们的处理方式不同。

  1. 如果一个值是null,另一个值是undefined,则相等
  2. 如果一个是字符串,另一个值是数字,则把字符串转换成数字,进行比较
  3. 如果任意值是true,则把true转换成1再进行比较;如果任意值是false,则把false转换成0再进行比较
  4. 如果一个是对象,另一个是数值或字符串,把对象转换成基础类型的值再比较

    • 对象转基础类型时,优先调用valueOf(),再调用toString()
    • 例外的是DateDate 利用的是toString()转换

经典题

[] == false // true
!![] // true

//原因是 == 两边都转为数字进行比较,而不是 [] 转为布尔值与 false 比较

+ 运算符

+ 运算符可以作为一元运算符使用,此时的作用是将后边跟着的数据转为数字

+true // 1
+[] // 0
+new Date() //获取当前时间的Unix时间戳

在作为二元运算符使用时,+运算符比- * /运算符要复杂一些,因为其他的运算符都是处理数字的,而+运算符还可以处理字符串拼接。

  • 两边如果有字符串,另一边会转化为字符串进行相加
  • 如果没有字符串,两边都会转化为数字进行相加,对象也根据前面的方法转化为数字
  • 如果其中的一个操作数是对象,则将对象转换成原始值,日期对象会通过 toString()方法进行转换,其他对象通过valueOf()方法进行转换,但是大多数都是不具备可用的valueOf()方法,所以还是会通过toString()方法执行转换

简单来说就是,如果+运算符的其中一个操作数是字符串(或者通过以上步骤可以得到字符串),那么就执行字符串拼接,否则执行数字加法。

经典题

!+[]+[]+![] //"truefalse"

//首先第一个 + 左边不是数值,所以它是一元运算符,将后边跟着的 [] 转化为数字 0
//同时,最后一个 [] 左边是 ! 运算符,将 [] 转化为布尔值并取反,为 false
//转化后的结果为 !0 + [] + false
//!0 结果为 true,[] 转化为 "",所以结果变为 true + "" + false
//因为 第一个 + 右边有字符串,所以变为"true" + false
//最终结果为 "truefalse"

条件判断

以下条件判断的语句,会发生隐式转换为布尔值的情况:

  • if()语句中的条件判断表达式
  • for(..; ..; ..)语句中的条件判断表达式
  • while()do .. while()
  • ? : 中的条件判断表达式
  • ||&&左边的操作数

补充:valueOf()和toString()

常用内置对象调用toString()valueOf()的返回情况

类型toStringvalueOf
Object"[object 类型名]"对象本身
String字符串值字符串值
Number返回数值的字符串表示。还可返回以指定进制表示的字符串,默认10进制数字值
Boolean"true" / "false"Boolean
Array每个元素转换为字符串,用英文逗号作为分隔符进行拼接数组本身
Date日期的文本表示,格式为Wed Jun 05 2019 18:22:32 GMT+0800 (中国标准时间)返回时间戳,等同于调用getTime()
Function函数的文本表示函数本身
RegExp正则的文本表示正则本身

以上是本篇文章的内容,欢迎大家提出自己的想法,我们一起学习进步,与君共勉。

参考资料

查看原文

赞 11 收藏 8 评论 9

dema 赞了回答 · 2019-05-08

解决如何实现函数的一个功能

由于异步处理机制和同步处理机制不同,异步函数不能改为同步执行(在别的语言中可以通过 join 来实现同步,目前 JavaScript 不可以),所以对 JavaScript 异步函数的调用,不管采用何种方式(回调、Promise、await 等)都需要调用者本身支持异步处理。

用 async/await 可以让代码写/看起来比较像同步代码,但仍然需要对外部调用者进行改造,必须声明为 async 函数,如

async function outer() {
    if (await checkLogin()) {
         ////
    }
}

如果外部函数不能改造,考虑用 Promise.then

checkLogin().then(mark => {
    if (mark) {
        /////
    }
});

其实这种方式也可以改 await 的,加一个 async 封装即可

(async () => {
    if (await checkLogin()) {
        // 
    }
})();

参阅:

关注 4 回答 3

dema 赞了回答 · 2019-05-08

解决如何实现函数的一个功能

if(await Account.isLogin()){
         //登录后的。。。。。
   }

关注 4 回答 3

dema 提出了问题 · 2019-05-08

解决如何实现函数的一个功能

如下函数怎么让它返回isLogin的状态?

//因为多处地方用到了这个判断登录,所以我想把它单独拿出来
'strict 模式';

function checkLogin() {
  var login;
  await Account.isLogin().then(function (isLogin) {    //Account.isLogin() 一个promise
          login = isLogin;   //boolean
  });
  return login;     //实际情况是=> undefined,原因是异步,所以上面之后加上了await
}

//这里await报错了 ‘Uncaught Error: Module build failed: SyntaxError: await is a reserved word’

这个函数如何能改造下实现如下效果:

   //在别的地方用
   if(checkLogin()){
         //登录后的。。。。。
   }

关注 4 回答 3

dema 赞了文章 · 2019-05-07

有趣的CSS弹跳动画

这是只用了一个div来做的小动画,纯粹利用CSS3的animation来完成,就像是一个正方形在地上弹跳,碰到地面的时候尖角还会压缩变圆,阴影的部分也会随着正方形升高而缩小,至于到底该怎么完成呢?让我们继续看下去。

利用伪元素

由于只使用了一个div,要同时达到正方形旋转与阴影缩放的效果,这里必须使用两个伪元素(before与after)来完成,严格来说,虽然只有一个div,但是却是把这个div当作外框,让伪元素before作为旋转的正方形,让伪元素after作为阴影。

.box{
  position:relative;

}
.box:before{
  content:'';
  position:absolute;
  z-index:2;
  top:60px;
  left:50px;
  width:50px;
  height:50px;
  background:#c00;
  border-radius:2px;
  transform: rotate(45deg);
}
.box:after{
  content:'';
  position:absolute;
  z-index:1;
  top:128px;
  left:52px;
  width:44px;
  height:3px;
  background:#eaeaea;
  border-radius:100%;
}

图片描述

CSS动画

画出正方形与阴影之后,再来就是要做动画了,为了避免太过复杂,这里我们先不要旋转,先单纯让正方形上下跳动,然后阴影会放大缩小,下面的示例的动画,又新增了20%与80%的keyframe,目的是为了让接触的时候角落才会变圆,不然就会变成刚开始移动时尖角就变圆,就会很怪异了。

.box:before{
  content:'';
  position:absolute;
  z-index:2;
  top:60px;
  left:50px;
  width:50px;
  height:50px;
  background:#c00;
  border-radius:2px;
  transform: rotate(45deg);
  -webkit-animation:box .8s infinite ; 
}
@-webkit-keyframes box{
  0%{
    top:50px;
  }
  20%{
    border-radius:2px;  /*从20%的地方才开始变形*/
  }
  50%{
    top:80px; 
    border-bottom-right-radius:25px;
  }
  80%{
    border-radius:2px;  /*到80%的地方恢复原状*/
  }
  100%{
    top:50px;
  }
}
.box:after{
  content:'';
  position:absolute;
  z-index:1;
  top:128px;
  left:52px;
  width:44px;
  height:3px;
  background:#eaeaea;
  border-radius:100%;
  -webkit-animation:shadow .8s infinite ; 
}
@-webkit-keyframes shadow{
  0%,100%{
    left:54px;
    width:40px;
    background:#eaeaea;
  }
  50%{
    top:126px;
    left:50px;   /*让阴影保持在原位*/
    width:50px;
    height:7px;
    background:#eee;
  }
}

图片描述

加入旋转效果

了解原理之后,我们只要再加上旋转的属性,就可以达到弹跳起来的时候有旋转的效果,不过这里又有用到一个小技巧,就是落下的时候是90度转到45度,弹上去的时候从45旋转到0度,然后在这一瞬间从0度变成90度(100%到0%),如此一来我们就会产生错觉,感觉好像一直在旋转了。

@-webkit-keyframes box{
  0%{
    top:50px;
    transform: rotate(90deg); /**/
  }
  20%{
    border-radius:2px;
  }
  50%{
    top:80px; 
    transform: rotate(45deg);
    border-bottom-right-radius:25px;
  }
  80%{
    border-radius:2px;
  }
  100%{
    top:50px;
    transform: rotate(0deg);
  }
}

图片描述

举一反三,我们也可以把角度反转,就会往另外一边弹跳。
图片描述

如果我们把动画里头添加linear,就会变成线性的连续方式喔。
图片描述
图片描述

查看原文

赞 38 收藏 30 评论 1

认证与成就

  • 获得 29 次点赞
  • 获得 107 枚徽章 获得 3 枚金徽章, 获得 21 枚银徽章, 获得 83 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2016-07-25
个人主页被 1.1k 人浏览