玩demo的时候碰到了需要重复触发animation的需要,稍微研究了一哈,主流的做法好像是写一个一模一样的animation然后切换使得触发动效?
虽然感觉这方法怪蠢的,暂时没想到更好的,先记一下。
1 | <template lang="html"> |
1 | <style lang="less" scoped> |
like this ↓
always rookie
玩demo的时候碰到了需要重复触发animation的需要,稍微研究了一哈,主流的做法好像是写一个一模一样的animation然后切换使得触发动效?
虽然感觉这方法怪蠢的,暂时没想到更好的,先记一下。
1 | <template lang="html"> |
1 | <style lang="less" scoped> |
like this ↓
自从第一次提交pr以后,总是想着万一过了,我也算是为vue添砖加瓦了。
还是有点小激动的。
但真当看到merge了以后,也不知道是什么滋味,其实并没有想象中的那么兴奋?
不过这肯定不会是最后一次merge的,对吧。
要加油啊。
布袋戏三个礼拜没追更新了,攒了三集刚好拿起来追。
可是28集真的太让我难受了。
开头八分钟步天踪的牺牲,为了保空冥云渊,苗疆从此少了一位真正的大祭司,在扔杖的那一刻,步天踪早就做好了准备:
“权杖,劳你交回”
忆无心在祭祀墓前流泪捡起了权杖,这一捡,是捡起了权杖,也是捡起了大祭司之职。
新旧大祭司在墓碑前的交替与传承。
青云因大祭司之死而得到死罪赦免,得到父亲身死的消息瞬间崩溃,但真的一切都太迟了。
其母早已因为殷若微的药而成瘾,简直已经跟吸毒没有任何区别,毒瘾发作起来连祭祀之死的消息都不能动摇半分,我本以为青云会继续拿药喂。
可是我万分没想到青云会自己勒死自己的早已不是亲生母亲的亲生母亲。
青云绝望的哭声,是否会后悔当初偷了向天抢时而换来的亡命水。
一切都太迟了,令人窒息的心境成长,可是一切代价都太大了。
很棒的一集。
谈到这个就有点头大。。
其实我还是蛮惧怕柯里化的,感觉就像大山一样,不过总要跨过去的是吧(╥╯^╰╥)
柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术。
说得简单点:
只传递函数一部分的参数来调用他,并且返回一个函数去处理剩下的参数,也叫作部分求值
还是举一个老掉牙的栗子
1 | function add(a, b, c) { |
那么这个时候add的柯里化_add可以为:1
2
3
4
5
6
7function _add(a) {
return function(b) {
return function(c) {
return a + b + c;
}
}
}
因此以下两个运算都是等价的:1
2
3add(1, 2, 3)
_add(1)(2)(3)
简单来说,柯里化其实就是一个参数收集的过程,将每一次传入的参数收集起来,然后在最里层再进行处理。
接下来自己手动实现一个简单的柯里化累加。
1 | const curring = function () { |
完工!⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄
这篇blog算是很简单的,不能够特别明显的凸显柯里化的优势,主要目的还是初识一下柯里化本身。
当然,柯里化通用式具备更加强大的能力,我们靠眼力自己封装的柯里化函数则自由度偏低,柯里化函数的运行过程其实是一个参数的收集过程,我们将每一次传入的参数收集起来,并在最里层里面处理。所以借助这个方式可以总结出一份柯里化的通用式。
这里借用梧桐大大的currying通用式:1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34// 简单实现,参数只能从右到左传递
function createCurry(func, args) {
var arity = func.length; //函数的length表示形参个数
var args = args || [];
return function() {
var _args = [].slice.call(arguments);
[].push.apply(_args, args);
// 如果参数个数小于最初的func.length,则递归调用,继续收集参数
if (_args.length < arity) {
return createCurry.call(this, func, _args);
}
// 参数收集完毕,则执行func
return func.apply(this, _args);
}
}
function check(targetString, reg) {
return reg.test(targetString);
}
var _check = createCurry(check);
var checkPhone = _check(/^1[34578]\d{9}$/);
var checkEmail = _check(/^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/);
checkPhone('183888888');
checkEmail('xxxxx@test.com');
这两天接了个电面,感觉自己发挥的还是不太行,谈到了websocket和currying,这两个是真的不会。。平时没用上所以也很少去接触,还是需要抓一把,多充点电。
从websocket开始吧,并把一些东西记录起来。
websocket与http一样,都是通信协议,相比于http来说,websocket带来了不一样的东西。
从前的http,每一次的请求都是由客户端发起的,并且只能由客户端发起,http无法做到服务端主动进行推送信息。
从这点来说,http是十分麻烦的,因为一旦需求中遇到了要不断地接受服务器传递的信息的时候,只能用轮询来进行操作,就很僵硬。(突然想到了EventSource)
后来诞生了websocket
websocket最大的特点就是:服务器可以主动向客户端推送消息,客户端也同样主动向服务器发送信息
本质上来说,websocket是基于tcp,在发起连接的时候通过http/https发起一条特殊的http请求后创建一个用于交换数据的tcp连接。此后客户端和服务器通过此连接来进行实时通信。
带来的好处显而易见,减少了无意义的重复请求使得资源开销更低的同时,服务端主动推送也让通信也更高效。
1 | const ws = new WebSocket("wss://echo.websocket.org"); |
webSocket.readyState
可用来判断连接的状态,一般处于一下四种之一:
WebSocket.onopen
用于指定连接成功后所执行的回调WebSocket.onclose
用于指定连接关闭后所执行的回调WebSocket.onmessage
用于指定收到服务器数据后所执行的回调WebSocket.onerror
用于指定报错时所执行的回调WebSocket.send
用于向服务器发送数据1
ws.send('send some message')
实例对象的bufferedAmount
属性用来表示还剩余多少的二进制数据尚未发送,可用来判断发送是否结束。1
2
3
4
5
6const data = new ArrayBuffer(1000000);
ws.send(data);
if (ws.bufferedAmount === 0) {
console.log('字节发送完毕')
}
注意:服务端发送过来的数据可能是文本,也可能是二进制数据(blog
或者Arraybuffer
),可以使用binaryType
显示的指定收到的二进制数据类型
关于http缓存,感觉其实还是有点朦胧,解释不大清楚,趁着最近看了几篇文章,写一下自己的理解。
所有的资源都从服务器拉,如果在大量资源的情况下,造成的结果就是可能会造成一个比较长的的等待时间,从优化的角度上来说是不太能忍的_(:з」∠)_,所以为了提高页面的访问速度,在进行资源访问的时候,浏览器会根据资源返回的header头来进行相应的缓存设置。可能采用的是强缓,也可能会采用协商缓存。
返回的header头会包含着一些有关于缓存机制的描述信息,客户端直接根据描述信息进行操作(如果缓存命中则返回200),其中和强制缓存相关的字段为Expires
和Cache-Control
。这两个字段主要是用来区分缓存的过期时间,具体区别如下:
Expires
是http1.0的规范,格式是一个GMT时间格式的字符串,如Sun Jun 03 2018 14:47:26 GMT,是服务器返回的资源到期时间,如果请求的时间在该时间之前则视为有效。但一个隐藏的问题是,该时间是由服务端产生的, 所以可能会和客户端的时间存在着误差。
Cache-Control
是http1.1的规范,常见的值主要有private
,public
,no-cache
,max-age
,no-store
。
type | description |
---|---|
private | 只允许终端用户缓存 |
public | 所有用户都可以缓存,包括终端用户和CDN |
no-cache | 不使用本地缓存,只使用协商缓存 |
max-age | 值为一个数字,缓存内容将在一定的时间后失效 |
no-store | 禁止缓存,每一次请求都从服务器拉资源下来 |
协商缓存和强制缓存不一样,具体的区分为,协商缓存需要判断改缓存是否可用。
协商缓存都是由服务器来确定缓存资源是否可用的,所以客户端与服务器端要通过某种标识来进行通信,从而让服务器判断请求资源是否可用。
主要涉及到以下四个字段:Last-Modified
,If-Modified-Since
,Etag
,If-None-Match
type | description |
---|---|
Last-Modified | 为一个GMT格式的时间, 在浏览器第一次访问一个资源时,服务器在返回这个资源的同时,在响应头的header加上Last-Modified,这个header表示这个资源在服务器上的最后修改时间 |
If-Modified-Since | 当再次访问该资源时,请求头上会包含该字段,值为上次缓存下来的值,服务器获取该值并进行比对,从而判定资源是否已被更改,如果资源被改动则返回资源并且状态码为200,如果资源尚未改动,则返回304,浏览器直接从缓存加载资源 |
Etag | 与上文的标识符为时间不同,etag的标识符为一串由服务器规则生成的字符,与上两者的区别主要在于标识符的不同,其余一样 |
If-None-Match | 同上 |
1.强制缓存的优先级比协商缓存高。
2.Etag和Last-Modified可同时存在,并且优先检测Etag,再检测Last-Modified
tag:
缺失模块。
1、请确保node版本大于6.2
2、在博客根目录(注意不是yilia根目录)执行以下命令:
npm i hexo-generator-json-content --save
3、在根目录_config.yml里添加配置:
jsonContent: meta: false pages: false posts: title: true date: true path: true text: false raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true